Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de l'utilisation et des inconvénients de la méthode d'héritage de chaîne de prototype JavaScript

伊谢尔伦
Libérer: 2017-07-20 15:28:50
original
3087 Les gens l'ont consulté

Méthode de chaîne de prototypes

function Person(){
     this.name = 'Simon';
}
Person.prototype.say = function(){
     alert('My name is '+this.name);
}
function F2E(id){
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
F2E.prototype = new Person();

var simon = new F2E(9527);
simon.say();
simon.showId();
alert(simon.hasOwnProperty('id')); //检查是否为自身属性
Copier après la connexion

Ensuite, suivez l'exemple ci-dessus pour comprendre le concept de chaîne de prototypes js suivant :

La chaîne de prototypes peut être comprise comme : each in js Chaque objet a un attribut __proto__ caché.L'attribut __proto__ d'un objet instancié pointe vers la méthode prototype de sa classe, et cette méthode prototype peut être assignée à un autre objet instancié.Le __proto__ de cet objet pointe vers la méthode prototype de. sa classe. Il doit pointer vers sa classe pour former une chaîne, c'est-à-dire que la phrase

F2E.prototype = new Person()
Copier après la connexion

dans le code précédent est la clé. Lorsqu'un objet js lit un certain attribut, il recherchera d'abord ses propres attributs. S'il n'y a pas d'attributs, il recherchera ensuite les attributs de l'objet sur la chaîne prototype. En d'autres termes, la méthode de la chaîne de prototypes peut être partagée, ce qui résout le problème de l'usurpation d'identité d'objet et du gaspillage de mémoire.

Parlons des inconvénients :
Les inconvénients sont évidents. L'héritage de chaîne de prototype signifie que les paramètres ne peuvent pas être transmis à la classe parent lors de l'instanciation d'une sous-classe, c'est pourquoi la fonction Person est. utilisé dans cet exemple () n'a pas de paramètres, mais est directement écrit sous la forme this.name="Simon". Le code suivant n'obtiendra pas les résultats escomptés :

function Person(name){
     this.name = name;
}
Person.prototype.say = function(){
     alert('My name is '+this.name);
}
function F2E(name,id){
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
F2E.prototype = new Person();

var simon = new F2E("Simon",9527);
simon.say();
simon.showId();

 
function Person(name){
     this.name = name;
}

Person.prototype.say = function(){
     alert('My name is '+this.name);
}

function F2E(name,id){
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}

F2E.prototype = new Person();  //此处无法进行传值,this.name或者name都不行,直接写F2E.prototype = new Person('wood')是可以的,但是这样的话simon.say()就变成了My name is wood

var simon = new F2E("Simon",9527);
simon.say();  //弹出 My name is undefined
simon.showId();
Copier après la connexion

Enfin, résumons la méthode d'implémentation de l'héritage que je pense être la meilleure. Les variables membres utilisent l'usurpation d'identité d'objet et les méthodes membres utilisent le chaînage de prototypes. suit :

function Person(name){
     this.name = name;
}
Person.prototype.say = function(){
     alert('My name is '+this.name);
}
function F2E(name,id){
     Person.call(this,name);
     this.id = id;
}
F2E.prototype = new Person(); 
//此处注意一个细节,showId不能写在F2E.prototype = new Person();前面
F2E.prototype.showId = function(){
     alert('Good morning,Sir,My work number is '+this.id);
}
var simon = new F2E("Simon",9527);
simon.say();
simon.showId();
Copier après la connexion


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal