• 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
  • 相关阅读:
    com.panie 项目开发随笔_前后端框架考虑(2016.12.8)
    Jsoup 使用教程:数据抽取
    Jsoup 使用教程:输入
    项目中图片处理总结
    jsonp 跨域请求
    由Memcached升级到 Couchbase的 Java 客户端的过程记录(三)
    由Memcached升级到 Couchbase的 Java 客户端的过程记录(二)
    jquery eval解析JSON中的注意点介绍
    JS禁止WEB页面鼠标事件大全
    jQuery事件之鼠标事件
  • 原文地址:https://www.cnblogs.com/kdbBlog/p/4744985.html
Copyright © 2020-2023  润新知