Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript-Nicht-Konstruktor-Vererbung

PHPz
Freigeben: 2018-10-15 15:32:47
Original
1141 Leute haben es durchsucht

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

Der Code lautet wie folgt:

 var Chinese = { 
    nation:'中国' 
  };
Nach dem Login kopieren

Es gibt auch ein Objekt namens „Doctor“.

Der Code lautet wie folgt:

var Doctor ={ 
    career:'医生' 
  }
Nach dem Login kopieren

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(); 
  }
Nach dem Login kopieren

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; 
  }
Nach dem Login kopieren
Wenn Sie ihn verwenden, schreiben Sie so:


Der Code lautet wie folgt:


var Doctor = extendCopy(Chinese); 
  Doctor.career = '医生'; 
  alert(Doctor.nation); // 中国
Nach dem Login kopieren
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; 
  }
Nach dem Login kopieren
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('厦门');
Nach dem Login kopieren

Der Code lautet wie folgt:


Derzeit verwendet die jQuery-Bibliothek diese Vererbungsmethode.

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

【Empfohlene verwandte Tutorials】

1.

JavaScript-Video-Tutorial

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage