JQuery extend () details and simple examples, jqueryextend

JQuery extend () details and simple examples, jqueryextend

JQuery extend () details and simple examples

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.

functionA(){        }   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 function   A.fun_c();//constructor   a.fun_p();//prototpye   a.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:

functionA(){     this.fun_f=function(){         console.log("Iam in the constructor");     }; } A.prototype.fun_p=function(){     console.log("Iam in the prototype"); }; var a=newA(); a.fun_f();//Iam in the constructor a.fun_i=function(){     console.log("Iam in the instance"); }; a.fun_i();//Iam in the instance a.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(a.name);//age: 10 job: "Web Develop" 

// B. name does not overwrite a. name. job.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!