javascript一種新的對象建立方式-Object.create()

來源:互聯網
上載者:User

標籤:

1.Object.create() 是什嗎?

  Object.create(proto [, propertiesObject ]) 是E5中提出的一種新的對象建立方式,第一個參數是要繼承的原型,如果不是一個子函數,可以傳一個null,第二個參數是對象的屬性描述符,這個參數是可選的。

  例如: 

function Car (desc) {    this.desc = desc;    this.color = "red";} Car.prototype = {    getInfo: function() {      return ‘A ‘ + this.color + ‘ ‘ + this.desc + ‘.‘;    }};//instantiate object using the constructor functionvar car =  Object.create(Car.prototype);car.color = "blue";alert(car.getInfo());

結果為:A blue undefined.

2.propertiesObject 參數的詳細解釋:(預設都為false)

 資料屬性

  • writable:是否可任意寫
  • configurable:是否能夠刪除,是否能夠被修改
  • enumerable:是否能用 for in 枚舉
  • value:值

 訪問屬性:

  • get(): 訪問
  • set(): 設定

3.例子:直接看例子就知道怎麼用。 

<!DOCTYPE html><html><head>    <title>yupeng‘s document </title>    <meta charset="utf-8"/></head><body>    <script type="text/javascript">        var obj = {            a:function(){                console.log(100)            },            b:function(){                console.log(200)            },            c:function(){                console.log(300)            }        }        var newObj = {};        newObj = Object.create(obj,{            t1:{                value:‘yupeng‘,                writable:true            },            bar: {                configurable: false,                get: function() { return bar; },                set: function(value) { bar=value }            }                    })        console.log(newObj.a());        console.log(newObj.t1);        newObj.t1=‘yupeng1‘        console.log(newObj.t1);        newObj.bar=201;        console.log(newObj.bar)                function Parent() { }        var parent = new Parent();        var child = Object.create(parent, {              dataDescriptor: {                value: "This property uses this string as its value.",                writable: true,                enumerable: true              },              accessorDescriptor: {                get: function () { return "I am returning: " + accessorDescriptor; },                set: function (val) { accessorDescriptor = val; },                configurable: true              }            });        child.accessorDescriptor = ‘YUPENG‘;        console.log(child.accessorDescriptor);        var Car2 = function(){            this.name = ‘aaaaaa‘        } //this is an empty object, like {}        Car2.prototype = {          getInfo: function() {            return ‘A ‘ + this.color + ‘ ‘ + this.desc + ‘.‘;          }        };        var newCar = new Car2();                 var car2 = Object.create(newCar, {          //value properties          color:   { writable: true,  configurable:true, value: ‘red‘ },          //concrete desc value          rawDesc: { writable: true, configurable:true, value: ‘Porsche boxter‘ },          // data properties (assigned using getters and setters)          desc: {             configurable:true,             get: function ()      { return this.rawDesc.toUpperCase();  },            set: function (value) { this.rawDesc = value.toLowerCase(); }            }        });         car2.color = ‘blue‘;        console.log(car2.getInfo());        car2.desc = "XXXXXXXX";        console.log(car2.getInfo());        console.log(car2.name);    </script></body></html>

結果為:

100yupeng
yupeng1
201 
I am returning: YUPENG 
A blue PORSCHE BOXTER. 
A blue XXXXXXXX. 
aaaaaa 參考文章:1.http://www.htmlgoodies.com/beyond/javascript/object.create-the-new-way-to-create-objects-in-javascript.html2.http://www.jimmycuadra.com/posts/ecmascript-5-object-creation-and-property-definition3.http://msdn.microsoft.com/zh-cn/library/ie/ff925952(v=vs.94).aspx

javascript一種新的對象建立方式-Object.create()

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.