1.Object.create() 是什么

浅浅的花香味﹌ 2021-09-29 12:10 248阅读 0赞

1.Object.create() 是什么？

Object.create(proto \[, propertiesObject \]) 是E5中提出的一种新的对象创建方式，第一个参数是要继承的原型，如果不是一个子函数，可以传一个null，第二个参数是对象的属性描述符，这个参数是可选的。

例如：

结果为: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

参考文章：

1.http://www.htmlgoodies.com/beyond/javascript/object.create-the-new-way-to-create-objects-in-javascript.html

2.http://www.jimmycuadra.com/posts/ecmascript-5-object-creation-and-property-definition