A brief discussion on jQuery constructor analysis_jquery

In my last article, I explained the general framework of jQuery. I know that all the code is written in a self-calling anonymous function, and the window object is passed in. The source code is like this:

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

We know it is an object through alert(jquery), so how is this object constructed? We use a writing method similar to $(document) to obtain elements, just like calling an ordinary method directly. Is jQuery an ordinary function? If it is a constructor, why is it not a common form of new $(document)?

In fact, jQuery is an object-oriented js library, and it also has a constructor. Every time a jQuery method is called, a jQeury object will be instantiated, but the way jQuery is written is very clever.

First of all, let’s talk about js object-oriented: Although js is not an object-oriented language, it has many object-oriented writing methods. I recommend you to take a look at the object-oriented programming part in Turing’s "Javascript Advanced Programming". Among many methods, the most commonly used writing method is the construction plus prototype method. Here is an example:

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说你好

In fact, jQuery also uses this method, but it uses a smarter way of writing. Let’s take a look at the differences between jQuery’s constructors

// 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 );
},

From the source code, we can see that the real function in jQuery is the init method. When we call jQuery, the result of new init() will be returned instead of new jQuery() directly.

What is jQuery.fn? We will see this code later

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

This is easy to understand. In fact, jQuery.fn is the prototype object, which means that there is an init method in the jQuery prototype, which is the real constructor. The advantage of writing this way is that there is no need to write operations such as $().init(), and it is initialized directly. However, there is another problem: since init is the constructor, the method instance we write on jQuery cannot be called. Is it? Naturally, the instantiation of init can only call the init method. Later, you will see this code

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

I mentioned jQuery.fn=jQuery.protype before, which means that the prototype object of jQuery is assigned to the prototype of init, so that jQuery’s prototype method will naturally be available in init. Through this construction method S, jQuery can be used The method is very simple and does not require the operation of new jQuery() or manual initialization. It is as simple as calling an ordinary function.