Verwendung von "Object.create" anstelle von "new"

Question

Javascript 1.9.3 / ECMAScript 5 wird eingeführt Object.create die unter anderem von Douglas Crockford durchgeführt wurde. Befürwortung für eine lange Zeit. Wie kann ich ersetzen new im folgenden Code mit Object.create ?

var UserA = function(nameParam) {
    this.id = MY_GLOBAL.nextId();
    this.name = nameParam;
}
UserA.prototype.sayHello = function() {
    console.log('Hello '+ this.name);
}
var bob = new UserA('bob');
bob.sayHello();

(Angenommen MY_GLOBAL.nextId existiert).

Das Beste, was mir einfällt, ist:

var userB = {
    init: function(nameParam) {
        this.id = MY_GLOBAL.nextId();
        this.name = nameParam;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};
var bob = Object.create(userB);
bob.init('Bob');
bob.sayHello();

Es scheint keinen Vorteil zu geben, also denke ich, dass ich es nicht verstehe. Wahrscheinlich bin ich zu neoklassisch. Wie sollte ich Object.create um den Benutzer 'bob' zu erstellen?

Answer 1

Eine weitere mögliche Verwendung von Object.create ist das Klonen unveränderlicher Objekte in einer kostengünstige und effektive Methode .

var anObj = {
    a: "test",
    b: "jest"
};

var bObj = Object.create(anObj);

bObj.b = "gone"; // replace an existing (by masking prototype)
bObj.c = "brand"; // add a new to demonstrate it is actually a new obj

// now bObj is {a: test, b: gone, c: brand}

Anmerkungen : Das obige Snippet erzeugt einen Klon eines Quellobjekts (also keine Referenz, wie in cObj = aObj). Er bietet Vorteile gegenüber der copy-properties-Methode (siehe 1 ), da es die Eigenschaften der Objektmitglieder nicht kopiert. Vielmehr wird ein weiteres Zielobjekt mit dem Prototyp des Quellobjekts erstellt. Wenn die Eigenschaften des Zielobjekts geändert werden, werden sie "on the fly" erstellt, wobei die Eigenschaften des Prototyps (des Quellobjekts) überdeckt werden, was eine schnelle und effektive Methode zum Klonen unveränderlicher Objekte darstellt.

Der Vorbehalt ist, dass dies für Quellobjekte gilt, die nach der Erstellung nicht mehr verändert werden dürfen (unveränderlich). Wenn das Quellobjekt nach der Erstellung geändert wird, werden alle unmaskierten Eigenschaften des Klons ebenfalls geändert.

Hier fummeln( http://jsfiddle.net/y5b5q/1/ ) (benötigt Object.create fähigen Browser).

Answer 2

Ich denke, der wichtigste Punkt in der Frage - ist der Unterschied zwischen new y Object.create Ansätze. Entsprechend diese Antwort und an dieses Video new Das Schlüsselwort bewirkt die nächsten Dinge:

1. Erzeugt ein neues Objekt.

2. Verknüpft neues Objekt mit Konstruktorfunktion ( prototype ).

3. Macht this Variable auf das neue Objekt zeigen.

4. Führt die Konstruktorfunktion unter Verwendung des neuen Objekts und der impliziten Durchführung aus return this ;

5. Weist den Namen der Konstruktorfunktion der Eigenschaft des neuen Objekts zu constructor .

Object.create Führt nur 1st y 2nd Schritte!!!

Im fraglichen Code-Beispiel ist das keine große Sache, aber im nächsten Beispiel schon:

var onlineUsers = [];
function SiteMember(name) {
    this.name = name;
    onlineUsers.push(name);
}
SiteMember.prototype.getName = function() {
    return this.name;
}
function Guest(name) {
    SiteMember.call(this, name);
}
Guest.prototype = new SiteMember();

var g = new Guest('James');
console.log(onlineUsers);

Als Nebenwirkung wird das Ergebnis sein:

[ undefined, 'James' ]

wegen Guest.prototype = new SiteMember();
Aber wir brauchen die Methode des übergeordneten Konstruktors nicht auszuführen, wir müssen nur die Methode getName in Guest verfügbar sein. Daher müssen wir verwenden Object.create .
Wenn ersetzen Guest.prototype = new SiteMember();
zu Guest.prototype = Object.create(SiteMember.prototype); Ergebnis sein:

[ 'James' ]

Answer 3

Manchmal können Sie ein Objekt nicht mit NEW erstellen, aber dennoch die Methode CREATE aufrufen.

Ein Beispiel: Wenn Sie ein benutzerdefiniertes Element definieren wollen, muss es von HTMLElement abgeleitet sein.

proto = new HTMLElement  //fail :(
proto = Object.create( HTMLElement.prototype )  //OK :)
document.registerElement( "custom-element", { prototype: proto } )

Answer 4

Der Vorteil ist, dass Object.create ist in der Regel langsamer als new auf den meisten Browsern

In diesem jsperf-Beispiel in einem Chromium-Browser new es 30 Mal so schnell como Object.create(obj) obwohl beide ziemlich schnell sind. Das ist alles ziemlich seltsam, weil new mehr tut (wie das Aufrufen eines Konstruktors), während Object.create einfach ein neues Objekt mit dem übergebenen Objekt als Prototyp erstellen sollte (geheimer Link in Crockford-Sprache)

Vielleicht sind die Browser noch nicht so weit, dass sie Object.create effizienter (vielleicht stützen sie sich dabei auf new unter der Haube ... sogar in nativem Code)

Answer 5

Zusammenfassung:

• Object.create() ist eine Javascript-Funktion, die 2 Argumente annimmt und ein neues Objekt zurückgibt.
• Das erste Argument ist ein Objekt, das der Prototyp des neu erstellten Objekts sein wird
• Das zweite Argument ist ein Objekt, das die Eigenschaften des neu erstellten Objekts enthält

Beispiel:

const proto = {
  talk : () => console.log('hi')
}

const props = {
  age: {
    writable: true,
    configurable: true,
    value: 26
  }
}

let Person = Object.create(proto, props)

console.log(Person.age);
Person.talk();

Praktische Anwendungen:

1. Der Hauptvorteil der Erstellung eines Objekts auf diese Weise ist, dass der Prototyp kann explizit definiert werden . Bei Verwendung eines Objektliterales oder der new Schlüsselwort haben Sie keine Kontrolle darüber (Sie können sie aber natürlich überschreiben).
2. Wenn wir einen Prototyp haben wollen Die new Schlüsselwort ruft eine Konstruktorfunktion auf. Mit Object.create() Es gibt keine Notwendigkeit, eine Konstruktorfunktion aufzurufen oder gar zu deklarieren .
3. Es kann im Grunde ein hilfreiches Werkzeug sein, wenn Sie Objekte auf sehr dynamische Weise erstellen wollen. Wir können eine Objektfabrikfunktion erstellen, die je nach den empfangenen Argumenten Objekte mit unterschiedlichen Prototypen erzeugt.