Comment construire sans nouveau dans jquery

Lorsque la plupart des gens utilisent jQuery, ils utilisent la première méthode de construction sans new, en utilisant directement $('') pour construire, ce qui est également un endroit très pratique pour jQuery. Cet article vous présente principalement les informations pertinentes sur les notes d'étude jquery sans nouvelle construction. Les amis qui en ont besoin peuvent y jeter un œil ci-dessous.

Préface

Lorsque nous voulons créer un objet, nous pouvons utiliser la nouvelle méthode pour construire un objet, donc jquery est aussi un objet . , il devrait également être construit en utilisant new jquery() Pourquoi n'utilisons-nous pas new jquery() pour créer un objet jquery mais utilisons-nous directement une méthode similaire à $(ele) pour 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. L'héritage des attributs de l'objet peut être réalisé via le prototype. Les objets JavaScript contiennent tous un attribut interne "[[Prototype]]", qui correspond à. C'est le 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 à l'objet Le prototype de

Pour les objets fonction, en plus de l'attribut __proto__, il existe également l'attribut prototype. Lorsqu'une fonction est utilisée comme constructeur pour créer une instance, la valeur de l'attribut prototype de la fonction sera attribuée comme prototype. Toutes les instances d'objet (c'est-à-dire la définition de 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"

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

À propos de la fonction coulissante de l'écran tactile mobile dans jquery

Comment installer nvm sur Mac (tutoriel détaillé)

Comment implémenter la fonction time dans l'applet WeChat

Exploration du code généré dans webpack

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!