码迷，mamicode.com
首页 > 其他好文 > 详细

前端开发者进阶之ECMAScript新特性--Object.create

时间：2017-07-09 23:53:54      阅读：233      评论：0      收藏：0      [点我收藏+]

标签：nts   前端   doc   set   san   mil   void   com   new   

Object.create(prototype, descriptors) ：创建一个具有指定原型且可选择性地包含指定属性的对象

参数:
prototype 必需。  要用作原型的对象。 可以为 null。
descriptors 可选。 包含一个或多个属性描述符的 JavaScript 对象。
“数据属性”是可获取且可设置值的属性。 数据属性描述符包含 value 特性，以及 writable、enumerable 和 configurable 特性。

如果未指定最后三个特性，则它们默认为 false。 只要检索或设置该值，“访问器属性”就会调用用户提供的函数。 访问器属性描述符包含 set 特性和/或 get 特性。

技术分享
var pt = {
        say : function(){
            console.log(‘saying!‘);    
        }
    }
    
    var o = Object.create(pt);
    
    console.log(‘say‘ in o); // true
    console.log(o.hasOwnProperty(‘say‘)); // false
技术分享

如果prototype传入的是null，创建一个没有原型链的空对象。

var o1 = Object.create(null);
console.dir(o1); // object[ No Properties ]

 当然，可以创建没有原型链的但带descriptors的对象；

技术分享
var o2 = Object.create(null, {
        size: {
            value: "large",
            enumerable: true
        },
        shape: {
            value: "round",
            enumerable: true
        }    
    });
    
    console.log(o2.size);    // large
    console.log(o2.shape);     // round
    console.log(Object.getPrototypeOf(o2));     // null
技术分享

也可以创建带属性带原型链的对象：

技术分享
var pt = {
        say : function(){
            console.log(‘saying!‘);    
        }
    }

var o3 = Object.create(pt, {
        size: {
            value: "large",
            enumerable: true
        },
        shape: {
            value: "round",
            enumerable: true
        }    
    });
    
    console.log(o3.size);    // large
    console.log(o3.shape);     // round
    console.log(Object.getPrototypeOf(o3));     // {say:...}
技术分享

 最重要的是实现继承，看下面实例：

技术分享
//Shape - superclass
        function Shape() {
          this.x = 0;
          this.y = 0;
        }
        
        Shape.prototype.move = function(x, y) {
            this.x += x;
            this.y += y;
            console.info("Shape moved.");
        };
        
        // Rectangle - subclass
        function Rectangle() {
          Shape.call(this); //call super constructor.
        }
        
        Rectangle.prototype = Object.create(Shape.prototype);
        
        var rect = new Rectangle();

        console.log(rect instanceof Rectangle); //true.
        console.log(rect instanceof Shape); //true.
        
        rect.move(); //"Shape moved."
技术分享

 不支持浏览器的兼容实现：

1、简单实现，也是最常见的实现方式，没有实现第二个参数的功能：

技术分享
if (!Object.create) {
    Object.create = function (o) {
        if (arguments.length > 1) {
            throw new Error(‘Object.create implementation only accepts the first parameter.‘);
        }
        function F() {}
        F.prototype = o;
        return new F();
    };
}
技术分享

2、复杂实现，实现第二个参数的大部分功能：

技术分享
if (!Object.create) {

    // Contributed by Brandon Benvie, October, 2012
    var createEmpty;
    var supportsProto = Object.prototype.__proto__ === null;
    if (supportsProto || typeof document == ‘undefined‘) {
        createEmpty = function () {
            return { "__proto__": null };
        };
    } else {
        createEmpty = function () {
            var iframe = document.createElement(‘iframe‘);
            var parent = document.body || document.documentElement;
            iframe.style.display = ‘none‘;
            parent.appendChild(iframe);
            iframe.src = ‘javascript:‘;
            var empty = iframe.contentWindow.Object.prototype;
            parent.removeChild(iframe);
            iframe = null;
            delete empty.constructor;
            delete empty.hasOwnProperty;
            delete empty.propertyIsEnumerable;
            delete empty.isPrototypeOf;
            delete empty.toLocaleString;
            delete empty.toString;
            delete empty.valueOf;
            empty.__proto__ = null;

            function Empty() {}
            Empty.prototype = empty;
            // short-circuit future calls
            createEmpty = function () {
                return new Empty();
            };
            return new Empty();
        };
    }

    Object.create = function create(prototype, properties) {

        var object;
        function Type() {}  // An empty constructor.

        if (prototype === null) {
            object = createEmpty();
        } else {
            if (typeof prototype !== "object" && typeof prototype !== "function") {

                throw new TypeError("Object prototype may only be an Object or null"); // same msg as Chrome
            }
            Type.prototype = prototype;
            object = new Type();

            object.__proto__ = prototype;
        }

        if (properties !== void 0) {
            Object.defineProperties(object, properties);
        }

        return object;
    };
}

