Comprendre les prototypes et les chaînes de prototypes en javascript

Cet article présente le prototype et la chaîne de prototypes en JavaScript. Les amis dans le besoin peuvent s'y référer.

Prototype

Comme nous le savons tous, JavaScript ne contient pas le modèle d'héritage de classe traditionnel, mais utilise le modèle prototype prototype. L'implémentation du code est à peu près comme ceci

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

Kimy.say();
//Kimysay

Kimy lui-même n'a pas de méthode à dire Lorsqu'il ne trouve pas la méthode dans son propre objet, il retourne à son prototype pour la trouver, qui est le. Objet Student.prototype. Ici nous utilisons un constructeur Student

constructeur, __proto__ et chaîne de prototypes

À l'exception d'IE, les autres navigateurs sont sur l'instance de l'objet Object , un attribut __proto__ non standard (deux traits de soulignement avant et après) est déployé, pointant vers l'objet prototype de l'objet, c'est-à-dire l'attribut prototype du constructeur.

Voler un morceau de code et une image

// 构造方法
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
 
);

On peut voir que chaque objet contient un attribut __proto__, b __proto__ pointe vers l'attribut prototype de Foo, la méthode constructeur de construction de b; et Foo.prototype est également un objet, et il possède également un prototype __proto__ qui pointe vers la méthode constructeur Object qui le construit. Le __proto__ d'Object.prototype est pointé vers null, ce qui forme une chaîne de prototypes.

Vous devez également comprendre ce morceau de code ici :

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

Que fait new

Il y a aussi un petit problème ici, c'est ordinaire en js. Il ne semble pas y avoir beaucoup de différence dans la forme des fonctions et des constructeurs (il n'est pas nécessaire de mettre en majuscule la première lettre, mais la première lettre du constructeur est généralement en majuscule). À quoi sert exactement le nouveau mot-clé ?

Par exemple :

var Kimy = new Student();

new fait trois choses :

var Kimy = {}; 

Kimy.__proto__ = Student.prototype;

Student.call(Kimy);

1 Définit un objet vide

2 Paramètres Son prototype <.>

3. Objet d'initialisation

De cette façon, vous pouvez comprendre pourquoi Kimy.__proto__ pointe vers Student.prototype (la même référence). Il s'avère que new joue un rôle clé !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que vous l'aimerez tous. Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo JavaScript !