Extend, $. extend source code analysis in jquery

This article will introduce the source code analysis of extend and $. extend in jquery, and hope to help you.

I haven't written jquery source code for a long time ..
There is a major factor in jquery's development because it is very easy to expand, and the reason is that it is benefited from the extend function.
This function is an extension function... It is an extension function, but it is actually a function of shortest copy and deep copy.
This function is really powerful and elegant to write ..
Let's take a look at the usage in three ways.

The Code is as follows:	Copy code
1. $. extend (dest, src1, src2, src3 ...); 2. $. extend (src) 3. $. extend (boolean, dest, src1, src2, src3 ...)

This means to merge src1, src2, and src3 into the dest object ..
Specifically, the third parameter indicates whether to perform deep copy on src1 and src2.
So what is deep copy?

The Code is as follows:	Copy code
Var ret = $. extend (true ,{}, {Name: "siren", about: {age: 24, country: "beijing "}}, {From: "hebei", birthday: {year: 1988, month: 02 }} );

If the first value is true, perform deep copy on src1 and src2.
In this case, the returned ret value is

The Code is as follows:	Copy code
Ret = {name: "siren", about: {age: 24, country: "beijing"}, from: "hebei", birthday: {year: 1988, month: 02 }};

We found that the attributes of even about and birthday are copied to dest. This is deep copy.
Let's look at the source code.

The Code is as follows:

Copy code

O. extend = o. fn. extend = function (){ Var J = arguments [0] || {}, H = 1, I = arguments. length, E = false, G; If (typeof J = "boolean "){ E = J; J = arguments [1] || {}; H = 2 } If (typeof J! = "Object "&&! O. isFunction (J )){ J = {} } If (I = H ){ J = this; -- H } For (; H <I; H ++ ){ If (G = arguments [H])! = Null ){ For (var F in G ){ Var K = J [F], L = G [F]; If (J = L ){ Continue } If (E & L & typeof L = "object "&&! L. nodeType ){ J [F] = o. extend (E, K | (L. length! = Null? []: {}), L) } Else { If (L! = G ){ J [F] = L } } } } } Return J };

This is the definition part of the method.
We analyze data row by row.
Row 3 gets the first parameter passed in by extend if it is not initialized as an object.
Obtain the number of parameters in four rows.
Row 7: if the first parameter is of the bool type, the usage is the third one we mentioned earlier.
Row 12-14: it is a rule. The first parameter is either bool or obj. Of course, in js, The obj type also includes functions.
Rows 18-34: Copy. Variable G is a temporary variable to save the current src value.
For example, execute $. extend ({}, {a: 10}); G equals to {a: 10}
Lines 26-27: If deep replication is performed, the src attribute is also an object and not an element object... At this time, we call o. extend for Recursive replication.
Otherwise
Line 29-31: L! = Where is g. g defined? Not defined, so it is equal to undefined ..
J [F] = L; F is equal to the property name.. L is equal to the value. J is equal to our dest.
How can we understand that there is no... so we can also write a very good inheritance function ..
Let me start with a simple one.

The Code is as follows:

Copy code

(Function (){ Var s = {}; S. extend = function (){ Var a = arguments [0] || {}, E = false, // whether it is a deep copy H = 0, // number of parameters J = arguments [1], N = arguments. length, g; If (typeof arguments [0] === 'boolean '){ E = arguments [0]; H = 1; }; For (; h <n; h ++ ){ G = arguments [h]; If (typeof g! = Null ){ For (var t in g ){ If (e & g [t] & typeof g [t] = 'object '&&! G [t]. nodeType) {// deep copy O. extend (e, (j | |{}), g [t]); } Else { If (g [t]! = Undefined ){ J [t] = g [t]; // copy } } } } } Return j; }; Var c = s. extend ({a: 10}, {name: 'siren', t: {age: 20, sex: 1 }}) Console. log (c) })()

How about... Is it very simple ??