Maison > interface Web > js tutoriel > Explication détaillée de la façon dont JavaScript utilise le modèle de prototype pour créer des instances d'objet

Explication détaillée de la façon dont JavaScript utilise le modèle de prototype pour créer des instances d'objet

ringa_lee
Libérer: 2017-10-15 09:34:43
original
1599 Les gens l'ont consulté

Mode Prototype


function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true
Copier après la connexion

Dans l'exemple, Person.prototype doit être saisi à chaque fois que vous ajoutez un attribut et une méthode. Afin de réduire les saisies inutiles et de mieux encapsuler visuellement les fonctionnalités du prototype, il est plus courant de remplacer l'intégralité de l'objet prototype par un littéral d'objet contenant toutes les propriétés et méthodes, comme le montre l'exemple suivant.


function Person(){
}
Person.prototype = {
 name : "Nicholas",
 age : 29,
 job: "Software Engineer",
 sayName : function () {
 alert(this.name);
 }
};
Copier après la connexion

Dans le code ci-dessus, nous définissons Person.prototype égal à un nouvel objet créé en tant que littéral d'objet. Le résultat final est le même, à une exception près : la propriété constructeur ne pointe plus vers une personne. Comme mentionné précédemment, chaque fois qu'une fonction est créée, son objet prototype sera créé en même temps, et cet objet obtiendra également automatiquement l'attribut constructeur. La syntaxe que nous utilisons ici réécrit essentiellement complètement l'objet prototype par défaut, de sorte que la propriété constructeur devient la propriété constructeur du nouvel objet (pointant vers le constructeur Object) et ne pointe plus vers la fonction Person. À l'heure actuelle, bien que l'opérateur instanceof puisse toujours renvoyer le résultat correct, le type de l'objet ne peut pas être déterminé via le constructeur, comme indiqué ci-dessous.


var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true
Copier après la connexion

Ici, l'utilisation de l'opérateur instanceof pour tester Object et Person renvoie toujours true, mais la propriété constructeur est égale à Object et non égale à Person. Si la valeur du constructeur est vraiment importante, vous pouvez intentionnellement la redéfinir sur la valeur appropriée, comme indiqué ci-dessous.


function Person(){
}
 Person.prototype = {
 constructor : Person,
 name : "Nicholas",
 age : 29,
 job: "Software Engineer",
 sayName : function () {
 alert(this.name);
 }
};
Copier après la connexion

Une chose à noter est que le pointeur dans l'instance pointe uniquement vers le prototype, pas vers le constructeur.

Problèmes avec les objets prototypes : Le modèle de prototype n'est pas sans défauts. Premièrement, il n'est pas nécessaire de transmettre les paramètres d'initialisation au constructeur, de sorte que toutes les instances obtiendront les mêmes valeurs de propriété par défaut. Même si cela causera certains inconvénients dans une certaine mesure, ce n'est pas le plus gros problème du prototype. Le plus gros problème du modèle prototype réside dans sa nature partagée.


function Person(){
}
Person.prototype = {
 constructor: Person,
 name : "Nicholas",
 age : 29,
 job : "Software Engineer",
 friends : ["Shelby", "Court"],
 sayName : function () {
 alert(this.name);
 }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true
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