Maison > interface Web > js tutoriel > Que sont les objets prototypes et les chaînes prototypes en js

Que sont les objets prototypes et les chaînes prototypes en js

巴扎黑
Libérer: 2017-07-18 17:04:17
original
1437 Les gens l'ont consulté

En Javascript, tout est objet, mais les objets sont également différents, et ils peuvent être grossièrement divisés en deux catégories, à savoir : Objet commun Objet et Objet fonction Fonction.

De manière générale, Les objets générés via new Function sont des objets fonction, et les autres objets sont des objets ordinaires.

Exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function f1(){
    //todo
}
var f2 = function(){
    //todo
};
var f3 = new Function('x','console.log(x)');
var o1 = {};
var o2 = new Object();
var o3 = new f1();
console.log(
    typeof f1,//function
    typeof f2,//function
    typeof f3,//function
    typeof o1,//object
    typeof o2,//object
     typeof o3 //object
);
>> function function function object object object

f1 est une déclaration de fonction , la manière la plus courante de définir une fonction, f2 est en fait une fonction anonyme. Cette fonction anonyme est attribuée à f2, qui est une expression de fonction peu courante, mais c'est aussi un objet fonction.

Function est un objet fourni avec JS. Lorsque f1 et f2 sont créés, JS construira automatiquement ces objets via new Function(). Par conséquent, ces trois objets sont tous créés via new Function().

Il existe deux manières de créer des objets en Javascript : les littéraux d'objet et l'utilisation de nouvelles expressions. La création de o1 et o2 correspond à ces deux méthodes. Concentrons-nous sur o3. Si vous utilisez les idées Java et C# Pour comprendre, o3 est un objet instance de f1, et o3 et f1 sont du même type, du moins je le pensais, mais ce n'est pas vrai...

Alors, comment le comprenez-vous ? voir si o3 passe une nouvelle fonction. Ce qui est généré ne l'est évidemment pas, puisque ce n'est pas un objet fonction, c'est un objet ordinaire.

Après une simple compréhension des objets fonction et des objets ordinaires, jetons un coup d'œil au prototype et à la chaîne de prototypes en Javascript :

En JS, chaque fois qu'un objet fonction f1 est créé, il y a certains attributs intégrés à l'objet, notamment prototype et __proto__ prototype est l'objet prototype, qui enregistre certains attributs et méthodes de f1.

Il est à noter que le prototype est invisible pour f1, c'est-à-dire que f1 ne cherchera pas les propriétés et méthodes dans le prototype.

1
1
2
3
function f(){}
f.prototype.foo = "abc";
console.log(f.foo); //undefined
2
3
fonction f(){}

f.prototype.foo = "abc";
console.log(f.foo); //undefined

1
2
3
4
function f(){}
f.prototype.foo = "abc";
var obj = new f();
console.log(obj.foo); //abc
Alors, à quoi sert un prototype ? En fait, la fonction principale du prototype est l’héritage. En termes simples, les propriétés et méthodes définies dans le prototype sont réservées à ses propres « descendants ». Par conséquent, les sous-classes peuvent accéder pleinement aux propriétés et méthodes du prototype. Pour savoir comment la f1 laisse le prototype aux "descendants", nous devons comprendre la chaîne de prototypes dans JS. À ce moment-là, __proto__ dans JS entre en scène. profond, donc vous ne le voyez souvent pas, mais il existe à la fois dans les objets ordinaires et dans les objets fonction. Sa fonction est de sauvegarder l'objet prototype de la classe parent. Lorsque JS crée un objet via la nouvelle expression, il s'agit généralement du prototype de. la classe parent sera affectée à l'attribut __proto__ du nouvel objet, formant ainsi un héritage générationnel...
1
2
3
4
fonction f(){}
f.prototype.foo = "abc";
var obj = nouveau f ();<div class="numéro de ligne4 index3 alt1"> <code class="csharp plain">console.log(obj.foo //); abc

Maintenant, nous savons que __proto__ dans obj enregistre le prototype de f, alors qu'est-ce qui est enregistré dans __proto__ dans le prototype de f :

Comme le montre la figure, Object.prototype est stocké dans __proto__ de f.prototype. Il y a également __proto__ dans l'objet Object.prototype. À partir du résultat de sortie, Object.__proto__ est nul, indiquant le. fin de la chaîne de prototypes de l'objet obj. Comme le montre la figure ci-dessous :

Une fois que l'objet obj a une telle chaîne de prototypes, lorsque obj.foo est exécuté, obj recherchera d'abord s'il a cet attribut, mais ne recherchera pas. propre prototype, lorsque foo ne peut pas être trouvé, obj recherchera le long de la chaîne de prototypes...

Dans l'exemple ci-dessus, nous avons défini l'attribut foo sur le prototype de f, puis obj recherchera cette propriété. être retrouvé sur la chaîne prototype et exécuté.

Enfin, résumez les points clés impliqués dans cet article en quelques phrases :

  • La formation de la chaîne de prototypes repose vraiment sur __proto__ plutôt que Prototype, lorsque le moteur JS exécute la méthode d'un objet, il vérifie d'abord si la méthode existe dans l'objet lui-même. Si elle n'existe pas, il recherchera sur la chaîne de prototypes, mais pas sur son propre prototype.

  • Le __proto__ d'un objet enregistre sa propre chaîne de prototypes et détermine son propre type de données. Changer __proto__ équivaut à changer le type de données de l'objet.

  • Le prototype d'une fonction n'appartient pas à sa propre chaîne de prototypes. Il est le cœur de la création de sous-classe, détermine le type de données de la sous-classe et constitue le pont reliant la chaîne de prototypes. de la sous-classe.

  • Le but de la définition de méthodes et de propriétés sur l'objet prototype doit être hérité et utilisé par les sous-classes.

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