A long time no post, today suddenly analyzed the jquery extend method implementation principle. Objective in order to improve their understanding of jquery, but also want to know how the JavaScript master is how to write JS, if there is insufficient please correct me. Thank you!
The following is the Jquery.extend method source code:
Copy Code code as follows:
Jquery.extend = JQuery.fn.extend = function () {
var options, name, SRC, copy, Copyisarray, clone,
target = Arguments[0] | | {},//target object
i = 1,
Length = Arguments.length,
Deep = false;
Processing depth Copy (first argument is Boolean and true)
if (typeof target = = "Boolean") {
Deep = target;
target = Arguments[1] | | {};
Skips the first argument (whether the depth copy) and the second argument (the target object)
i = 2;
}
If the target is not an object or function, it is initialized to an empty object
if (typeof target!== "Object" &&!jquery.isfunction (target)) {
target = {};
}
If only one argument is specified, then jquery itself is used as the target object
if (length = = i) {
target = this;
I.;
}
for (; i < length; i++) {
Only deal with non-null/undefined values
if (options = arguments[i])!= null) {
Extend the Base Object
for (name in options) {
src = target[name];
copy = options[name];
Prevent never-ending Loop
if (target = = copy) {
Continue
}
If the object contains an array or other object, the recursive copy is used
if (deep && copy && jquery.isplainobject (copy) | | (Copyisarray = Jquery.isarray (copy)) ) {
Working with arrays
if (Copyisarray) {
Copyisarray = false;
Creates an empty array if the target object does not exist in the array;
clone = src && jquery.isarray (src)? SRC: [];
} else {
clone = src && jquery.isplainobject (src)? src: {};
}
Never change the original object, only make copies
target[name] = Jquery.extend (deep, clone, copy);
Do not copy undefined value
else if (copy!== undefined) {
target[name] = copy;
}
}
}
}
Returns the object that has been modified
return target;
};
From the above analysis can be seen extend function to support deep copy, then in JS What is a deep copy?
My understanding is as follows: If an object contains a reference object (such as an array or an object), then copying the object is not simply a copy of the object's address, but rather copies the contents of the referenced object to a separate object (pictured below).
From the picture above, you can see that two student objects share the friend object, while the other side is also visible to the friend object's operation. For example: You will be a friend's surname "Zhangsan" then another object can also see.
As you can see from the figure above, two students have their own friends, and the modification of one side is completely transparent to the other (without any effect). The above is my understanding of the deep copy, there is nothing wrong please do not joke, thank you.
So how does the jquery.extend approach achieve shallow replication and deep replication?
Jquery.extend Use mode:
1, Jquery.extend (source object)
Extends the source object onto the jquery object, which copies the properties and methods of the source object to jquery. Using jquery as the target object, the source code is as follows:
Copy Code code as follows:
If only one argument is specified, then jquery itself is used as the target object
if (length = = i) {
target = this;
I.;
}
"Instance 1": extends the method of the person object to the jquery object.
Copy Code code as follows:
var person = {
Sex: ' Male ',
Showname:function (name) {
Alert ("Name:" + name);
}
};
Jquery.extend (person); Extend the person object to the jquery ($) Object
Jquery.showname ("admin"); Name:admin
$.showname ("admin"); Name:amdin
Alert ("Sex:" + $.sex); Sex:male
Instance 2 verifies that the Extend method used in this form is shallow replication.
Copy Code code as follows:
var person = {
Language: [' Java ', ' C + + ', ' SQL '],
Showname:function (name) {
Alert ("Name:" + name);
}
};
Jquery.extend (person); Extend the person object to the jquery ($) Object
alert ($.language); Java, C + +, SQL
$.language.push (' Pl/sql '); Modify an Extended object
alert (person.language); Java, C + +, SQL, Pl/sql
Person.language.pop ();
alert ($.language); Java, C + +, SQL
As you can see from the example above, the extended object ($) and any modification of the language array by either side of the source object (person) will affect the other side. This is a shallow copy.
2, Jquery.extend (target object, source object)
Copies the properties and methods of the source object to the target object, using shallow replication.
Instances create the person and student objects, and then extend the person's properties and methods to the student object through the Jquery.extend method.
Copy Code code as follows:
var person = {
Language: [' Java ', ' C + + ', ' SQL '],
Showname:function (name) {
Alert ("Name:" + name);
}
};
var student = {
Shownum:function (num) {
Alert ("num:" + num);
}
};
Jquery.extend (student, person); Extend the person object to the specified Student object
Student.showname ("admin");
alert (student.language);
3, Jquery.extend (Boolean, source object)
A Boolean parameter in this way indicates whether to take a deep copy or, if true, to use deep replication.
"Instance" extends the person object to the jquery object
Copy Code code as follows:
var person = {
Language: [' Java ', ' C + + ', ' SQL '],
Showname:function (name) {
Alert ("Name:" + name);
}
};
Jquery.extend (true, person); Extend a Person object on a jquery object
alert ($.language); Java, C + +, SQL
$.language.push (' Pl/sql '); Modify an Extended object
alert (person.language); Java, C + +, SQL
Person.language.pop ();
As you can see from the example above, modifications to $.language do not affect the language attribute in person. This is the deep copy.
4, Jquery.extend (Boolean, target object, source object)
Determines whether a depth copy is used to extend the source object to the target object. As follows:
Instances create the person and student objects, and then extend the person's properties and methods to the student object through the Jquery.extend method.
Copy Code code as follows:
var person = {
Showname:function (name) {
Alert ("Name:" + name);
}
};
var student = {
Language: ["Java", "C + +", "JavaScript"],
Shownum:function (num) {
Alert ("num:" + num);
}
};
var target = Jquery.extend (person, student);
alert (target.language); Java, C + +, JavaScript
Target.language.push ("Pl/sql");
alert (student.language); Java, C + +, JavaScript, pl/sql
Student.language.pop ();
alert (target.language); Java, C + +, JavaScript
var Target2 = Jquery.extend (true, person, student);
alert (target2.language); Java, C + +, JavaScript
Target2.language.push ("Pl/sql");
alert (student.language); Java, C + +, JavaScript
Student.language.pop ();
alert (target2.language); Java, C + +, JavaScript, pl/sql
The above is my understanding of the Extend method, please correct me if there is a wrong place. Thank you very much!
