Object.create()

Summary

Die Object.create() Methode erstellt eine neues Objekt nach Vorlage des angegebenen Prototyps und ggf. zusätzliches Eigenschaften.

Syntax

Object.create(proto[, propertiesObject])

Parameter

proto

Das Objekt, welches als Prototyp des zu erstellenden Objekts verwendet wird.

propertiesObject

Optional. Falls ungegeben und != undefined, ein Objekt dessen zählbare eigene Eigenschaften (d.h.: Eigenschaften, die für das Objekt selbst definiert wurden und nicht in der prototype chain) als neue Eigenschaften an das neu erstellte Objekt angehängt werden.  Die Eigenschaften entsprechen dem zweiten Parameter von Object.defineProperties().

Throws

Throws a TypeError exception if the proto parameter isn't null or an object.

Beispiele

Beispiel: Klassenbasierte Vererbung mit Object.create()

Im folgenden sehen Sie ein Beispiel wie man Object.create() verwenden kann, um klassenbasierte Vererbung zu realisieren. JavaScript unterstützt nur einzelne Vererbung.

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

Wenn Sie von mehreren Objekten erben wollen, können mixins verwendet werden.

function MyClass() {
  SuperClass.call(this);
  OtherSuperClass.call(this);
}

MyClass.prototype = Object.create(SuperClass.prototype); // inherit
mixin(MyClass.prototype, OtherSuperClass.prototype); // mixin

MyClass.prototype.myMethod = function() {
  // do a thing
};

Die mixin Funktion kopiert die Funktionen des superclass Prototypen in den subclass Prototyp. Die mixin Funktion muss vom Benutzer bereitgestellt werden. Ein Beispiel für eine mixin-ähnliche Funktion ist jQuery.extend().

Beispiel: Benutzung des propertiesObject Parameters von Object.create()

var o;

// create an object with null as prototype
o = Object.create(null);


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


// Example where we create an object with a couple of sample properties.
// (Note that the second parameter maps keys to *property descriptors*.)
o = Object.create(Object.prototype, {
  // foo is a regular 'value property'
  foo: { writable: true, configurable: true, value: 'hello' },
  // bar is a getter-and-setter (accessor) property
  bar: {
    configurable: false,
    get: function() { return 10; },
    set: function(value) { console.log('Setting `o.bar` to', value); }
/* with ES5 Accessors our code can look like this
    get function() { return 10; },
    set function(value) { console.log('setting `o.bar` to', value); } */
  }
});


function Constructor() {}
o = new Constructor();
// is equivalent to:
o = Object.create(Constructor.prototype);
// Of course, if there is actual initialization code in the
// Constructor function, the Object.create() cannot reflect it


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

// by default properties ARE NOT writable, enumerable or configurable:
o.p = 24;
o.p;
// 42

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

delete o.p;
// false

// to specify an ES3 property
o2 = Object.create({}, {
  p: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
});

Polyfill

This polyfill covers the main use case which is creating a new object for which the prototype has been chosen but doesn't take the second argument into account.

if (typeof Object.create != 'function') {
  Object.create = (function() {
    var Temp = function() {};
    return function (prototype) {
      if (arguments.length > 1) {
        throw Error('Second argument not supported');
      }
      if (typeof prototype != 'object') {
        throw TypeError('Argument must be an object');
      }
      Temp.prototype = prototype;
      var result = new Temp();
      Temp.prototype = null;
      return result;
    };
  })();
}

Spezifikationen

Browser Kompatibilität

Basierend auf Kangax's compat table.

Zusätzliches Material

• Object.defineProperty()
• Object.defineProperties()
• Object.prototype.isPrototypeOf()
• John Resig's post on getPrototypeOf()