Explanation of jQuery source code: extend (), tool methods, instance methods, and jqueryextend

Explanation of jQuery source code: extend (), tool methods, instance methods, and jqueryextend

This article describes how to interpret the jQuery source code extend (), tool methods, and instance methods. We will share this with you for your reference. The details are as follows:

When using jQuery, you will find that some functions in jQuery are used as follows:

$.get();$.post();$.getJSON();

Some functions are used as follows:

$('div').css();$('ul').find('li');

Some functions are used as follows:

$('li').each(callback);$.each(lis,callback);

Two concepts are involved: tool methods and instance methods. Generally, the tool method is a function that can be called without instantiation, such as the first code. The instance method is a function that can be called only after the object is instantiated, such as the second code. In jQuery, many methods are both instance methods and tool methods, but the call methods are slightly different, for example, the third code. To better understand the tool methods and instance methods in Javascript, perform the following tests.

function A(){}A.prototype.fun_p=function(){console.log("prototpye");};A.fun_c=function(){console.log("constructor");};var a=new A();A.fun_p();//A.fun_p is not a functionA.fun_c();//constructora.fun_p();//prototpyea.fun_c();//a.fun_c is not a function

Through the above tests, we can conclude that the instance method is defined in the prototype and the tool method is directly added to the constructor. The instance method cannot be called by the constructor. Likewise, tool methods cannot be called by instances.

Of course, the instance method can be defined not only in the prototype, but also in the following three methods:

function A(){    this.fun_f=function(){        console.log("Iam in the constructor");    };}A.prototype.fun_p=function(){    console.log("Iam in the prototype");};var a=new A();a.fun_f();//Iam in the constructora.fun_i=function(){    console.log("Iam in the instance");};a.fun_i();//Iam in the instancea.fun_p();//Iam in the prototype

The priority of these three methods is: the priority of variables directly defined on the instance is higher than that defined on the "this, the variables defined on "this" are higher than those defined on prototype. That is, the variables directly defined on the instance will overwrite the variables defined on "this" and prototype. The variables defined on "this" will overwrite the variables defined on prototype.

The following describes the source code of the extend () method in jQuery:

jQuery.extend = jQuery.fn.extend = function() {    var options,name, src, copy, copyIsArray, clone,        target= arguments[0] || {},        i =1,        length= arguments.length,        deep= false;    // Handle adeep copy situation    if ( typeoftarget === "boolean" ) {        deep= target;        //Skip the boolean and the target        target= arguments[ i ] || {};        i++;    }    // Handlecase when target is a string or something (possible in deep copy)    if ( typeoftarget !== "object" && !jQuery.isFunction(target) ) {        target= {};    }    // ExtendjQuery itself if only one argument is passed    if ( i ===length ) {        target= this;        i--;    }    for ( ; i< length; i++ ) {        //Only deal with non-null/undefined values        if ((options = arguments[ i ]) != null ) {            //Extend the base object            for( name in options ) {                src= target[ name ];                copy= options[ name ];                //Prevent never-ending loop                if( target === copy ) {                   continue;                }                //Recurse if we're merging plain objects or arrays                if( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray= jQuery.isArray(copy)) ) ) {                   if( copyIsArray ) {                       copyIsArray= false;                       clone= src && jQuery.isArray(src) ? src : [];                   }else {                       clone= src && jQuery.isPlainObject(src) ? src : {};                   }                   //Never move original objects, clone them                   target[name ] = jQuery.extend( deep, clone, copy );                //Don't bring in undefined values                }else if ( copy !== undefined ) {                   target[name ] = copy;                }            }        }    }    // Returnthe modified object    return target;};

(1) first, jQuery and the extend () method in its prototype use the same function.

(2) when there is only one parameter in extend (), add a plug-in for the jQuery object. The extension on jQuery is called the tool method. in fn (jQuery prototype), the extension is an instance method. Even if jQuery and prototype can be used to expand functions with the same name, the jQuery object will call the tool method and use jQuery () will call the instance method.

(3) When extend () has multiple parameters, the following parameters are extended to the first parameter.

var a={};$.extend(a,{name:"hello"},{age:10});console.log(a);//Object{name: "hello", age: 10}

(4) shallow copy (default ):

var a={};varb={name:"hello"};$.extend(a,b);console.log(a);//Object{name: "hello"}a.name="hi";console.log(b);//Object{name: "hello"}

B is not affected by a, but if one of B's attributes is an object:

var a={};varb={name:{age:10}};$.extend(a,b);console.log(a.name);//Object{age: 10}a.name.age=20;console.log(b.name);//Object{age: 20}

Because the shortest copy cannot be completed, B. name will be affected by a. In this case, we often want to make a deep copy.

Deep copy:

var a={};varb={name:{age:10}};$.extend(true,a,b);console.log(a.name);//Object{age: 10}a.name.age=20;console.log(b.name);//Object{age: 10}

B. name is not affected by.

Var a = {name: {job: "Web Develop" }}; var B = {name: {age: 10 };$. extend (true, a, B); console. log (. name); // age: 10 job: "Web Develop" // B. name does not overwrite. name. job.