jquery Extend, $.extend source analysis

Source: Internet
Author: User
Tags extend shallow copy

Long time no write the content of the jquery source.
The development of jquery is a big factor because it is very easy to expand, and the reason is that it benefits from the Extend function
The function is an extension function ... is an extended function, which is actually a shallow copy and a deep copy function.
The function is really powerful, and it's very elegant to write.
Take a look at the usage first, there are three ways to use it.

The code is as follows Copy Code
1, $.extend (DEST,SRC1,SRC2,SRC3 ...);
2, $.extend (SRC)
3, $.extend (BOOLEAN,DEST,SRC1,SRC2,SRC3 ...)

The meaning is to merge the SRC1,SRC2,SRC3 into the Dest object ...
In particular, the third, the significance of the first parameter is whether to SRC1,SRC2, such as deep copy.
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, then the SRC1,SRC2 is deeply copy.
This time the RET return value is

The code is as follows Copy Code
Ret={name: "Siren", About:{age:24,country: "Beijing"},from: "Hebei", birthday:{year:1988,month:02}};

Found that even the properties of about and birthday together into the dest inside. This is deep copy.
So look at the source.

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 it by line.
Line 2nd Gets the first argument that extend passes in ... If it is not initialized to an object.
4 lines gets the number of arguments.
Line 7: If the first argument passes over a bool type, this time the usage is the third one we mentioned earlier.
Line 12-14: is a rule that the first parameter is either bool or obj. Of course, the obj type also includes functions in JS.
Line 18-34: copy. Variable g is a temporary variable that holds the current SRC value.
such as executing $.extend ({},{a:10}); G is equal to {a:10}
Line 26-27: If you make a deep copy, the SRC attribute is also an object and is not an element object ... This time again calls O.extend recursively for replication.
Otherwise
Line 29-31: Where is l!==g g defined? Not defined so it equals undefined.
J[F] = L; F equals the property name ... L equals the value. J Equals our dest.
How did you get it? So we can also write a very good inheritance function of the cow oh ...
I'll 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)
})()

What do you think.. Is it very simple??

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.