So verstehen Sie die Javascript-Prototypkette

Die Prototypkette ist eigentlich eine begrenzte Kette zwischen begrenzten Instanzobjekten und Prototypen, die zur Implementierung gemeinsamer Eigenschaften und Vererbung verwendet wird. Es gibt zwei Hauptprobleme: 1. Es ist unpraktisch, Parameter an den übergeordneten Typ zu übergeben. 2. Der Referenztyp im übergeordneten Typ wird von allen Instanzen gemeinsam genutzt.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Was genau macht der neue Operator? Es ist eigentlich ganz einfach, er macht drei Dinge.

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

In der ersten Zeile erstellen wir ein leeres Objekt obj

In der zweiten Zeile zeigen wir das __proto__-Mitglied dieses leeren Objekts auf das Prototyp-Mitgliedsobjekt des Basisfunktionsobjekts

In der dritten Zeile zeigen wir auf die Basisfunktion Das __proto__-Mitglied des Objekts ersetzt den this-Zeiger durch obj und ruft dann die Basisfunktion auf. Daher weisen wir dem obj-Objekt den Wert „base“ zu.

Bevor wir über die Prototypenkette sprechen, müssen wir zunächst die Beziehung zwischen benutzerdefinierten Funktionen und Funktionen verstehen und welche untrennbaren Beziehungen zwischen Konstruktoren, Prototypen und Instanzen bestehen? Tatsächlich sind alle Funktionen Instanzen von Function. Es gibt ein Prototypattribut „prototyp“ auf dem Konstruktor, das auch ein Objekt ist; dann gibt es ein Konstruktorattribut auf dem Prototypobjekt, das auf den Konstruktor zeigt, und es gibt ein _proto_-Attribut auf dem Instanzobjekt, das auch auf den Prototyp zeigt; . Objekt, und diese Eigenschaft ist keine Standardeigenschaft und kann nicht in der Programmierung verwendet werden. Diese Eigenschaft wird intern vom Browser verwendet.

// _proto_
在函数里有一个属性prototype
由该函数创建的对象默认会连接到该属性上
    //prototype 与 _proto_ 的关系
_proto_是站在对象角度来说的
prototype 是站在构造函数角度来说的

Als nächstes schauen wir uns die Bilder zum Sprechen an.

1. Die Beziehung zwischen Konstruktoren, Prototypen und Instanzen

①+Objekt

　 ②+Funktion+Objekt+Array

Nachdem wir dies verstanden haben, diskutieren wir, was eine Prototypenkette ist. Um es ganz klar auszudrücken: Es handelt sich tatsächlich um eine begrenzte Kette zwischen begrenzten Instanzobjekten und Prototypen, die zur Implementierung gemeinsamer Eigenschaften und Vererbung verwendet wird. Schauen wir uns als Nächstes den Code an.

 var obj = new Object();
对象是有原型对象的
原型对象也有原型对象
   obj._proto_._proto_._proto_
原型对象也有原型对象，对象的原型对象一直往上找，会找到一个null
// 原型链示例
   var arr = [];
   arr -> Array.prototype ->Object.prototype -> null
   var o = new Object();
   o -> Object.prototype -> null;

function Foo1(){
   this.name1 = '1';
}
function Foo2(){
   this.name2 = '2';
}
Foo2.prototype = new Foo1();
function Foo3(){
   this.name = '3';
}
Foo3.prototype = new Foo2();
var foo3 = new Foo3();
console.dir(foo3);

　Der nächste Schritt ist die Erbschaftsfrage.

2. Vererbung

　1) Prototypische Vererbung

function Animal(name){
       this.name = name;
   }
   function Tiger(color){
       this.color = color;
   }
//   var tiger = new Tiger('yellow');
//   console.log(tiger.color);
//   console.log(tiger.name);  //undefined
//      Tiger.prototype = new Animal('老虎');   //一种方式
   Object.prototype.name = '大老虎';   //第二种方式
        var tiger = new Tiger('yellow');
        console.log(tiger.color);
        console.log(tiger.name);

Es ​​ist erwähnenswert, dass es hier zwei Hauptprobleme gibt: ① Es ist unpraktisch, Parameter an den übergeordneten Typ zu übergeben. ② Der Referenztyp im übergeordneten Typ wird von allen verwendet Instanzen Teilen

2) ES5 stellt die Methode Object.create() zur Implementierung der Vererbung bereit

————做兼容
  //shim垫片
    function create(obj){
        if(Object.create){
            return Object.create(obj);
        }else{
            function Foo(){}
            Foo.prototype = obj;
            return new Foo();
        }
    }

Diese Methode ist eine neue Funktion von ES5, bei der es sich eigentlich um eine Kopiervererbung handelt.

