Explication détaillée du prototype js et de la chaîne de prototypes

Cette fois, je vais vous apporter une explication détaillée du prototype et de la chaîne de prototypes de js. Quelles sont les précautions lors de l'utilisation du prototype et de la chaîne de prototypes de js. Ce qui suit est un cas pratique, prenons. un regard.

Chaque fonction que nous créons a un attribut prototype, qui est un pointeur pointant vers un objet prototype, et les propriétés et méthodes de cet objet prototype peuvent donc être partagées.

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
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

1. Comprendre les objets prototypes

Chaque fois qu'une nouvelle fonction est créée, elle sera créée sur la base d'un ensemble de règles spécifiques. crée un attribut prototype, qui pointe vers l'objet prototype de la fonction.

Par défaut, tous les objets prototypes obtiennent automatiquement un attribut constructeur (constructor), qui contient un pointeur vers la fonction où se trouve l'attribut prototype.

Lorsque le constructeur est appelé pour créer une nouvelle instance, l'instance contiendra un pointeur (propriété interne) pointant vers l'objet prototype du constructeur. ECMA-262 version 5 fait référence à ce pointeur comme [[Prototype]].

Bien qu'il n'existe aucun moyen standard d'accéder à [[Prototype]] dans les scripts, Firefox, Safari et Chrome prennent en charge une propriété proto sur chaque objet dans d'autres implémentations, cette propriété est complètement ; invisible pour les scripts.

Cependant, le point vraiment important à préciser est que cette connexion existe entre l'instance et l'objet prototype du constructeur, et non entre l'instance et le constructeur.

En prenant comme exemple le code précédent qui utilise le constructeur Person et Person.prototype pour créer une instance, la figure 6-1 montre la relation entre chaque objet.

Ici, Person.prototype pointe vers l'objet prototype et Person.prototype.constructor renvoie vers Person .

person1 et person2 contiennent tous deux une propriété interne qui pointe simplement vers Person.prototype ; en d'autres termes, ils n'ont aucune relation directe avec le constructeur.

Vous pouvez appeler person1.sayName(). Ceci est accompli grâce au processus de recherche des propriétés des objets. (Il recherchera d'abord l'instance, et s'il ne la trouve pas, il continuera à rechercher le prototype.)

alert(Person.prototype.isPrototypeOf(person1)); alert(Person.prototype.isPrototypeOf(person2));

2. Syntaxe du prototype plus simple

Dans l'exemple précédent, Person.prototype doit être saisi à chaque fois qu'une propriété et une méthode sont ajoutées. 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.

function Person(){
}
Person.prototype = {
　　name : "Nicholas",
　　age : 29,
　　job: "Software Engineer",
　　sayName : function () {
　　　　alert(this.name);
　　}
};

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é constructor ne pointe plus vers Person .

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 la propriété constructeur.

var friend = new Person();
alert(friend instanceof Object); //truealert(friend instanceof Person); //truealert(friend.constructor == Person); //falsealert(friend.constructor == Object); //true

Ici, l'utilisation de instanceof operator 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 la redéfinir spécifiquement sur la valeur appropriée comme ci-dessous.

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

3. Prototype d'objets natifs

Tous les types de référence natifs (Object, Array, String, etc.) sont définis sur le prototype de leur méthode constructeur .

Par exemple, la méthode sort() peut être trouvée dans Array.prototype et la méthode substring() peut être trouvée dans String.prototype. Bien que cela soit possible, il n’est pas recommandé de modifier le prototype d’un objet natif.

4. Problèmes avec les objets prototypes

Le plus gros problème avec le modèle prototype est causé par sa nature partagée. Modifier l’un d’eux affectera l’autre.

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

 五、原型链

其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。然后层层递进，就构成了实例与原型的链条，这就是所谓原型链的基本概念。

function SuperType(){
　　this.property = true;
}
SuperType.prototype.getSuperValue = function(){
　　return this.property;
};function SubType(){
　　this.subproperty = false;
}//继承了 SuperTypeSubType.prototype = new SuperType();SubType.prototype.getSubValue = function (){
　　return this.subproperty;
};var instance = new SubType();
alert(instance.getSuperValue()); //true

　一张图说明：

 property 则位于 SubType.prototype 中。这是因为 property 是一个实例属性，而 getSuperValue() 则是一个原型方法。既然 SubType.prototype 现在是 SuperType的实例，那么 property 当然就位于该实例中了。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JavaSript事件冒泡和事件捕获如何实现 

事件模型的详解

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!