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
 
参考文章：
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
3.http://msdn.microsoft.com/zh-cn/library/ie/ff925952(v=vs.94).aspx
posted @   yupeng  阅读(47801)  评论(2)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
点击右上角即可分享
微信分享提示