Une brève discussion sur le constructeur jQuery Analysis_jquery

Dans mon dernier article, j'ai expliqué le cadre général de jQuery. Je sais que tout le code est écrit dans une fonction anonyme auto-appelante, et l'objet window est transmis. Le code source est comme ceci :

(function( window, undefined ) {...})( window );

Nous savons qu'il s'agit d'un objet grâce à alert(jquery), alors comment cet objet est-il construit ? Nous utilisons une méthode d'écriture similaire à $(document) pour obtenir des éléments, tout comme appeler directement une méthode ordinaire. JQuery est-il une fonction ordinaire ? S'il s'agit d'un constructeur, pourquoi n'est-il pas une forme courante de new $(document) ?

En fait, jQuery est une bibliothèque js orientée objet, et elle possède également un constructeur Chaque fois qu'une méthode jQuery est appelée, un objet jQeury sera instancié, mais la façon dont jQuery est écrit est très intelligente.

Tout d'abord, parlons de js orienté objet : bien que js ne soit pas un langage orienté objet, il possède de nombreuses méthodes d'écriture orientées objet, je vous recommande de jeter un œil à la partie programmation orientée objet dans celui de Turing. "Programmation avancée Javascript". Parmi les nombreuses méthodes, la méthode d'écriture la plus couramment utilisée est la méthode de construction plus prototype. Voici un exemple :

.

var Person=function(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype={
 constructor:Person,
 init:function(msg){
  this.say(msg);
 },
 say:function(msg){
 alert(this.name+'说'+msg);
 }
};
var tom=new Person('tom',23); 
tom.init('你好');// tom说你好

En fait, jQuery utilise également cette méthode, mais il utilise une manière d'écrire plus intelligente. Jetons un coup d'œil aux différences entre les constructeurs de jQuery

.

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},

D'après le code source, nous pouvons voir que la vraie fonction dans jQuery est la méthode init. Lorsque nous appelons jQuery, le résultat de new init() sera renvoyé directement à la place de new jQuery().

Qu'est-ce que jQuery.fn ? Nous verrons ce code plus tard

jQuery.fn = jQuery.prototype = {...

C'est facile à comprendre. En fait, jQuery.fn est l'objet prototype, ce qui signifie qu'il existe une méthode init dans le prototype jQuery, qui est le véritable constructeur. L'avantage d'écrire de cette façon est qu'il n'est pas nécessaire d'écrire des opérations telles que $().init(), et qu'il est initialisé directement. Cependant, il y a un autre problème : puisque init est le constructeur, l'instance de méthode sur laquelle nous écrivons. jQuery ne peut pas être appelé. N'est-ce pas ? Naturellement, l'instanciation d'init ne peut appeler que la méthode init. Plus tard, vous verrez ce code

.

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

J'ai déjà mentionné jQuery.fn=jQuery.protype, ce qui signifie que l'objet prototype de jQuery est affecté au prototype d'init, de sorte que la méthode prototype de jQuery sera naturellement disponible dans init Grâce à cette méthode de construction S, jQuery peut. être utilisé La méthode est très simple et ne nécessite pas l'opération de new jQuery() ou une initialisation manuelle. C'est aussi simple que d'appeler une fonction ordinaire.