Explication détaillée de la construction sans nouveau

Cette fois, je vais vous apporter une explication détaillée de la nouvelle version gratuite. Quelles sont les précautions lors de l'utilisation de la nouvelle version gratuite, jetons un coup d'œil.

Préface

Quand on veut créer un objet, on peut utiliser la nouvelle méthode pour construire un objet, alors il va de soi que jquery est aussi un objet, et il doit être construit en utilisant new jquery() Pourquoi créons-nous un objet jquery sans utiliser new jquery() mais utilisons directement une méthode similaire à $(ele). construire un objet jquery ? En fait, new est toujours utilisé en interne pour le construire, mais jquery nous aide à le construire en interne. Veuillez consulter le code suivant

function Jquery(selector, context) {
  return new Jquery(selector, context);
 }
 Jquery.prototype = {
  version:'1.01'
 }

pour utiliser new en interne pour construire directement Jquery. dans ce cas, une boucle infinie est formée. Afin de résoudre le problème de la boucle infinie, veuillez regarder le code suivant :

function Jquery(selector, context) {
 return Jquery.prototype.init(selector, context);
}
Jquery.prototype = {
 version:'1.01',
 init: function () {
  this.name = "lin";
  return this;
 }
}
var a = Jquery();
var b = Jquery();
console.log(a.version); //1.01
console.log(a.name); //lin
a.name = "na";
console.log(b.name); //na

Le problème de la boucle infinie a bien été résolu, mais un nouveau problème a été découvert. Vous pouvez le constater. les attributs des deux objets a et b sont communs. Oui, j'ai changé l'attribut a.name en na, et l'attribut b.name a également changé en na La raison est que cela pointe vers

de Jquery. Afin de résoudre ce problème, on peut appeler Jquery() à chaque fois. Un nouvel objet est construit à chaque fois. Le code amélioré est le suivant :

function Jquery(selector, context) {
 return new Jquery.prototype.init(selector, context); //注意看，这里多了个new
}
Jquery.prototype = {
 version:'1.01',
 init: function () {
  this.name = "lin";
  console.log(this);
  return this;
 }
}
var a = Jquery();
var b = Jquery();
console.log(a.version); //undefined
console.log(a.name); //lin
a.name = "na";
console.log(b.name); //na

Après ce traitement, le problème de l'attribut. Le partage a été résolu. Chaque objet a ses propres attributs et peut être modifié librement. Chaque objet interagit les uns avec les autres, mais un nouveau problème a été découvert lorsque nous imprimons l'attribut a.version. la console, nous ne pouvons pas lire cet attribut. La raison est qu'à l'heure actuelle, Jquery.prototype et Jquery.prototype.init.prototype ne s'excluent pas mutuellement, nous avons créé un objet Jquery.prototype.init, nous ne pouvons donc lire que les attributs sur Jquery.prototype.init.prototype mais. pas les attributs sur Jquery.prototype (cet exemple fait référence à l'attribut version). La solution est simple, il suffit d'attribuer Jquery.prototype à Jquery.prototype.init.prototype, ce qui équivaut à attribuer tous les attributs du prototype Jquery au prototype de . Veuillez consulter le code suivant : Jquery.init

function Jquery(selector, context) {
 return new Jquery.prototype.init(selector, context);
}
Jquery.prototype = {
 version:'1.01',
 init: function () {
  this.name = "lin";
  return this;
 }
}
Jquery.prototype.init.prototype = Jquery.prototype; //画龙点睛之笔
var a = Jquery();
var b = Jquery();
console.log(a.version); //1.01
console.log(a.name); //lin
a.name = "na";
console.log(b.name); //na

Comme vous pouvez le voir, la console imprime l'attribut version de l'objet a, qui peut être lu et imprimé.

À ce stade, la nouvelle construction gratuite de Jquery est terminée.

ps : jQuery.fn est en fait le prototype de jQuery. Vous pouvez voir cette déclaration dans le code source de jquery : jQuery.fn = jQuery.prototype = {};

. $() C'est en fait la même chose que jquery(). Vous pouvez voir cette instruction dans le code source de jquery :

window.jQuery = window.$ = jQuery;

prototype prototype.

Savez-vous ce qu'est un prototype ?

En

JavaScript, le prototype est aussi un objet. Grâce au prototype, les propriétés de l'objet peuvent être réalisées Hériter. Propriété interne "[[ Prototype]]", cette propriété correspond au prototype de l'objet.

Les deux attributs "prototype" et "

proto" peuvent parfois être confondus "Person.prototype" et "Person.proto" sont complètement différents.

Voici une brève introduction à "prototype" et "proto" :

Pour tous les objets, il existe un attribut proto, qui correspond au prototype de l'objet .

Pour les objets fonction, en plus de l'attribut proto, il existe également un attribut prototype. Lorsqu'une fonction est utilisée comme

constructeur pour créer une instance, la valeur de l'attribut prototype du. la fonction sera utilisée comme prototype Attribuer des valeurs à toutes les instances d'objet (c'est-à-dire définir l'attribut proto de l'instance)

function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.getInfo = function(){
console.log(this.name + " is " + this.age + " years old");
};
//调用
var will = new Person("Will", 28);
will.getInfo();//"Will is 28 years old"

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article .Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment deux zTree interagissent les uns avec les autres

Comment utiliser Webpack pour écrire la configuration de l'environnement jquery

Comment convertir automatiquement les majuscules et les minuscules lorsque Jackson analyse la chaîne json

Utilisation du panneau pliant jQuery EasyUI

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!