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

前端开发者进阶之ECMAScript新特性--Object.create的更多相关文章

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

    Object.create(prototype, descriptors) :创建一个具有指定原型且可选择性地包含指定属性的对象 参数:prototype 必需.  要用作原型的对象. 可以为 nul ...

  2. iOS8 针对开发者所拥有的新特性汇总如下

    iOS8 针对开发者所拥有的新特性汇总如下 1.支持第三方键盘 2.自带网页翻译功能(即在线翻译) 3.指纹识别功能开放:第三方软件可以调用 4.Safari浏览器可直接添加新的插件. 5.可以把一个 ...

  3. ECMAScript新特性【一】--Object.create

    Object.create(prototype, descriptors) :创建一个具有指定原型且可选择性地包含指定属性的对象 参数: prototype 必需.  要用作原型的对象. 可以为 nu ...

  4. 前端入门21-JavaScript的ES6新特性

    声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...

  5. 21、前端知识点--html5和css3新特性汇总

    跳转到该链接 新特性汇总版: https://www.cnblogs.com/donve/p/10697745.html HTML5和CSS3的新特性(浓缩好记版) https://blog.csdn ...

  6. 前端神器 Firebug 2.0 新特性一览

    如果你从事Web前端方面的开发工作,那么对Firebug一定不会陌生,这是Firefox浏览器的一款插件,集HTML查看和编辑.Javascript控制台.网络状况监视器于一体,给Web开发者带来了极 ...

  7. 前端开发者进阶之函数柯里化Currying

    穆乙:http://www.cnblogs.com/pigtail/p/3447660.html 在计算机科学中,柯里化(英语:Currying),又译为卡瑞化或加里化,是把接受多个参数的函数变换成接 ...

  8. 前端(七):ES6一些新特性

    一.变量 1.var关键字的弊端 var关键字的弊端:1.可以重复声明变量:2.无法限制变量修改:3.没有块级作用域,只有函数作用域. <html lang="en"> ...

  9. 前端开发者进阶之函数反柯里化unCurrying

    函数柯里化,是固定部分参数,返回一个接受剩余参数的函数,也称为部分计算函数,目的是为了缩小适用范围,创建一个针对性更强的函数. 那么反柯里化函数,从字面讲,意义和用法跟函数柯里化相比正好相反,扩大适用 ...

随机推荐

  1. CentOS7用rpmforge源!

    确认系统是否安装了priority这个yum的插件,这个插件用来保证安装软件时候软件仓库先后次序,一般是默认先从官方base或者镜像安装,然后从社区用户contribute的软件中安装,再从第三方软件 ...

  2. (转)rand函数和srand函数

    转:http://www.cnblogs.com/lenient/articles/1565376.html 首先我们要对rand&srand有个总体的看法:srand初始化随机种子,rand ...

  3. 剑指offer——38二叉搜索树与双向链表

    题目描述 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向.   题解: 在搜索二义树中,左子节点的值总是小于父节点的值,右子节点的值总 ...

  4. mtv 与mvc

    1.MVC与MTV模型 MVC模型 Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型 ...

  5. 拓展KMP求回文串

    题目:hdu3613: 题意:有26字母对应的价值,然后给出以个串,把它分成两段字串,如果字串是回文串,串的价值就是每个字符和,不是就为0.求最大价值. 博客 分析:拓展KMP的应用求回文字串. #i ...

  6. CSS标准的书写顺序

  7. nginx 自启动

    转载:https://www.cnblogs.com/cxscode/p/8262319.html 安装Nginx 下载windows版nginx (http://nginx.org/download ...

  8. dev中 ,usercontrol打印界面内容,打印预览和打印

    首先,在对应的文件夹下面添加引用,如下图 如果没有就下载下来包. 预先在本地文件夹下面建立.frx文件,像这样的, 然后在触发事件下面写 //打印预览 private void btn_Preview ...

  9. sqlmap结合burpsuite对post请求进行注入测试

    1. 浏览器打开目标地址 http://testasp.vulnweb.com/Login.asp 2. 配置burp代理(127.0.0.1:8080)以拦截请求 3. 点击login表单的subm ...

  10. Hexo next主题添加站内搜索功能

    根据关键字搜索博文,站内搜索的功能很实用.hexo开启站内搜索很方便,已经有现成的插件可以使用,也是为了方便自己 安装插件 npm install hexo-generator-search --sa ...