Prototypen und Prototypketten in Javascript verstehen

In diesem Artikel werden der Prototyp und die Prototypenkette in JavaScript vorgestellt. Freunde in Not können sich darauf beziehen.

Prototyp

Wie wir alle wissen, enthält JavaScript nicht das traditionelle Klassenvererbungsmodell, sondern verwendet das Prototyp-Prototypmodell. Die Code-Implementierung sieht ungefähr so ​​aus:

function Student(name){
 this.name = name;
}
 
var Kimy = new Student("Kimy");
 
Student.prototype.say = function(){
 console.log(this.name + "say");
}

Kimy.say();
//Kimysay

Kimy selbst hat keine Say-Methode. Wenn er die Methode in seinem eigenen Objekt nicht finden kann, geht er zurück zu seinem Prototyp, um sie zu finden Student.prototype-Objekt. Hier verwenden wir einen Konstruktor Student

Konstruktor, __proto__ und Prototypkette

Außer IE sind andere Browser auf der Instanz des Objektobjekts , ein nicht standardmäßiges __proto__-Attribut (zwei Unterstriche davor und danach) wird bereitgestellt, das auf das Prototypobjekt des Objekts verweist, dh auf das Prototypattribut des Konstruktors.

Einen Code und ein Bild stehlen

// 构造方法
function Foo(y) {
 this.y = y;
}
 
Foo.prototype.x = 10;
 
// 继承方法"calculate"
Foo.prototype.calculate = function (z) {
 return this.x + this.y + z;
};
 
// 使用foo模式创建 "b" and "c"
var b = new Foo(20);
var c = new Foo(30);
 
// 调用继承的方法
b.calculate(30); // 60
c.calculate(40); // 80
 
 
console.log(
 
 b.__proto__ === Foo.prototype, // true
 c.__proto__ === Foo.prototype, // true
 
 b.constructor === Foo, // true
 c.constructor === Foo, // true
 Foo.prototype.constructor === Foo // true
 
 b.calculate === b.__proto__.calculate, // true
 b.__proto__.calculate === Foo.prototype.calculate // true
 
);

Wir können sehen, dass jedes Objekt ein __proto__-Attribut enthält, b __proto__ zeigt auf das Prototyp-Attribut von Foo ist die Konstruktormethode zum Erstellen von b; und Foo.prototype ist ebenfalls ein Objekt und verfügt auch über einen __proto__-Prototyp, der auf das Konstruktormethodenobjekt verweist, das es erstellt. Der __proto__ von Object.prototype zeigt auf null, was eine Prototypenkette bildet.

Sie müssen auch diesen Code hier verstehen:

Object instanceof Function
//true
Function instanceof Object
//true

Was macht Neu?

Hier gibt es auch ein kleines Problem: Es ist in js üblich. Es scheint keinen großen Unterschied in der Form von Funktionen und Konstruktoren zu geben (es ist nicht erforderlich, den ersten Buchstaben groß zu schreiben, aber der erste Buchstabe des Konstruktors wird normalerweise großgeschrieben). Was genau bewirkt das neue Schlüsselwort?

Zum Beispiel:

var Kimy = new Student();

new macht drei Dinge:

var Kimy = {}; 

Kimy.__proto__ = Student.prototype;

Student.call(Kimy);

1. Definiert ein leeres Objekt

2 🎜>

3. Initialisierungsobjekt

Auf diese Weise können Sie verstehen, warum Kimy.__proto__ auf Student.prototype verweist (dieselbe Referenz). Es stellt sich heraus, dass new eine Schlüsselrolle spielt!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er Ihnen allen gefällt. Weitere verwandte Tutorials finden Sie unter

JavaScript-Video-Tutorial.