Use jquery source code to learn JavaScript (2) use jquery source code to learn JavaScript (1)

I wrote an article yesterday to learn JavaScript (1) Through jquery source code. There is a method for defining Object C, and 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. I would like to share with you today. Clever 1: Functions in Javascript Code Function is a rare talent. 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 ).

 
(Function(){VaRJquery =Function(){//Function body} Window. jquery= Window. $ =Jquery;}) (); console. Log (jquery );
 

Output result

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

Clever 2: What is a prototype object for an extended prototype? I will give you a blog post on http://www.cnblogs.com/gnface/archive/2012/08/22/2651534.html. 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. The prototype object is implemented in JavaScript. Inheritance .

(Function(){VaRJquery =Function(){//Function body} Jquery. FN= Jquery. Prototype ={//Extended prototype objectJquery: "1.8.3", Test:Function() {Console. Log ('Test') ;}} Window. jquery= Window. $ =Jquery ;})();(NewJquery (). 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.

 
(NewJquery (). Test ();
 

Jquery source code uses a very soft method, which is also a familiar factory method for calling.

( Function  (){  VaR Jquery = Function  (){  //  Function body          Return  Jquery. FN. INIT ();} jquery. FN = Jquery. Prototype = {  // Extended 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

 ( function   () {  var  jquery =  function   () {  return   This  ;} jquery. FN  = jquery. prototype = { ///   extended 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.

 ( function   () {  var  jquery =  function   () {  return   New   jquery ();} jquery. FN  = jquery. prototype = { ///   extended 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?

( Function  (){  VaR Jquery = Function  (){  //  Function body          Return Jquery. FN. INIT ();} jquery. FN = Jquery. Prototype = {  //  Extended 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.

( Function  (){  VaR Jquery = Function  (){  // Function body          Return   New  Jquery. FN. INIT ();} jquery. FN = Jquery. Prototype = {  //  Extended 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 thinking 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.

 
Jquery. FN. init. Prototype = jquery. FN;
 

All code:

( Function  (){  VaR Jquery = Function  (){  //  Function body          Return   New  Jquery. FN. INIT ();} jquery. FN = Jquery. Prototype = {  //  Extended 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.

To sum up, I would like to thank Boyou for your comments, especially Puni. And introduced me to a good book. If you can add one, it would be better.

Recommendation