Compréhension approfondie de la chaîne de prototypes en javascript_Basic

Pour comprendre la chaîne de prototypes, il faut d'abord comprendre le type de fonction. Il n'y a pas de concept de classes en JavaScript, ce sont toutes des fonctions, c'est donc un langage de programmation fonctionnel. Une caractéristique très importante d'une classe est qu'elle peut créer des objets basés sur elle en tant que modèle basé sur son constructeur. En JavaScript, les fonctions ont deux fonctions

Premièrement, comme appel général de fonction
Deuxièmement, comme constructeur de son objet prototype, qui est new()

Jetons un coup d'oeil Un exemple

Copier le code Le code est le suivant :

fonction a(){
ce . name = 'a';
}

Quand vous créez une fonction, qu'arrive-t-elle ?

Premièrement, il créera un objet fonction, qui est lui-même

Deuxièmement, il créera un objet prototype @a (représenté par @)

Troisièmement, la fonction l'objet aura un pointeur prototype, qui pointe vers l'objet prototype correspondant, ici il pointe vers @a

Quatrièmement, l'objet @a a un pointeur constructeur, pointant vers son constructeur, ici il pointe vers un 0/ gravitation/SouthEast

A quoi sert cet attribut prototype ?

En fait, l'attribut prototype indique la plage que la fonction actuelle peut contrôler (ou il indique à qui appartient la fonction actuelle. Ici, a est le constructeur de l'objet prototype @a, nous verrons donc cela). façon d'écrire

Copier le code Le code est le suivant :

fonction a( ){

this .name = 'a';
}

var a1 = new a();

Ceci est similaire à d'autres langues courantes , new consiste à appeler le prototype. Le constructeur dans l'objet (via le pointeur prototype) crée une nouvelle instance d'objet.

Ensuite, la modification des attributs de l'objet pointé par le prototype affectera toutes les instances créées en l'utilisant comme modèle. Nous pouvons le vérifier

. Copier le code Le code est le suivant :

function a(){

this.name = 'a'; 🎜 >var a1 = new a();
a.prototype.age = 1;
alert(a1.age);


Résultat : 1

Alors pourquoi l'objet a1 peut-il accéder directement à l'attribut age ? Je n'ai pas défini l'attribut age dans l'objet a1.

C'est parce que toutes les instances auront une référence _proto_ (accessible directement sous Firefox et Chrome, mais non supportée par ie) pointant vers ce prototype, le voici. est pointé vers @a,




Copier le code

Le code est le suivant : fonction a( ){ this.name = 'a'; }

var a1 = new a();
alert(a1._proto_ == a.prototype)


Résultat : vrai

Lors de l'accès aux attributs, il recherchera d'abord à l'intérieur de l'objet a1. Sinon, il recherchera le long de l'objet pointé par _proto_. Ici, il cherchera dans @a et le trouvera. . Renvoyez simplement la valeur si elle n'est pas trouvée, elle renverra un idiome pour la décrire, il suffit de suivre l'indice !

Maintenant, la signification de la chaîne de prototypes apparaît. Puisque l'objet prototype possède également un pointeur _proto_, il pointe vers un autre prototype, l'un après l'autre, formant une chaîne de prototypes. Object.prototype est le prototype de niveau supérieur, donc si les propriétés de Object.prototype sont modifiées, cela affectera tous les objets.

Regardons un morceau de code




Copiez le code

Le code est le suivant : function a(){ this.name = 'a'; }

function b(){
this.age = 1;
}

b .prototype = new a();
alert(new b().name);


Nous pointons explicitement le prototype de b vers une instance de a, et puis l'instance de b également Vous pouvez accéder aux propriétés de a. C'est l'héritage de JavaScript, alors pourquoi b.prototype pointe-t-il vers une instance de a au lieu de pointer directement vers a.prototype ?

Copier le code

Le code est le suivant : b.prototype = new a.prototype;
Si vous modifiez les attributs dans p.prototype comme ci-dessus, alors le prototype de a changera également. Cela équivaut à la sous-classe modifiant la classe parent, et les attributs de la sous-classe et de la classe parent sont mélangés. est évidemment inapproprié. En d’autres termes, b est également devenu le constructeur de @a, et a et b ont une relation égale.

Nous pouvons faire une définition :

La fonction a hérite de la fonction b, qui est le constructeur qui fait de la fonction a une instance du prototype de la fonction b. Les attributs déclarés dans le constructeur sont ceux de la fonction a. own , les attributs de l'instance prototype sont hérités de b

Copier le code Le code est le suivant :

var $ = jQuery = function(selector,context){
//Il est impossible de vous reconstruire dans votre propre constructeur, donc une instance d'un autre constructeur est renvoyée
return new init(selector,context );
}
jQuery.fn = jQuery.prototype = {
size:function(){
return this.length
}
}

function; init (sélecteur, contexte){

}
init.prototype = jQuery.fn;;
}

Ceci est un code source de jquery. jquery, le mot-clé new n'est pas utilisé, alors comment construit-il l'objet ?

En utilisant les connaissances ci-dessus, on peut expliquer que jquery n'est qu'un appel de fonction général, qui renvoie un objet créé par un autre constructeur du prototype jquery, qui est new init()