JavaScript Object.create() 方法

Object.create() 语法

Object.create() 是 JavaScript 的一个静态方法，它使用已有对象作为原型，然后去创建一个新对象。

Object.create() 是一种实现继承的强大方式，与传统的构造函数继承模式不同。

语法：

Object.create(proto, propertiesObject)

说明：

Object.create() 方法接收以下 2 个参数。

• proto（必选）：基于哪个对象作为原型。
• propertiesObject（可选）：为新创建对象指定的属性对象。对象的属性名将会是新创建对象的属性名，而属性值是属性描述符。该对象可能会包含 configurable、enumerable、value、writable、set、get 等选项。

使用 Object.create() 时，如果你希望的是创建一个全新的对象，而不是继承一个现有对象，此时应该把 proto 参数设置为 null，也就是：

Object.create(null, {})

通过 Object.create(null) 创建的对象是一个 “纯粹” 的对象，它没有原型链，因此不继承任何 Object.prototype 上的属性和方法（例如 toString()、hasOwnProperty()）。这在用作数据映射或字典时非常有用，可以避免原型链上的属性冲突。

Object.create() 摘要

Object.create() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript Object.create() 方法是如何使用的。

示例 1：Object.create() 基本用法

// 1. 创建父类
function Fruit() {
    this.type = "水果";
}

// 2. 创建子类
function Apple() {
    Fruit.call(this);     // 调用基类的构造函数
}

// 3. 子类继承父类
Apple.prototype = Object.create(Fruit.prototype);
Apple.prototype.constructor = Apple;

// 4. 创建实例
const a = new Apple();
console.log(a.type);

运行结果如下。

水果

分析：

Object.create() 的使用都需要经过上面的 4 步。在不指定 propertiesObject 参数的情况下，使用 Object.create() 实现继承于 JavaScript 原型继承并没有什么区别。

示例 2：Object.create() 使用第 2 个参数

// 1. 创建父类
function Fruit() {
    this.type = "水果";
}

// 2. 创建子类
function Apple() {
    Fruit.call(this);     // 调用基类的构造函数
}

// 3. 子类继承父类
Apple.prototype = Object.create(Fruit.prototype, {
    price: {
        configurable: true,
        enumerable: true,
        writable: true,
        value: 11.5
    }
});
Apple.prototype.constructor = Apple;

// 4. 创建实例
const a = new Apple();
console.log(a.price);

运行结果如下。

11.5

分析：

Object.create() 的第 2 个参数 propertiesObject，主要是为子类对象配置一些属性。

需要清楚的是，使用 propertiesObject 定义属性时，如果省略了 configurable、enumerable 或 writable 等，它们就会使用默认值 false。此时也就意味着，这个属性是不可遍历、不可修改、不可删除的。

Object.create()、new Object() 和 {} 的区别

Object.create()、new Object() 和 {} 都可以用于创建一个空对象，它们之间的区别如下。

• new Object() 和 “{}” 本质上是一样的，创建出来的空对象也一样。
• Object.create(null) 创建出来的空对象具有更少的属性，而 Object.create({}) 创建出来的空对象与 new Object()、{} 创建出来的非常接近。

示例 3：new Object() 和 {}

const obj1 = new Object();
const obj2 = {};

console.log(obj1);
console.log(obj2);

控制台输出结果如下图所示。

分析：

从浏览器控制台可以看出，new Object() 和 {} 创建出来的空对象，本质上继承自 Object 对象，因为它们都有 hasOwnProperty()、isPrototypeOf() 等一堆属性或方法。

示例 4：Object.create()

const obj = Object.create(null);
console.log(obj);

控制台输出结果如下图所示。

分析：

Object.create(null) 创建出来的空对象完完全全是空的，没有任何的属性。这是因为 null 本质上就是一个不带任何属性的对象。

如果把 Object.create(null) 改为 Object.create({})，再次运行后的结果如下图所示。

Object.create({}) 创建出来的空对象与 new Object() 或 {} 创建出来的空对象已经非常接近了，只是多了一层 __proto__ 嵌套而已。

实际上，很多源码（比如 Vue）的作者都喜欢使用 Object.create(null) 来初始化一个空对象，而不是使用 new Object() 或 {} 初始化一个空对象。主要是因为 new Object() 或 “{}” 创建的空对象自带了太多不必要的属性，而 Object.create(null) 创建出来的空对象更加的 “干净”。