Maison > Article > interface Web > 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 leTutoriel vidéo JavaScript !