Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Object.create()

Baseline
Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die statische Methode Object.create() erstellt ein neues Objekt und verwendet dabei ein vorhandenes Objekt als Prototyp des neu erstellten Objekts.

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 als Prototyp des neu erstellten Objekts dienen soll.

propertiesObject Optional

Falls angegeben und nicht undefined, ein Objekt, dessen aufzählbare eigene Eigenschaften Eigenschaftsdeskriptoren festlegen, 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 Prototypobjekt und den angegebenen Eigenschaften.

Ausnahmen

TypeError

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

Beispiele

Klassische Vererbung mit Object.create()

Das folgende Beispiel zeigt, wie Sie mit Object.create() klassische Vererbung umsetzen. Es handelt sich um einfache Vererbung, die einzige Form der Vererbung, die 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 bei der Verwendung von create() einige Besonderheiten: So müssen Sie beispielsweise die Eigenschaft constructor erneut hinzufügen, um die korrekte Semantik sicherzustellen. Object.create() gilt zwar als leistungsfähiger als das Ändern des Prototyps mit Object.setPrototypeOf(), tatsächlich ist der Unterschied jedoch vernachlässigbar, wenn noch keine Instanzen erstellt und Eigenschaftszugriffe noch nicht optimiert wurden. In modernem Code sollten Sie in jedem Fall die class-Syntax bevorzugen.

Das Argument propertiesObject mit Object.create() verwenden

Object.create() ermöglicht eine präzise Steuerung der Objekterstellung. Die Syntax für Objektinitialisierer ist im Grunde eine vereinfachte Schreibweise für Object.create(). Mit Object.create() können Sie Objekte mit einem festgelegten Prototyp und zusätzlichen Eigenschaften erstellen. Beachten Sie, dass der zweite Parameter Schlüsseln Eigenschaftsdeskriptoren zuordnet. Dadurch können Sie auch steuern, ob eine Eigenschaft aufzählbar oder konfigurierbar ist und Ähnliches – was mit Objektinitialisierern 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 Sie ein Objekt mit null als Prototyp erstellen. Die entsprechende Schreibweise in Objektinitialisierern verwendet den Schlüssel __proto__.

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

Standardmäßig sind Eigenschaften nicht beschreibbar, 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 Objektinitialisierer festzulegen, geben Sie writable, enumerable und configurable ausdrücklich an.

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 }

Mit Object.create() können Sie das Verhalten des Operators new nachbilden.

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

Wenn die Funktion Constructor allerdings Initialisierungscode enthält, kann die Methode Object.create() diesen nicht ausführen.

Spezifikationen

Spezifikation
ECMAScript® 2027 Language Specification
# sec-object.create

Browser-Kompatibilität

Siehe auch