Detailed explanation of jQuery.extend function_jquery

JQuery's extend method: Jquery's extend method is a commonly used method when we write plug-ins. This method has some overloaded prototypes. Here, let's learn about it together. 1. Jquery’s extension method prototype is:

Copy code The code is as follows:

extend(dest ,src1,src2,src3...);

It means merging src1, src2, src3... into dest, and the return value is the merged dest. From this we can see After merging this method, the structure of dest is modified. If you want to get the merged result but don’t want to modify the structure of dest, you can use it as follows:

Copy code The code is as follows:

var newSrc=$.extend({},src1,src2,src3...)//That is, use "{}" as the dest parameter.

In this way, src1, src2, src3... can be merged, and then the merged result will be returned to newSrc. As an example:

Copy code The code is as follows:

var result=$.extend({} ,{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

Then the merged result

Copy code The code is as follows:

result={name:"Jerry",age:21,sex:"Boy"}

That is to say, if the later parameter has the same name as the previous parameter, then the later parameter will overwrite the previous parameter value.
2. Omit the dest parameter
The dest parameter in the extend method prototype above can be omitted. If it is omitted, the method can only have one src parameter, and the src is merged into the call to the extend method. object, such as: 1. $.extend(src) This method is to merge src into the global object of jquery, such as:

Copy code The code is as follows:

$.extend({ hello:function(){alert('hello');} });

It is to merge the hello method into the global object of jquery.
　2. $.fn.extend(src) This method merges src into the jquery instance object, such as:

Copy code The code is as follows:

$.fn.extend({ hello:function(){alert('hello');} });

　 It is to merge the hello method into the jquery instance object.
Here are some commonly used extension examples:

Copy code The code is as follows:

$.extend({net:{}});

　 This is to extend a net namespace in the jquery global object.

Copy code The code is as follows:

$.extend($.net,{ hello:function (){alert('hello');} })

This is to extend the hello method into the previously extended Jquery net namespace.
3. Jquery’s extend method also has an overloaded prototype:

Copy code The code is as follows:

extend(boolean,dest,src1,src2,src3...)

The first parameter boolean represents whether to perform a deep copy. The other parameters are consistent with the previous introduction. What is deep copy? Copy, let’s look at an example:

Copy code The code is as follows:

var result=$. extend( true, {}, { name: "John", location: {city: "Boston",county:"USA"} }, { last: "Resig", location: {state: "MA",county:" China"} } );

We can see that the sub-object location: {city: "Boston"} is nested in src1, and the sub-object location: {state: "MA"} is also nested in src2. The first deep copy parameter is true, then The result after merging is:

Copy the code The code is as follows:

result={name:" John",last:"Resig", location:{city:"Boston",state:"MA",county:"China"}}

That is to say, it will src The nested sub-objects in are also merged, and if the first parameter boolean is false, let’s see what the result of the merge is, as follows:

Copy code The code is as follows:

var result=$.extend( false, {}, { name: "John", location:{city: "Boston",county:" USA"} }, { last: "Resig", location: {state: "MA",county:"China"} } );

Then the merged result is:

Copy code The code is as follows:

result={name:"John",last:"Resig",location :{state:"MA",county:"China"}}

The above are some details that $.extend() is often used in projects.