Basic Javascript knowledge in Jquery source code (3)

Basic Javascript knowledge in Jquery source code (3)
This article mainly describes how jquery objects are designed and implemented in the source code. Below is a simplified version of the relevant code: Copy code 1 (function (window, undefined) {2 // code defines variable 3 jQuery = function (selector, context) {4 return new jQuery. fn. init (selector, context, rootjQuery); 5}, 6 // code definition variable 7 jQuery. fn = jQuery. prototype = {8 jquery: core_version, 9 constructor: jQuery, 10 init: function (selector, context, rootjQuery) {11 // code initialization, parameter processing 12} 13 // code some methods (each, re Ady, first, eq, etc.) 14} 15 jQuery. fn. init. prototype = jQuery. fn; 16 // code other 17 if (typeof window = "object" & typeof invalid argument Doc ument = "object") {18 window. jQuery = window. $ = jQuery; 19} 20}) (window); copy the code. First, review the javascript knowledge. In javascript, special types of objects are created by constructors. For example, copy the Code 1 function Person (name) {2 this. name = name; 3 this. sayName = function () {4 alert (this. name); 5} 6} 7 // use 8 Person ('anger90') as a common function; 9 window. sayName (); 10 11 // as the constructor, use 12 var person = new Person ('anger90'); 13 person. sayName (); a better way to copy the code-copy the code function Person () {} Person in prototype mode. prototype = {name: "Yanger90", syaName: function () {console. log (this. name) ;}}; va R person = new Person (); copy the code. Each function has a prototype attribute, including the attributes and methods, all instance objects created using this constructor are shared. Some common methods, such as the sayName method in the example, can be shared in the prototype, instead of re-creating each instance object as in the first method. Now, let's briefly introduce the basic knowledge. For more information, see javascript advanced programming. Back to jquery, we generally use the jquery syntax like this: When (element).css (); select an element and execute the corresponding method, then the previous $ (element) should be an instance object, then call the method. We can see that the jQuery variable is defined at the beginning of the source code: jQuery = function (selector, context) {return new jQuery. fn. init (selector, context, rootjQuery);} It does return an instance object. The constructor is init. Next, let's look at it. Copy the jQuery code. fn = jQuery. prototype = {jquery: core_version, constructor: jQuery, // corrected the point-to-point problem caused by literally rewriting the prototype object init: function (selector, context, rootjQuery) {// code initialization, parameter processing} // code (each, ready, first, eq, etc.)} copy the code and find the init. It is a prototype of jQuery). The problem is that the init method only processes the parameters and does not have common methods such as each, ready, first, and eq. They are all in the prototype of jQuery, therefore, you cannot call these methods. JQuery. fn. init. prototype = jQuery. fn; this sentence points the init prototype to jQuery. fn, that is, jQuery. prototype. In this way, the attributes and methods in the prototype of jQuery are shared with the instance object created through the init constructor, and inheritance is realized. Finally, there is a window at the end of jquery source code. jQuery = window. $ = jQuery; jQuery is defined in anonymous functions, so it cannot be accessed from the outside. Here, we assign it to the properties of the window object so that we can use it externally.