Differences and explanations: JQuery extend () and JQuery.fn.extend ()

1. Recognize jQuery extend () and JQuery.fn.extend ()

In the jquery API manual, theextend method mounts the methods on jquery and Jquery.fn two different objects, but the jquery internal code implements the same, but the functionality is not the same;

And look at the official explanation:

Jquery.extend(): Merge the contents of the or more objects together into the first object. Merge two or more objects into the first one );

JQuery.fn.extend(): Merge The contents of an object onto the jquery prototype to provide new jquery instance method S. (Attach the object to the prototype property of jquery to extend a new jquery instance method )

2. Understanding jquery.extend()

We see jquery first as a class, so we can understand some of it. Jquery.extend (), is the extension of the jquery class.

Suppose we think of the jquery class as human beings, can eat water can run can jump, now we use jquery.extend this method to expand a can speak speak () skills. In this case, whether it is a man, a woman, xx people ... can inherit this skill (method).

It can be written as:

Jquery.extend ({    speak:function () {         alert ("How is you!");    });

The calling method is as follows:

<! DOCTYPE html>
This shows that $.speak has become a method of the class itself (object) of jquery, and he can now "speak".
But, this ability, only the category of JQuery, which represents humanity, can use it. You personally want to use, you dick and Harry Harry hemp Six, you a grass people can represent all mankind?
So, this extension is the so-called static method, only related to the class itself . It has nothing to do with your specific instantiation of the object.
3. Understanding jQuery.fn.extend()  
From the literal understanding, this expansion is the Jquery.fn method. What the hell is Jquery.fn?
Jquery.fn = Jquery.prototype = {      init:funtion (selector,context) {            //...       }}
So JQuery.fn.extend expands the method of the JQuery object (the prototype)!
What's the object? Is the instantiation of the class, for example $ ("#abc"), $ (DIV)
That is to say, the method that JQuery.fn.extend expands, you have to use on the JQuery object above! He had to be Dick and Harry Wang Six of these instantiated objects to use.
That's the way it's supposed to be (assuming XYZ () is an extended approach):
$ (' selector '). XYZ ();
The calling method is as follows:
<! DOCTYPE html>
4, the difference between the two summary:
4.1, the two call different ways:
Jquery.extend (), generally called by the incoming global function, is mainly used to expand a global function, such as $.init (), $.ajax ();
JQuery.fn.extend (), typically called by specific instance objects, can be used to extend a selector, such as $.fn.each ();
4.2, the main function of the two different:
Jquery.extend(object); To extend the jquery class itself, add a new method for itself. 
JQuery.fn.extend(object); Add a method to a jquery object 
4.3, most of the plug-ins are used JQuery.fn.extend ()
5. jquery's Extend extension method:
5.1. The expansion method prototype of jquery is:
Extend (dest,src1,src2,src3 ...);
Its meaning is to be src1,src2,src3 ...         Merge into Dest, the return value is the merged dest, so you can see that the method is merged, the structure of the dest is modified. If you want to get the results of the merge without modifying the structure of the dest, you can use the following:
var newsrc=$.extend ({},src1,src2,src3 ...) That is, "{}" as the Dest parameter.
This will allow the src1,src2,src3 ... Merge, and then return the merge results to NEWSRC. The following example:
var result=$.extend ({},{name: "Tom", Age:21},{name: "Jerry", Sex: "Boy"}) then the combined result:  result={name: "Jerry", age:21, Sex: "Boy"}
That is, if the following parameter has the same name as the previous parameter, then the previous parameter value is overwritten.
5.2. Omit dest parameter
The Dest parameter in the Extend method prototype above can be omitted, if omitted, then the method can have only one src parameter, and it is to merge the src into the object calling the Extend method, such as:
5.2.1, $.extend (SRC)
　 The method is to merge src into the global object of jquery, such as:
  $.extend ({      hello:function () {alert (' Hello ');}  });
is to merge the Hello method into the global object of jquery.
5.2.2, $.fn.extend (SRC)
This method merges src into the instance object of jquery, such as:
  $.fn.extend ({         hello:function () {alert (' Hello ');}  });
is to merge the Hello method into the instance object of jquery.
The following examples illustrate several common extension instances:
$.extend ({net:{}});
This is the extension of a net namespace in the jquery global object.
$.extend ($.net,{       hello:function () {alert (' Hello ');}})
This is the extension of the Hello method into the net namespace of the previously extended jquery.
The Extend method for 5.2.3 and jquery also has an overloaded prototype:
Extend (BOOLEAN,DEST,SRC1,SRC2,SRC3 ...)
The first parameter, Boolean, indicates whether to make a deep copy, the rest of the parameters are consistent with what was described earlier, what is called deep copy, and we look at an example:
var Result=$.extend (True, {},     {name: "John", Location: {City: "Boston", County: "USA"}},     {last: "Resig", Locatio N: {state: "MA", County: "China"});
We can see that the nested SRC1 in the location:{city: "Boston"},SRC2 also nested the object location:{state: "MA"}, the first deep copy parameter is true, then the result of the merge is:
var result={       name: ' John ', Last: ' Resig ', location:{city: ' Boston ', State: ' MA ', County: ' China '}
In other words, it merges the nested objects in SRC, and if the first argument is a Boolean false, let's see what the result of the merge is, as follows

       {Name: "John", location:{city: "Boston", County: "USA"}},         
Then the result of the merger is:
var result={      Name: "John", Last: "Resig", Location:{state: "MA", County: "China"}
These are some of the details that $.extend () will often use in the project.
Differences and explanations: JQuery extend () and JQuery.fn.extend ()