前端开发者进阶之ECMAScript新特性【一】--Object.create

 

Object.create(prototype, descriptors) ：创建一个具有指定原型且可选择性地包含指定属性的对象

参数:
prototype 必需。  要用作原型的对象。 可以为 null。
descriptors 可选。 包含一个或多个属性描述符的 JavaScript 对象。
“数据属性”是可获取且可设置值的属性。 数据属性描述符包含 value 特性，以及 writable、enumerable 和 configurable 特性。

如果未指定最后三个特性，则它们默认为 false。 只要检索或设置该值，“访问器属性”就会调用用户提供的函数。 访问器属性描述符包含 set 特性和/或 get 特性。

技术分享
var pt = {
        say : function(){
            console.log(‘saying!‘);    
        }
    }
    
    var o = Object.create(pt);
    
    console.log(‘say‘ in o); // true
    console.log(o.hasOwnProperty(‘say‘)); // false
技术分享

如果prototype传入的是null，创建一个没有原型链的空对象。

var o1 = Object.create(null);
console.dir(o1); // object[ No Properties ]

 当然，可以创建没有原型链的但带descriptors的对象；

技术分享
var o2 = Object.create(null, {
        size: {
            value: "large",
            enumerable: true
        },
        shape: {
            value: "round",
            enumerable: true
        }    
    });
    
    console.log(o2.size);    // large
    console.log(o2.shape);     // round
    console.log(Object.getPrototypeOf(o2));     // null
技术分享

也可以创建带属性带原型链的对象：

技术分享
var pt = {
        say : function(){
            console.log(‘saying!‘);    
        }
    }

var o3 = Object.create(pt, {
        size: {
            value: "large",
            enumerable: true
        },
        shape: {
            value: "round",
            enumerable: true
        }    
    });
    
    console.log(o3.size);    // large
    console.log(o3.shape);     // round
    console.log(Object.getPrototypeOf(o3));     // {say:...}
技术分享

 最重要的是实现继承，看下面实例：

技术分享
//Shape - superclass
        function Shape() {
          this.x = 0;
          this.y = 0;
        }
        
        Shape.prototype.move = function(x, y) {
            this.x += x;
            this.y += y;
            console.info("Shape moved.");
        };
        
        // Rectangle - subclass
        function Rectangle() {
          Shape.call(this); //call super constructor.
        }
        
        Rectangle.prototype = Object.create(Shape.prototype);
        
        var rect = new Rectangle();

        console.log(rect instanceof Rectangle); //true.
        console.log(rect instanceof Shape); //true.
        
        rect.move(); //"Shape moved."
技术分享

 不支持浏览器的兼容实现：

1、简单实现，也是最常见的实现方式，没有实现第二个参数的功能：

技术分享
if (!Object.create) {
    Object.create = function (o) {
        if (arguments.length > 1) {
            throw new Error(‘Object.create implementation only accepts the first parameter.‘);
        }
        function F() {}
        F.prototype = o;
        return new F();
    };
}
技术分享

2、复杂实现，实现第二个参数的大部分功能：

技术分享
if (!Object.create) {

    // Contributed by Brandon Benvie, October, 2012
    var createEmpty;
    var supportsProto = Object.prototype.__proto__ === null;
    if (supportsProto || typeof document == ‘undefined‘) {
        createEmpty = function () {
            return { "__proto__": null };
        };
    } else {
        createEmpty = function () {
            var iframe = document.createElement(‘iframe‘);
            var parent = document.body || document.documentElement;
            iframe.style.display = ‘none‘;
            parent.appendChild(iframe);
            iframe.src = ‘javascript:‘;
            var empty = iframe.contentWindow.Object.prototype;
            parent.removeChild(iframe);
            iframe = null;
            delete empty.constructor;
            delete empty.hasOwnProperty;
            delete empty.propertyIsEnumerable;
            delete empty.isPrototypeOf;
            delete empty.toLocaleString;
            delete empty.toString;
            delete empty.valueOf;
            empty.__proto__ = null;

            function Empty() {}
            Empty.prototype = empty;
            // short-circuit future calls
            createEmpty = function () {
                return new Empty();
            };
            return new Empty();
        };
    }

    Object.create = function create(prototype, properties) {

        var object;
        function Type() {}  // An empty constructor.

        if (prototype === null) {
            object = createEmpty();
        } else {
            if (typeof prototype !== "object" && typeof prototype !== "function") {

                throw new TypeError("Object prototype may only be an Object or null"); // same msg as Chrome
            }
            Type.prototype = prototype;
            object = new Type();

            object.__proto__ = prototype;
        }

        if (properties !== void 0) {
            Object.defineProperties(object, properties);
        }

        return object;
    };
}

前端开发者进阶之ECMAScript新特性--Object.create

标签：nts   前端   doc   set   san   mil   void   com   new   

原文地址：http://www.cnblogs.com/ypinchina/p/7143569.html

踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！