前端开发者进阶之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

 

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;

    };

}

最新文章

  1. MSSQL 跨服器调用存储过程
  2. windows PHONE 开发-入门程序构筑
  3. ASP.NET MVC 网站开发总结（二）——一个或多个文件的异步或同步上传
  4. Java 日期比较以及得到前后一天
  5. MongoDb系列
  6. Oracle数据库——半期测验
  7. light oj 1140 - How Many Zeroes? 数位DP
  8. Codeforces Round #337 (Div. 2) C. Harmony Analysis 数学
  9. 进程（Process）和线程（Thread）的关系和区别
  10. SRM 581 D2 L2：SurveillanceSystem，重叠度
  11. BZOJ 2809 APIO2012 dispatching Treap+启示式合并 / 可并堆
  12. Arcgis Engine OMD
  13. MVC简单的增删改查
  14. Jaccard相似度在竞品分析中的应用
  15. 百度Aip人脸识别之python代码
  16. IDEA 自动重新载入
  17. java 偏向锁、轻量级锁及重量级锁synchronized原理
  18. java rsa 公钥加密
  19. maven项目打包时生成dependency-reduced-pom.xml
  20. MongoDB 安装 Windows XP

热门文章

  1. 2019 wannafly winter camp day5-8代码库
  2. 关于swiper动态更改，无法更新的悖论
  3. python3使用requests和requests_toolbelt上传文件
  4. Dubbo入门到精通学习笔记（十五）：Redis集群的安装（Redis3+CentOS）、Redis集群的高可用测试（含Jedis客户端的使用）、Redis集群的扩展测试
  5. 1.6 flux介绍
  6. 初探Javascript魅力(1)
  7. React简单入门
  8. 小程序学习三 一切的开始app() 小程序的注册
  9. SpringMVC 拦截器原理
  10. Nginx的静态代理