Object.create() 方法会使用指定的原型对象及其属性去创建一个新的对象。

语法

Object.create(proto[, propertiesObject])

参数

proto
新创建对象的原型对象。
propertiesObject
可选。如果没有指定为 undefined,则是要添加到新创建对象的可枚举属性(即其自身定义的属性,而不是其原型链上的枚举属性)对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。

返回值

在指定原型对象上添加新属性后的对象。

例外

如果propertiesObject参数不是 null 或一个对象,则抛出一个 TypeError 异常。

例子

用 Object.create实现类式继承

下面的例子演示了如何使用Object.create()来实现类式继承。这是一个所有版本JavaScript都支持的单继承。

// Shape - superclass
function Shape() {
this.x = 0;
this.y = 0;
} // superclass method
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.
} // subclass extends superclass
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle; var rect = new Rectangle(); console.log('Is rect an instance of Rectangle?',
rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

如果你希望能继承到多个对象,则可以使用混入的方式。

function MyClass() {
SuperClass.call(this);
OtherSuperClass.call(this);
} // inherit one class
MyClass.prototype = Object.create(SuperClass.prototype);
// mixin another
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// re-assign constructor
MyClass.prototype.constructor = MyClass; MyClass.prototype.myMethod = function() {
// do a thing
};

Object.assign 会把  OtherSuperClass原型上的函数拷贝到 MyClass原型上,使 MyClass 的所有实例都可用 OtherSuperClass 的方法。Object.assign 是在 ES2015 引入的,且可用polyfilled。要支持旧浏览器的话,可用使用 jQuery.extend() 或者 _.assign()

使用 Object.createpropertyObject参数

var o;

// 创建一个原型为null的空对象
o = Object.create(null); o = {};
// 以字面量方式创建的空对象就相当于:
o = Object.create(Object.prototype); o = Object.create(Object.prototype, {
// foo会成为所创建对象的数据属性
foo: {
writable:true,
configurable:true,
value: "hello"
},
// bar会成为所创建对象的访问器属性
bar: {
configurable: false,
get: function() { return 10 },
set: function(value) {
console.log("Setting `o.bar` to", value);
}
}
}); function Constructor(){}
o = new Constructor();
// 上面的一句就相当于:
o = Object.create(Constructor.prototype);
// 当然,如果在Constructor函数中有一些初始化代码,Object.create不能执行那些代码 // 创建一个以另一个空对象为原型,且拥有一个属性p的对象
o = Object.create({}, { p: { value: 42 } }) // 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:
o.p = 24
o.p
//42 o.q = 12
for (var prop in o) {
console.log(prop)
}
//"q" delete o.p
//false //创建一个可写的,可枚举的,可配置的属性p
o2 = Object.create({}, {
p: {
value: 42,
writable: true,
enumerable: true,
configurable: true
}
});

Polyfill

这个 polyfill 涵盖了主要的应用场景,它创建一个已经选择了原型的新对象,但没有把第二个参数考虑在内。

请注意,尽管在 ES5 中 Object.create支持设置为[[Prototype]]null,但因为那些ECMAScript5以前版本限制,此 polyfill 无法支持该特性。

if (typeof Object.create !== "function") {
Object.create = function (proto, propertiesObject) {
if (!(proto === null || typeof proto === "object" || typeof proto === "function")) {
throw TypeError('Argument must be an object, or null');
}
var temp = new Object();
temp.__proto__ = proto;
if(typeof propertiesObject ==="object")
Object.defineProperties(temp,propertiesObject);
return temp;
};
}

规范

规范版本 规范状态 注解
ECMAScript 5.1 (ECMA-262)
Object.create
Standard Initial definition. Implemented in JavaScript 1.8.5
ECMAScript 2015 (6th Edition, ECMA-262)
Object.create
Standard  
ECMAScript Latest Draft (ECMA-262)
Object.create
Living Standard  

浏览器兼容

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic Support 5 (Yes) 4 9 11.6 5

Object.create() __https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create的更多相关文章

  1. Object.keys() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

    Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用for...in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in ...

  2. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError

  3. js对象 数组Array详解 (参照MDN官网:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)

    一:数组的创建方式: 1.采用直接量创建 var arr = [];//创建一个空数组 var arr2 = [1,2,3];//创建一个有三个元素的数组 2.采用构造函数创建 a.var arr1 ...

  4. for ...in 、for each ...in、 for...of(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of)

    1.for in for...in语句以任意顺序遍历一个对象的可枚举性.对于每个不同的属性,语句都会被执行. 语法 for (variable in object) {...} variable 在每 ...

  5. Introduction to Object-Oriented JavaScript 转载自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

    Introduction to Object-Oriented JavaScript IN THIS ARTICLE JavaScript review Object-oriented program ...

  6. A re-introduction to JavaScript (JS Tutorial) 转载自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

    A re-introduction to JavaScript (JS Tutorial) Redirected from https://developer.mozilla.org/en-US/do ...

  7. Javascript观察者模式(Object.defineProperty、Reflect和Proxy实现)

    什么是观察者模式? 答:在数据发生改变时,对应的处理函数自动执行.函数自动观察数据对象,一旦对象有变化,函数就会自动执行. 参考<原生JavaScript实现观察者模式>(https:// ...

  8. 对怎样充分利用安卓官方开发网站的一个简单性介绍介绍-https://developer.android.google.cn/docs/

    一,谷歌的安卓官方网站-https://developer.android.google.cn/docs/ ,在网站里面可以查询开发文档,开发指导,设计原则,制作app的例子等等,无论对于新手还是老手 ...

  9. https://developer.mozilla.org/

    Document/querySelector      https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

随机推荐

  1. Spring注解配置定时任务<task:annotation-driven/>

    http://m.blog.csdn.net/article/details?id=50945311 首先在配置文件头部的必须要有: xmlns:task="http://www.sprin ...

  2. C++对象模型——继承体系下的对象构造(第五章)

    5.2 继承体系下的对象构造 当定义一个object例如以下: T object; 时,实际上会发生什么事情呢?假设T有一个constructor(不论是由user提供或是由编译器合成),它会被调用. ...

  3. UDEV SCSI Rules Configuration for ASM in Oracle Linux 5 and 6

    UDEV SCSI Rules Configuration for ASM in Oracle Linux 5 and 6 For Oracle Automatic Storage Manager ( ...

  4. Python3基础(五) 函数

    函数(function)是组织好的.可重复使用的.具有一定功能的代码段.函数能提高应用的模块性和代码的重复利用率,Python中已经提供了很多内建函数,比如print(),同时Python还允许用户自 ...

  5. 小贝_mysql sql语句优化过程

    sql语句优化 一.SQL优化的一般步骤 (1).通过show status命令了解各种SQL的运行频率. (2).定位运行效率较低的SQL语句-(重点select) (3).通过explain分析低 ...

  6. WPF学习笔记:ComboBox的数据绑定

    UI <UserControl x:Class="UnitViews.UserMeUV" xmlns="http://schemas.microsoft.com/w ...

  7. bzoj2844

    http://www.lydsy.com/JudgeOnline/problem.php?id=2844 线性基... 先把线性基搞出来,然后不断逼近答案,如果这个基比答案小了,那么说明要加上,同时加 ...

  8. RegisterAttached 两种绑定方式

    RegisterAttached 含义:使用指定的属性名称.属性类型和所有者类型注册附加属性 绑定方式:C#绑定.WPF绑定 例:需求DataViewModel为DataView的VM层,在DataV ...

  9. E20170804-mk

    epic n. 史诗; 叙事诗; 史诗般的作品; estimate vt. 估计,估算; 评价,评论; 估量,估价; Sprint  vi. 冲刺,全速短跑; n. 全速短跑; 速度或活动的突然爆发; ...

  10. Rails5 Controller Document

    更新: 2017/06/28 大致完成全部 更新: 2017/06/29 补充module文件命名规则 更新: 2017/07/09 补充session的设置 更新: 2018/03/06 修正ren ...