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

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

伊谢尔伦
Libérer: 2017-07-25 16:04:39
original
1927 Les gens l'ont consulté

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();
Copier après la connexion

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);
};
Copier après la connexion

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();
Copier après la connexion

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"
Copier après la connexion

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
Copier après la connexion

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!

É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