jquery's extension method extend detailed

Today, we study the extend of the extension method of jquery.

1.extend (Obj,item1,item2,item3 ...);

The implication of this code is that all items, such as SRC1,SCR2, are merged into the Obj object, but there is also a problem so that merging modifies the entire structure of obj.

2.var result = $.extend ({},item1,item2,item3 ...);

This method skillfully uses the Extend feature to combine an empty object with all item and get a new object in the form of a return value. As shown below:

var result = $.extend ({},{name: "ZX", Age:21},{name: "CLT", Sex: "Man"});

The output is {name: "CLT", Age:21,sex: "Man"}, so we can see that in the merge, if the same property name exists, the latter overrides the former.

3. The next step is to extend the static method of the JQ class as we will see in the plugin. As shown below:

$.extend ({say:function () {alert ("Hello");}});

This is to merge src into the global object of jquery, in other words, to extend the static method of the entire JQ class, which we can call through $.say ().

Extrapolate, since the JQ class can be extended, we can naturally extend our custom objects.

For example: $.extend (Obj,{say:function () {alert ("Hello");}});

We can customize an Obj object and then extend his say method, which is called by Obj.say ().

4.$.fn.extend (Say:function () {alert (this). text ());})

In the JQ source code, $.fn = $.prototype, the prototype chain of the JQ class, which merges src into an instance object of jquery, requires an instantiated JQ object to be called, as follows:

Through $ ("#test"). Say () can be called to the extended say method.

5.var Result=$.extend (True or FALSE, {},
{Name: "ZX", Location: {City: "Shangrao", County: "USA"}},
{Last: "CLT", Location: {state: "Jiangxi", County: "China"});

Finally we need to understand the $.extend, the first parameter is Ture or FALSE, which represents the execution of a deep copy or shallow copy. The results are as follows:

{name: ' ZX ', Location: ' City: ' Shangrao ', County: ' China ', state: ' Jiangxi '}, Last: "CLT"}.

When false is passed in, the representative performs a shallow copy, and the result is as follows:

{Name: "ZX", Location: {state: "Jiangxi", County: "China"}, Last: "CLT"}.

By observing the results, we can get the following conclusions. When the parameter is ture, it is a deep copy, and when the location of the first object is different from the value of the second location, the former will overwrite the value in the latter, in other words, merge if not simultaneously.

When the parameter is false, the child's Location property is the same, and the value of the location's property will have the value of the former fully overwritten.

jquery's extension method extend detailed