首页 > PHP资讯 > HTML5培训技术 > javascript一种新的对象创建方式-Object.create()

javascript一种新的对象创建方式-Object.create()

HTML5培训技术
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.例子:直接看例子就知道怎么用。 
 
复制代码
    yupeng's document
   
    <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》
复制代码
结果为:
 
100
yupeng
yupeng1
201 
I am returning: YUPENG 
A blue PORSCHE BOXTER. 
A blue XXXXXXXX. 
aaaaaa

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持6不支持0