Object.create()

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

Object.create() 静态方法创建一个新对象,使用现有对象作为新创建对象的原型。

试一试

const person = {
  isHuman: false,
  printIntroduction() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  },
};

const me = Object.create(person);

me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // Inherited properties can be overwritten

me.printIntroduction();
// Expected output: "My name is Matthew. Am I human? true"

语法

js
Object.create(proto)
Object.create(proto, propertiesObject)

参数

proto

应成为新创建对象的原型的对象。

propertiesObject 可选

如果指定且不为 undefined,则为一个对象,其 可枚举的自有属性 指定属性描述符,这些描述符将被添加到新创建的对象中,属性名与描述符对应。这些属性对应于 Object.defineProperties() 的第二个参数。

返回值

一个具有指定原型对象和属性的新对象。

异常

TypeError

如果 proto 既不是 null 也不是 Object,则抛出此错误。

示例

使用 Object.create() 进行类式继承

下面是一个如何使用 Object.create() 实现类式继承的示例。这是单继承,也是 JavaScript 所支持的。

js
// 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, {
  // If you don't set Rectangle.prototype.constructor to Rectangle,
  // it will take the prototype.constructor of Shape (parent).
  // To avoid that, we set the prototype.constructor to Rectangle (child).
  constructor: {
    value: Rectangle,
    enumerable: false,
    writable: true,
    configurable: true,
  },
});

const 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); // Logs 'Shape moved.'

请注意,使用 create() 时需要注意一些细节,例如重新添加 constructor 属性以确保语义正确。虽然 Object.create() 被认为比使用 Object.setPrototypeOf() 修改原型性能更好,但如果在实例尚未创建且属性访问尚未优化的情况下,这种差异实际上是微不足道的。在现代代码中,无论如何都应优先使用 class 语法。

使用 Object.create() 的 propertiesObject 参数

Object.create() 允许对对象创建过程进行精细控制。实际上,对象字面量语法Object.create() 的语法糖。通过 Object.create(),我们可以创建具有指定原型和某些属性的对象。请注意,第二个参数将键映射到属性描述符 — 这意味着您还可以控制每个属性的可枚举性、可配置性等,而这是您在对象字面量中无法做到的。

js
o = {};
// Is equivalent to:
o = Object.create(Object.prototype);

o = Object.create(Object.prototype, {
  // foo is a regular data property
  foo: {
    writable: true,
    configurable: true,
    value: "hello",
  },
  // bar is an accessor property
  bar: {
    configurable: false,
    get() {
      return 10;
    },
    set(value) {
      console.log("Setting `o.bar` to", value);
    },
  },
});

// Create a new object whose prototype is a new, empty
// object and add a single property 'p', with value 42.
o = Object.create({}, { p: { value: 42 } });

使用 Object.create(),我们可以创建一个原型为 null 的对象。在对象字面量中,等效的语法是 __proto__ 键。

js
o = Object.create(null);
// Is equivalent to:
o = { __proto__: null };

默认情况下,属性不是可写、可枚举或可配置的。

js
o.p = 24; // throws in strict mode
o.p; // 42

o.q = 12;
for (const prop in o) {
  console.log(prop);
}
// 'q'

delete o.p;
// false; throws in strict mode

要指定一个与字面量中具有相同属性的属性,请显式指定 writableenumerableconfigurable

js
o2 = Object.create(
  {},
  {
    p: {
      value: 42,
      writable: true,
      enumerable: true,
      configurable: true,
    },
  },
);
// This is not equivalent to:
// o2 = Object.create({ p: 42 })
// which will create an object with prototype { p: 42 }

您可以使用 Object.create() 来模仿 new 运算符的行为。

js
function Constructor() {}
o = new Constructor();
// Is equivalent to:
o = Object.create(Constructor.prototype);

当然,如果 Constructor 函数中有实际的初始化代码,Object.create() 方法无法反映它。

规范

规范
ECMAScript® 2026 语言规范
# sec-object.create

浏览器兼容性

另见