Object.create()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die statische Methode Object.create() erstellt ein neues Objekt, indem sie ein vorhandenes Objekt als Prototyp für das neu erstellte Objekt verwendet.

Probieren Sie es aus

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"

Syntax

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

Parameter

proto

Das Objekt, das der Prototyp des neu erstellten Objekts sein soll.

propertiesObject Optional

Falls angegeben und nicht undefined, ein Objekt, dessen aufzählbare eigene Eigenschaften Eigenschaftsbeschreibungen spezifizieren, die dem neu erstellten Objekt unter den entsprechenden Eigenschaftsnamen hinzugefügt werden. Diese Eigenschaften entsprechen dem zweiten Argument von Object.defineProperties().

Rückgabewert

Ein neues Objekt mit dem angegebenen Prototyp-Objekt und den Eigenschaften.

Ausnahmen

TypeError

Wird ausgelöst, wenn proto weder null noch ein Object ist.

Beispiele

Klassische Vererbung mit Object.create()

Unten ist ein Beispiel, wie Object.create() verwendet werden kann, um klassische Vererbung zu erreichen. Dies ist für eine einfache Vererbung, die alles ist, was JavaScript unterstützt.

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.'

Beachten Sie, dass es Einschränkungen bei der Verwendung von create() gibt, wie z.B. das Hinzufügen der constructor Eigenschaft, um semantische Korrektheit zu gewährleisten. Obwohl Object.create() einer besseren Leistung nachgesagt wird als das Ändern des Prototyps mit Object.setPrototypeOf(), ist der Unterschied tatsächlich vernachlässigbar, wenn keine Instanzen erstellt wurden und auf Eigenschaften noch nicht optimiert zugegriffen wurde. In modernem Code sollte in jedem Fall die class Syntax bevorzugt werden.

Verwendung des propertiesObject-Arguments mit Object.create()

Object.create() ermöglicht eine fein abgestimmte Kontrolle über den Objekt-Erstellungsprozess. Die Objekt-Initialisierungssyntax ist tatsächlich ein syntaktischer Zucker von Object.create(). Mit Object.create() können wir Objekte mit einem bestimmten Prototyp und auch einigen Eigenschaften erstellen. Beachten Sie, dass der zweite Parameter Schlüssel auf Eigenschaftsbeschreibungen abbildet – das bedeutet, dass Sie die Aufzählbarkeit, Konfigurierbarkeit usw. jeder Eigenschaft ebenfalls kontrollieren können, was bei Objekt-Initialisierern nicht möglich ist.

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 } });

Mit Object.create() können wir ein Objekt mit null als Prototyp erstellen. Die entsprechende Syntax bei Objekt-Initialisierern wäre der __proto__ Schlüssel.

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

Standardmäßig sind Eigenschaften nicht schreibbar, aufzählbar oder konfigurierbar.

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

Um eine Eigenschaft mit denselben Attributen wie in einem Initialisierer anzugeben, spezifizieren Sie writable, enumerable und configurable explizit.

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 }

Sie können Object.create() verwenden, um das Verhalten des new Operators nachzuahmen.

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

Natürlich kann die Object.create() Methode, wenn es tatsächlichen Initialisierungscode in der Constructor Funktion gibt, diesen nicht wiedergeben.

Spezifikationen

Specification
ECMAScript® 2026 Language Specification
# sec-object.create

Browser-Kompatibilität

Siehe auch