JavaScript-Nicht-Konstruktor-Vererbung

1. Was ist die Vererbung von „Nicht-Konstrukteur“?
Zum Beispiel gibt es ein Objekt namens „Chinesisch“.

Der Code lautet wie folgt:

var Chinese = {
　　　nation:'中国'
　};

Es gibt auch ein Objekt namens „Doctor“.

Der Code lautet wie folgt:

var Doctor ={
　　　　career:'医生'
　　}

Wie kann ich „Arzt“ „Chinesisch“ erben lassen, d. h. wie kann ich einen „Chinesischen Arzt“ generieren? „ „Der Gegenstand von „?
Hier ist zu beachten, dass es sich bei diesen beiden Objekten um gewöhnliche Objekte und nicht um Konstruktoren handelt und die „Vererbung“ nicht mit der Konstruktormethode implementiert werden kann.

2. Object()-Methode

Douglas Crockford, der Erfinder des JSON-Formats, schlug eine object()-Funktion vor, die dies tun kann wenig.

Der Code lautet wie folgt:

function object(o) {
　　　function F() {}
　　　F.prototype = o;
　　　return new F();
　}

Diese Funktion object() macht eigentlich nur eine Sache, nämlich das Prototypattribut des untergeordneten Objekts darauf zu verweisen das übergeordnete Objekt, also das untergeordnete Objekt mit dem übergeordneten Objekt verbinden.
Bei der Verwendung besteht der erste Schritt darin, ein untergeordnetes Objekt basierend auf dem übergeordneten Objekt zu generieren:
　var Doctor = object(Chinesisch)>Fügen Sie dann die Attribute des untergeordneten Objekts selbst hinzu:
Doctor.career = 'Doctor';
Zu diesem Zeitpunkt hat das untergeordnete Objekt die Attribute des übergeordneten Objekts geerbt.
　alert(Doctor.nation); //China

3. Flache Kopie

Zusätzlich zur Verwendung der „Prototypenkette“ , Es gibt eine andere Denkweise: Durch Kopieren aller Eigenschaften des übergeordneten Objekts auf das untergeordnete Objekt kann auch eine Vererbung erreicht werden.

Die folgende Funktion kopiert:

Der Code lautet wie folgt:

function extendCopy(p) {
　　　var c = {};
　　　for (var i in p) {
　　　　　c[i] = p[i];
　　　}
　　　c.uber = p;
　　　return c;
　}

Wenn Sie ihn verwenden, schreiben Sie so:

Der Code lautet wie folgt:

var Doctor = extendCopy(Chinese);
　　Doctor.career = '医生';
　　alert(Doctor.nation); // 中国

Allerdings gibt es bei einer solchen Kopie ein Problem. Das heißt, wenn die Eigenschaften des übergeordneten Objekts denen eines Arrays oder eines anderen Objekts entsprechen, erhält das untergeordnete Objekt tatsächlich nur eine Speicheradresse und keine echte Kopie, sodass die Möglichkeit besteht, dass das übergeordnete Objekt dies getan hat manipuliert.

Bitte sehen Sie, fügen Sie jetzt dem Chinesischen ein „Geburtsort“-Attribut hinzu, dessen Wert ein Array ist.
Chinese.birthPlaces = ['Beijing','Shanghai','Hong Kong'];
Über die Funktion extensionCopy() erbt Doctor Chinesisch.
　var Doctor = extensionCopy(Chinese);
Dann fügen wir eine Stadt für Doctors „Geburtsort“ hinzu:
　Doctor.birthPlaces.push('Xiamen'); Auch der „Geburtsort“ der Chinesen wurde geändert!
Alert(Doctor.birthPlaces); //Peking, Shanghai, Hongkong, Xiamen
Alert(Chinese.birthPlaces); //Peking, Shanghai, Hongkong, Xiamen
extendCopy() kopiert nur Den Grundtyp der Daten nennen wir diese Kopie „flache Kopie“. Auf diese Weise wurde die Vererbung im frühen jQuery implementiert.

4. Deep Copy

Das sogenannte „Deep Copy“ ist die Fähigkeit, Arrays und Objekte im eigentlichen Sinne zu kopieren. Die Implementierung ist nicht schwierig. Rufen Sie einfach rekursiv „Shallow Copy“ auf.

Der Code lautet wie folgt:

Wenn Sie ihn verwenden, schreiben Sie ihn wie folgt:

function deepCopy(p, c) {
　　　　var c = c || {};
　　　　for (var i in p) {
　　　　　　if (typeof p[i] === 'object') {
　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　　　deepCopy(p[i], c[i]);
　　　　　　} else {
　　　　　　　　　c[i] = p[i];
　　　　　　}
　　　　}
　　　　return c;
　　}

var Doctor = deepCopy(Chinese); add Eine Eigenschaft, deren Wert ein Array ist. Ändern Sie dann dieses Attribut für das untergeordnete Objekt:

Der Code lautet wie folgt:

Zu diesem Zeitpunkt ist das übergeordnete Objekt nicht betroffen.

Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('厦门');

Der Code lautet wie folgt:

Derzeit verwendet die jQuery-Bibliothek diese Vererbungsmethode.

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港

【Empfohlene verwandte Tutorials】

1.

JavaScript-Video-Tutorial

2. JavaScript-Online-Handbuch
3. Bootstrap-Tutorial