Tutorial zur Verwendung von JSprototype-Objekten

Dieses Mal bringe ich Ihnen ein Tutorial zur Verwendung des JSprototype-Objekts. Was sind die Vorsichtsmaßnahmen bei der Verwendung des JSprototype-Objekts?

Wir haben das Problem der Methodenfreigabe zwischen mehreren Instanzen durch Prototypen gelöst. Als Nächstes werden wir die Besonderheiten des Prototyps und der Prototypenkette herausfinden.

function CreateObj(uName) {
   this.userName = uName;
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('卫庄');

1. Jede Funktion verfügt über ein Prototypattribut (Prototyp), das auf das Prototypobjekt (CreateObj.prototype) des -Konstruktors zeigt Bild oben. Die erste grüne Linie

2. Standardmäßig erhalten alle Prototypobjekte automatisch ein Konstruktorattribut, das oben erläutert wurde. Dieses Attribut enthält eine Funktion, die auf das Prototypattribut verweist, wie z. B. die zweite grüne Linie

in der obigen Abbildung.

3. Alle Instanzen (durch den Konstruktor erstellte neue Prototypobjekte [wie CreateObj.prototype, ich habe das Bild oben nicht gezeichnet] usw.) enthalten einen impliziten Prototyp (proto), der auf zeigt Prototypobjekt des Konstruktors der Instanz,

Wie in der dritten und vierten Zeile im Bild oben gezeigt, ist der Konstruktor von obj1 und das Prototypobjekt von CreateObj ist CreateObj.prototype. Dasselbe gilt für obj2, also:

obj1.proto === CreateObj.prototype //true

obj2.proto === CreateObj.prototype //true

4. Schreiben Sie im Konstruktor die -Attribute und Methoden , die diesem einen Wert zuweisen. Zeichnen Sie sie beispielsweise auf das Objekt, also in obj1 und obj2 Auf beiden Objekten gibt es ein Attribut userName

. 5. Auf das Prototypobjekt geschriebene Methoden oder Attribute sollten auf das Prototypobjekt gezeichnet werden, z. B.

CreateObj.prototype.showUserName = function(){
return this.userName;
}

Die Methode showUserName sollte im Bild über CreateObj.prototype gezeichnet werden

6. Wenn ein Objekt auf Eigenschaften und Methoden zugreift, werden seine Zugriffsregeln aufgerufen (Proximitätsprinzip). Die Regeln lauten wie folgt:

Wenn die Instanz Attribute oder Methoden enthält, verwenden Sie diese direkt,

Wenn für die Instanz keine Eigenschaften oder Methoden vorhanden sind, wird die Suche entlang des Prototypobjekts fortgesetzt, auf das der Protozeiger der Instanz zeigt. Wenn es nicht gefunden werden kann, ist der Wert undefiniert.

console.log( obj1.showUserName() ); //ghostwu
console.log( obj2.showUserName() ); //卫庄

Die showUserName-Methode ist auf obj1 und obj2 nicht vorhanden, daher folgen Sie dem Prototyp, um die showUserName-Methode

im Prototypobjekt CreateObj.prototype zu finden Wenn Sie showUserName für das Prototypobjekt CreateObj.prototype auskommentieren, melden obj1.showUserName und obj2.showUserName Fehler

// CreateObj.prototype.showUserName = function(){
// return this.userName;
// }

function CreateObj(uName) {
   this.userName = uName;
   this.showUserName = function(){
    return '100';
   }
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('卫庄');
  console.log( obj1.showUserName() ); //100
  console.log( obj2.showUserName() ); //100

Wenn Sie im Konstruktor eine showUserName-Methode hinzufügen, rufen obj1 und obj2 diese direkt auf, da diese beiden Methoden auf der Instanz im Bild gezeichnet werden, also:

console.log( obj1.showUserName === obj2.showUserName ); //false

Jetzt sollten Sie in der Lage sein, das Prinzip der gemeinsamen Nutzung von Attributen und Methoden mehrerer Instanzen zu verstehen, indem Sie sie auf das Prototypobjekt des Konstruktors schreiben

Was ist eine Prototypenkette?

Vorhin habe ich gesagt, dass alle Instanzen (einschließlich Prototyp-Objekte) ein implizites Prototyp-Proto haben. Auf wen zeigt das Prototyp-Objekt von CreateObj.prototype?

function CreateObj(uName) {
   this.userName = uName;
   this.showUserName = function () {
    return '100';
   }
  }
  CreateObj.prototype.showUserName = function () {
   return this.userName;
  }
  console.log( CreateObj.prototype.proto ); //指向Object.prototype
  console.log( CreateObj.prototype.proto === Object.prototype ); //true

CreateObj.prototype.proto zeigt auf Object.prototype, was wahr ist nach dem Testen durch den kongruenten

-Operator

(===) Object.prototype.proto zeigt auf NULL

Dies ist die Prototypenkette, die durch implizite Prototypen Schicht für Schicht aneinandergereiht ist. Aus dem obigen Bild können Sie ersehen, warum benutzerdefinierte Objekte toString-, valueOf- usw. Methoden aufrufen können, oder?

Weil alle Objekte von Object geerbt werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

react-router4.0 implementiert Umleitung und 404-Funktionen

js-Schritte zum Festlegen des Elementstils im Detail Erklärung

Zusammenfassung der Sortiermethode der JS-Implementierung

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung von JSprototype-Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!