Use jQuery source code to learn javascript (2) _ jquery

I wrote an article yesterday to learn javascript (1) Through jQuery source code. There is a method for defining Object C in it. I didn't pay too much attention to the technical details in the early days. Later, I checked the information and found that there were many clever places in it. Today I will share with you the clever 1: Functions

Functions are a rare talent in javascript code.
♥It can return code segments and encapsulate relatively independent functions.
♥It can also implement classes and inject OOP ideas.
JQuery is a function, and you can also treat it as a class (HA, itself is a class ).

The Code is as follows:

(Function (){
Var jQuery = function (){
// Function body
}
Window. jQuery = window. $ = jQuery;
})();
Console. log (jQuery );

The empty functions above are called constructor. constructor is a basic method of classes in object-oriented languages.

Clever 2: Extended prototype

What is a prototype object? I will give you a blog post on http://www.jb51.net/article/32857.htm.

Javascript binds a prototype attribute to all functions, which points to a prototype object. We define the inheritance attributes and methods of classes in the prototype object.

Prototype objects are the basic mechanism for javascript to implement inheritance.

The Code is as follows:

(Function (){
Var jQuery = function (){
// Function body
}
JQuery. fn = jQuery. prototype = {
// Extend the prototype object
Jquery: "1.8.3 ",
Test: function (){
Console. log ('test ');
}
}
Window. jQuery = window. $ = jQuery;
})();

(New jQuery (). test ();

Clever 3: Create an instance using the factory Method

The above method must use the following method to call, which will produce a lot of objects, thus wasting memory consumption.

(New jQuery (). test ();
JQuery source code uses a very soft method, which is also a familiar factory method for calling.

The Code is as follows:

(Function (){
Var jQuery = function (){
// Function body
Return jQuery. fn. init ();
}
JQuery. fn = jQuery. prototype = {
// Extend the prototype object
Jquery: "1.8.3 ",
Init: function (){
Return this;
},
Test: function (){
Console. log ('test ');
}
}
Window. jQuery = window. $ = jQuery;
})();
JQuery (). test ();

Hypothesis 1: Let the jQuery function body directly return this object -- I use this

The Code is as follows:

(Function (){
Var jQuery = function (){
Return this;
}
JQuery. fn = jQuery. prototype = {
// Extend the prototype object
Jquery: "1.8.3 ",
Test: function (){
Console. log ('test ');
}
}
Window. jQuery = window. $ = jQuery;
})();
Console. log (jQuery ());

Output result

This indicates the Window object.
Hypothesis 2: Let the jQuery function body directly return the instance of the class.

The Code is as follows:

(Function (){
Var jQuery = function (){
Return new jQuery ();
}
JQuery. fn = jQuery. prototype = {
// Extend the prototype object
Jquery: "1.8.3 ",
Test: function (){
Console. log ('test ');
}
}
Window. jQuery = window. $ = jQuery;
})();
Console. log (jQuery ());

Output result

The above is a recursive endless loop with memory overflow.

Clever 4: separate scopes

Thought 1: What is the scope of this returned by the init () method?

The Code is as follows:

(Function (){
Var jQuery = function (){
// Function body
Return jQuery. fn. init ();
}
JQuery. fn = jQuery. prototype = {
// Extend the prototype object
Jquery: "1.8.3 ",
Init: function (){
This. init_jquery = '2. 0 ';
Return this;
}
}
Window. jQuery = window. $ = jQuery;
})();
Console. log (jQuery (). jquery );
Console. log (jQuery (). init_jquery );

Output result


This scope in the init () method: this keyword references the object where the init () function scope is located, and can also access the jQuery. fn object of the upper-level object. -- This idea will undermine the independence of the scope, which may have a negative impact on the jQuery framework.

Thinking 2: how to separate this in init () from the jQuery. fn object? -- Instantiate the init initialization type.

The Code is as follows:

(Function (){
Var jQuery = function (){
// Function body
Return new jQuery. fn. init ();
}
JQuery. fn = jQuery. prototype = {
// Extend the prototype object
Jquery: "1.8.3 ",
Init: function (){
This. init_jquery = '2. 0 ';
Return this;
}
}
Window. jQuery = window. $ = jQuery;
})();
Console. log (jQuery (). jquery );
Console. log (jQuery (). init_jquery );

Output result

By instantiating the init () initialization type, this in the init () method is limited and is only active in the init () function.

Clever 5: Prototype Transfer

Thought 1: In clever 4, we separate this in init () from the jquery. fn object. So how can we ensure that the jQuery prototype object can be accessed on the basis of "clever 4? -- Prototype transfer.

Let jQuery's prototype object overwrite the prototype object of the init () constructor.

The Code is as follows:

JQuery. fn. init. prototype = jQuery. fn;

All code:

The Code is as follows:

(Function (){
Var jQuery = function (){
// Function body
Return new jQuery. fn. init ();
}
JQuery. fn = jQuery. prototype = {
// Extend the prototype object
Jquery: "1.8.3 ",
Init: function (){
This. init_jquery = '2. 0 ';
Return this;
}
}
JQuery. fn. init. prototype = jQuery. fn;
Window. jQuery = window. $ = jQuery;
})();
Console. log (jQuery (). jquery );
Console. log (jQuery (). init_jquery );

Output result

Miaoqi

Point the prototype pointer of the init () object to jQuery. fn. -- In this way, this in init () inherits the methods and attributes defined by the jQuery. fn prototype object.

Summary

Thank you for your comments, especially puni, for introducing me to a good book. If you can add one, it would be better.