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

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 function

var 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>

復制代碼

結果為:

 

100

yupeng

yupeng1

201 

I am returning: YUPENG 

A blue PORSCHE BOXTER. 

A blue XXXXXXXX. 

aaaaaa

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *