einführen
Die in diesem Artikel eingeführten vier Code -Wiederverwendung sind Best Practices und werden allen während des Programmiervorgangs empfohlen.
Muster 1: Prototyp -Vererbung
Der Prototyp der Vererbung besteht darin, das übergeordnete Objekt der Prototyp des untergeordneten Objekts zu lassen, um den Zweck der Vererbung zu erreichen:
Die Codekopie lautet wie folgt:
Funktionsobjekt (o) {
Funktion f () {
}
F.Prototyp = o;
Neue f () zurückgeben;
}
// übergeordnetes Objekt zu erben
var parent = {
Name: "Papa"
};
// neues Objekt
var child = Objekt (Eltern);
// prüfen
console.log (child.name); // "Papa"
// Elternkonstruktor
Funktion person () {
// eine "eigene" Eigenschaft
this.name = "adam";
}
// Fügen Sie dem Prototyp neue Attribute hinzu
Person.Prototype.getName = function () {
kehre diesen namennamen zurück;
};
// Erstellen Sie eine neue Person
var papa = new Person ();
// Nachlass
var kid = object (papa);
console.log (kid.getName ()); // "Adam"
// Elternkonstruktor
Funktion person () {
// eine "eigene" Eigenschaft
this.name = "adam";
}
// Fügen Sie dem Prototyp neue Attribute hinzu
Person.Prototype.getName = function () {
kehre diesen namennamen zurück;
};
// Nachlass
var kid = Object (Person.Prototyp);
console.log (typeof kid.getName); // "Funktion", weil sie im Prototyp definiert ist
console.log (typeof kid.name); // "undefiniert", weil nur der Prototyp vererbt wird
Gleichzeitig bietet ECMAScript5 auch eine ähnliche Methode, die als Objekt bezeichnet wird. Ernen Sie zum Erben von Objekten, und die Verwendung ist wie folgt:
Die Codekopie lautet wie folgt:
/* Verwenden Sie die neue Version von ECMascript 5, um Funktionen bereitzustellen*/
var child = Object.create (Eltern);
var child = Object.create (Elternteil, {
Alter: {Wert: 2} // ecma5 Deskriptor
});
console.log (Child.hasownProperty ("Alter")); // WAHR
Darüber hinaus können Eigenschaften auch auf dem zweiten Parameter feinkörniger definiert werden:
Die Codekopie lautet wie folgt:
// Definieren Sie zuerst einen neuen Objektmann
var Man = Object.create (null);
// Erstellen Sie als nächstes eine Konfigurationseinstellung, die Eigenschaften enthält
// Die Eigenschaften sind auf beschreibbar, aufzählbar und konfigurierbar eingestellt
var config = {
Beschreibbar: wahr,
Aufzählbar: wahr,
Konfigurierbar: True
};
// Verwenden Sie in der Regel Object.defineProperty (), um neue Eigenschaften hinzuzufügen (ECMAScript5 -Unterstützung).
// Jetzt passen wir zur Einfachheit an eine Kapselungsfunktion an
var defineProp = Funktion (obj, Schlüssel, Wert) {
config.Value = value;
Object.DefineProperty (OBJ, Schlüssel, Konfiguration);
}
DefineProp (Mann, "Car", "DeLorean");
DefineProp (Mann, 'dob', '1981');
DefineProp (Mann, Bart, falsch);
Die Vererbung kann also durchgeführt werden:
Die Codekopie lautet wie folgt:
var driver = Object.create (Mann);
DefineProp (Treiber, "Topspeed", "100 MPH");
Driver.topspeed // 100mph
Es gibt jedoch eine Sache zu beachten, das heißt, der Prototyp des von Object erstellten Objekts.Create (NULL) ist nicht definiert, dh keine Methoden für Tostring und Wert von Methoden, sodass ein Fehler auftritt, wenn es aufmerksam ist (Mann);, aber alarm (Mann); ist in Ordnung.
Modus 2: Kopieren Sie alle Attribute für die Vererbung
Auf diese Weise kann die Erbschaft alle Eigenschaften im übergeordneten Objekt in das untergeordnete Objekt kopieren. Im Allgemeinen kann das untergeordnete Objekt die Daten des übergeordneten Objekts verwenden.
Schauen wir uns zuerst ein flaches Kopiebeispiel an:
Die Codekopie lautet wie folgt:
/* Flache Kopie*//
Funktion erweitert (Elternteil, Kind) {
var i;
Kind = Kind || {};
für (i in Eltern) {
if (parent.hasownProperty (i)) {
Kind [i] = Eltern [i];
}
}
Kind zurückkehren;
}
var dad = {name: "adam"};
var kid = erweitert (dad);
console.log (kid.name); // "Adam"
var dad = {
Zählungen: [1, 2, 3],
liest: {papier: true}
};
var kid = erweitert (dad);
Kid.Counts.push (4);
console.log (dad.counts.tostring ()); // "1,2,3,4"
console.log (dad.reads === kid.reads); // WAHR
In der letzten Zeile des Codes können Sie feststellen, dass die Lesevorgänge von Papa und Kind gleich sind, dh sie verwenden dieselbe Referenz, was das Problem ist, das durch flache Kopie verursacht wird.
Schauen wir uns die tiefe Kopie an:
Die Codekopie lautet wie folgt:
/* Deep Copy*/
Funktion ExtendDeep (Eltern, Kind) {
var i,
tostr = Object.Prototype.toString,
ast = "[Objektarray]";
Kind = Kind || {};
für (i in Eltern) {
if (parent.hasownProperty (i)) {
if (typeof übergeordnet [i] === 'Objekt') {
Kind [i] = (tostr.call (übergeordnet [i]) === ast)? []: {};
ExtendDeep (Elternteil [i], Kind [i]);
} anders {
Kind [i] = Eltern [i];
}
}
}
Kind zurückkehren;
}
var dad = {
Zählungen: [1, 2, 3],
liest: {papier: true}
};
var kid = extenddeep (dad);
Kid.Counts.push (4);
console.log (kid.Counts.toString ()); // "1,2,3,4"
console.log (dad.counts.tostring ()); // "1,2,3"
console.log (dad.reads === kid.reads); // FALSCH
kid.reads.Paper = false;
Nach dem tiefen Kopieren sind die beiden Werte nicht mehr gleich, Bingo!
Modus 3: Mischen
Gemischt wird ein oder mehrere (oder alle) Eigenschaften (oder Methoden) eines Objekts zu einem anderen Objekt kopiert. Lassen Sie uns ein Beispiel geben:
Die Codekopie lautet wie folgt:
Funktion mix () {
var arg, prop, child = {};
für (arg = 0; arg <argumente.length; arg += 1) {
für (Prop in Argumenten [arg]) {
if (argumente [arg] .hasownProperty (prop)) {
Kind [prop] = argumente [arg] [prop];
}
}
}
Kind zurückkehren;
}
var kuchen = mischen (
{Eier: 2, groß: true},
{Butter: 1, gesalzen: true},
{Mehl: '3 Tassen'},
{Zucker: 'Sicher!' }
);
console.dir (kuchen);
Die Mix -Funktion kopiert die untergeordneten Attribute aller Parameter, die in das untergeordnete Objekt übergeben wurden, um ein neues Objekt zu generieren.
Wie wollen wir also nur einige Attribute mischen? Wie macht ich das? Tatsächlich können wir zusätzliche Parameter verwenden, um die Eigenschaften zu definieren, die gemischt werden müssen, z. B. Mix (Child, Elternteil, Methode1, Methode2), damit wir Methode1 und Methode 2 im Elternteil in ein Kind mischen können. Auf Code:
Die Codekopie lautet wie folgt:
// Auto
var Car = Funktion (Einstellungen) {
this.model = Settings.model || 'kein Modell bereitgestellt';
this.colour = Settings.Colour || "Keine Farbe bereitgestellt";
};
// Mixin
var mixin = function () {};
Mixin.prototype = {
Driveforward: function () {
console.log ('vorwärts fahren');
},
DriveBackward: function () {
console.log ('rückwärts fahren');
}
};
// Die beiden definierten Parameter sind das Objekt, das in (Wiederholung) und das Objekt gemischt wird (Geben), eingemischt wird.
Funktionsergeuchung (empfangene OBJ, GIBLEOBJ) {
// Wenn der angegebene Methodenname angegeben ist, gibt es 3 zusätzliche Parameter
if (Argumente [2]) {
für (var i = 2, len = argumente.length; i <len; i ++) {
EmpfangsObj.Prototyp [Argumente [i]] = gibObj.prototype [Argumente [i]];
}
}
// Wenn Sie nicht den dritten Parameter oder mehr Parameter angeben, werden alle Methoden gemischt
anders {
für (var methodName in givingObj.prototype) {
// Überprüfen Sie, ob das Empfangsobjekt den zu gemischten Namen nicht enthält. Wenn es also enthalten ist, wird es nicht gemischt
if (! recivingObj.prototype [methodName]) {
receivingObj.prototype [methodName] = ciplesObj.prototype [methodName];
}
}
}
}
// Die Attribute für das Auto mischen, aber die Werte werden mit "Driveforward" und "DriveBackward"*/ gemischt
Augment (Auto, Mixin, "Driveforward", "DriveBackward");
// Erstellen Sie ein neues Objektauto
var vehicle = New Car ({Modell: 'Ford Escort', Farbe: 'Blue'});
// Methode zum Testen, ob das Mischen erfolgreich erhalten wird
vehikel.Driveforward ();
Vehicle.DriveBackward ();
Diese Methode ist flexibler zu verwenden.
Muster 4: Kreditmethode
Ein Objekt leiht sich ein oder zwei Methoden eines anderen Objekts aus, und es gibt keine direkte Verbindung zwischen diesen beiden Objekten. Sie müssen nicht mehr erklären. Verwenden Sie einfach den Code, um zu erklären:
Die Codekopie lautet wie folgt:
var One = {
Name: 'Objekt',
Sagen Sie: Funktion (Greet) {
return greet + ',' + this.name;
}
};
// prüfen
console.log (ein.say ('hi')); // "Hallo, Objekt"
var zwei = {
Name: 'ein anderes Objekt'
};
console.log (ein.say.apply (zwei, ['Hallo']); // "Hallo, ein anderes Objekt"
// Say Say einer Variablen zuweisen. Dies zeigt auf die globale Variable
var sagt = eins.say;
console.log (Say ('Hoho')); // "Hoho, undefiniert"
// eine Rückruf -Funktion übergeben
var steinothere = {
Name: 'Ein weiteres Objekt',
Methode: Funktion (Rückruf) {
Rückruf zurückgeben ('Hola');
}
};
console.log (steroanother.method (eins.say)); // "Holla, undefiniert"
Funktion Bind (o, m) {
return function () {
return M.Apply (o, [] .Slice.call (Argumente));
};
}
var twosay = bind (zwei, eins.say);
console.log (twosay ('yo')); // "yo, ein anderes Objekt"
// ecmascript 5 fügt eine Bind () -Methode zur Funktion hinzu.
if (typeof function.prototype.bind === 'undefined') {
Function.prototype.bind = function (thisArg) {
var fn = this,,
Slice = Array.Prototype.slice,
args = Slice.call (Argumente, 1);
return function () {
return fn.apply (thisArg, args.concat (Slice.call (Argumente)));
};
};
}
var twosay2 = eins.say.bind (zwei);
console.log (twosay2 ('bonjour')); // "Bonjour, ein weiteres Objekt"
var twosay3 = One.say.bind (zwei, 'Enchanté');
console.log (twosay3 ()); // "Enchanté, ein weiteres Objekt"
Zusammenfassen
Keine Notwendigkeit zusammenzufassen.