Maison  >  Article  >  interface Web  >  Explication détaillée des propriétés du prototype de chaîne de prototypes JavaScript et des instances de méthode

Explication détaillée des propriétés du prototype de chaîne de prototypes JavaScript et des instances de méthode

伊谢尔伦
伊谢尔伦original
2017-07-25 16:04:391865parcourir

Toutes les propriétés et méthodes de l'objet prototype sont transmises à toutes les instances de cette classe. La chaîne de prototypes utilise cette fonction pour implémenter le mécanisme d'héritage. Si vous redéfinissez les classes dans les exemples précédents à l'aide de méthodes prototypes, elles deviendront les formes suivantes :

function ClassA() {
}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
    alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA();

La magie de la méthode prototype C'est à la dernière ligne de code. Ici, définissez la propriété prototype de ClassB sur une instance de ClassA. C'est intéressant car vous voulez toutes les propriétés et méthodes de ClassA, mais vous ne voulez pas les ajouter une par une à la propriété prototype de ClassB. Existe-t-il un meilleur moyen que d'attribuer une instance de ClassA à la propriété prototype ?

Remarque : Appelez le constructeur de ClassA sans lui passer de paramètres. Il s’agit d’une pratique courante dans les chaînes prototypes. Assurez-vous que le constructeur n'a aucun paramètre.

Semblable à l'usurpation d'identité d'objet, toutes les propriétés et méthodes de la sous-classe doivent apparaître après l'attribution de la propriété prototype, car toutes les méthodes attribuées avant celle-ci seront supprimées. Pourquoi? Étant donné que la propriété prototype est remplacée par le nouvel objet, l'objet d'origine auquel la nouvelle méthode a été ajoutée sera détruit. Ainsi, le code pour ajouter l'attribut name et la méthode sayName() à la classe ClassB est le suivant :

function ClassB() {
}
ClassB.prototype = new ClassA();
ClassB.prototype.name = "";
ClassB.prototype.sayName = function () {
    alert(this.name);
};

Vous pouvez tester ce code en exécutant l'exemple suivant :

var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objB.color = "red";
objB.name = "John";
objA.sayColor();
objB.sayColor();
objB.sayName();

De plus, dans le prototype Within the chain, l'opérateur instanceof fonctionne également de manière unique. instanceof renvoie true pour ClassA et ClassB pour toutes les instances de ClassB. Par exemple :

var objB = new ClassB();
alert(objB instanceof ClassA);    //输出 "true"
alert(objB instanceof ClassB);    //输出 "true"

Dans le monde faiblement typé d'ECMAScript, il s'agit d'un outil extrêmement utile, mais il ne peut pas être utilisé lors de l'usurpation d'identité d'objet. Cependant, puisque le prototype de la sous-classe est directement réaffecté, la situation suivante se produit :

console.log(objB.__proto__===objB.constructor.prototype)   //false

Parce que la propriété prototype de la chaîne de prototypes de ClassB a été remplacée par un objet d'une autre classe. Les résultats de sortie montrent que objB.__proto__ pointe toujours vers ClassB.prototype, et non vers objB.constructor.prototype. Ceci est également facile à comprendre. Ce qui est assigné à Person.prototype est une nouvelle instance de ClassA(). Le constructeur (constructeur) d'un objet défini à l'aide de la méthode littérale d'objet pointe vers le constructeur racine Object.prototype. L'objet vide {}, {} est naturellement différent de ClassB.prototype.

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!

Déclaration:
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