3) Kopiervererbung

var obj = {};
obj.extend = function(obj){
    for(var k in obj){
      this[k] = obj[k];
    }
}

4) Vererbung geliehener Konstruktoren

– die Prototyp-Mitglieder im geliehenen Konstruktor werden nicht geliehen

function Animal(name){
    this.name = name;
}
function Mouse(nickname){
    Animal.call(this,'老鼠');
    this.nickname = nickname;
}
var m = new Mouse('杰瑞');
console.log(m.name);
console.log(m.nickname);

Vorhandene Probleme: Das Parameterübergabeproblem bei der prototypischen Vererbung kann gelöst werden, aber Mitglieder (Eigenschaften und Methoden ) auf dem Prototypobjekt im übergeordneten Typ kann nicht vererbt werden

5) Kombinierte Vererbung

– Prototypobjekte sind dynamisch

function Person(name){
   this.name = name;
}
Person.prototype.showName = function(){
   console.log(this.name);
}
function Student(name,age){
   Person.call(this,name);
   this.age = age;
}
Student.prototype = new Person();
Student.prototype.contructor = Student;
Student.prototype.showAge = function(){
    console.log(this.age);
}
var stu = new Student('张三',12);
stu.showName();
stu.showAge();

[Prototypische Vererbung + geliehene Konstruktorvererbung] Seine Eigenschaften Das bedeutet, dass jede Instanz der Attribute eine Kopie hat , und die Methoden werden geteilt

[Zusammenfassung] Um ein sehr grobes Wort zu verwenden: Die sogenannte Prototypenkette ist eine Möglichkeit, nach einer Mutter zu suchen, was so verstanden werden kann, dass eine Person aus einer menschlichen Mutter und einem Monster geboren wird ist aus einem Monster geboren. Es gibt eigentlich nur einen Kern der Prototypenkette: gemeinsame Nutzung von Attributen und unabhängige Kontrolle. Wenn Ihre Objektinstanz unabhängige Attribute erfordert, besteht die Essenz aller Methoden darin, Attribute in der Objektinstanz zu erstellen. Wenn Sie nicht zu viel nachdenken, können Sie die unabhängigen Attribute, die Sie benötigen, direkt in Person definieren, um die Prototypattribute zu überschreiben. Kurz gesagt, wenn Sie die Prototypenvererbung verwenden, müssen Sie den Attributen im Prototyp besondere Aufmerksamkeit schenken, da sie sich alle auf den gesamten Körper auswirken. Die derzeit am häufigsten verwendete Methode ist der kombinierte Modus. 1. Prototyp-Kette zum Konstruktor, zu dem das Prototypobjekt gehört

③Instanzobjekte haben ein _proto_-Attribut, das auch auf das Prototypobjekt des Konstruktors verweist. Es ist ein nicht standardmäßiges Attribut und kann nicht für die Programmierung verwendet werden Browser selbst

2) Die Beziehung zwischen Prototyp und _Proto_

①prototype ist ein Attribut des Konstruktors

②_proto_ ist ein Attribut des Instanzobjekts

向 -Beide zeigen auf dasselbe Objekt

[Zusammenfassung] i) Funktion ist auch ein Objekt, das Objekt ist nicht unbedingt die Funktion

II) Objekte des Objekts: ungeordnetes Schlüsselwertpaar; Werte darin Es kann ein Wert eines beliebigen Datentyps sein

      iii) Das Objekt ist ein Container, und dieser Container enthält (Eigenschaften und Methoden)

3) Attributsuche

  ① Beim Zugriff auf ein Mitglied des Objekts, Es wird zuerst im Objekt gefunden. Finden Sie, ob

② vorhanden ist. Wenn es im aktuellen Objekt nicht vorhanden ist, suchen Sie

③ ③ Wenn es nicht im Prototypobjekt der Strukturfunktion gefunden wird, finden Sie es Prototyp des Prototypobjekts.

2. Funktion

– Alle Funktionen sind Instanzen von Funktion

①Lokale Objekte: Objekte unabhängig von der Hostumgebung (Browser) – einschließlich Objekt, Array, Datum, RegExp, Funktion, Fehler, Nummer, String, Boolean

②Eingebaute Objekte – einschließlich Mathe, Global (Fenster, globale Variablen in js), bei deren Verwendung ist kein neues

erforderlich ③Host-Objekte – einschließlich benutzerdefinierter Objekte, DOM, BOM

【Empfohlenes Lernen:

Javascript Fortgeschrittenes Tutorial】

Das obige ist der detaillierte Inhalt vonSo verstehen Sie die Javascript-Prototypkette. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!