Analyzed the implementation principle of the extend method in JQuery _ jquery-js tutorial

This article mainly introduces how to use jQuery. the source code of extend analyzes the implementation principle and usage of the extend method in JQuery. It is very detailed. We recommend it to you here. If you need it, refer to it. I haven't posted a post for a long time. Today I suddenly analyzed the implementation principle of the extend method in JQuery. The purpose is to improve your understanding of JQuery and how JavaScript masters compile JavaScript. If you have any questions, please correct me. Thank you!

The following is the source code of the JQuery. extend method:

The Code is 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;
// Process the deep copy (the first parameter is of the boolean type and is true)
If (typeof target = "boolean "){
Deep = target;
Target = arguments [1] || {};
// Skip the first parameter (whether to copy it in depth) and the second parameter (target object)
I = 2;
}
// If the target is not an object or function, the initialization is null.
If (typeof target! = "Object "&&! JQuery. isFunction (target )){
Target = {};
}
// If only one parameter is specified, 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 objects, recursively copy the object.
If (deep & copy & (jQuery. isPlainObject (copy) | (copyIsArray = jQuery. isArray (copy )))){
// Process the Array
If (copyIsArray ){
CopyIsArray = false;
// If the target object does not exist, an empty array is created;
Clone = src & jQuery. isArray (src )? Src: [];
} Else {
Clone = src & jQuery. isPlainObject (src )? Src :{};
}
// The original object is never changed and only copied
Target [name] = jQuery. extend (deep, clone, copy );
// Do not copy the undefined Value
} Else if (copy! = Undefined ){
Target [name] = copy;
}
}
}
}
// Return the modified object
Return target;
};

From the above analysis, we can see that the extend function supports deep copy. What is deep copy in JS?

My understanding is as follows: if an object contains a reference object (such as an array or object), copying this object is not a simple copy of the address of the reference object, instead, it copies the content of the referenced object and saves it as a separate object (for example ).

We can see that two student objects share friend objects, and one party's operations on friend objects are also visible to the other. For example, if you turn your friend's surname into "zhangsan", you can also see another object.

It can be seen that both students have their own friends, and the modifications made by one party are completely transparent to the other (without any impact ). The above is my understanding of deep replication. Do not joke about anything wrong. Thank you.

So how does the JQuery. extend Method Implement shallow replication and deep replication?

JQuery. extend usage:

1. JQuery. extend (source object)

Extend the source object to the jQuery object, that is, copy the attributes and methods of the source object to jQuery. Use jQuery as the target object. The source code is as follows:

The Code is as follows:

// If only one parameter is specified, jQuery itself is used as the target object.
If (length = I ){
Target = this;
-- I;
}

[Example 1]: extend the method of the person object to the jQuery object.

The Code is 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

[Example 2] verify that the extend method in this form is shortest copy.

The Code is 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 the extended object
Alert (person. language); // java, c ++, SQL, PL/SQL
Person. language. pop ();
Alert ($. language); // java, c ++, SQL

From the above example, we can find that the modified language array of the extended object ($) and the source object (person) will affect the other. This is light replication.

2. JQuery. extend (target object, source object)

Copy the attributes and methods of the source object to the target object.
[Instance] creates the person and student objects respectively, and then extends the attributes and methods of the person object to the student object through the jQuery. extend method.

The Code is 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); // extends the person object to the specified student object.
Student. showName ("admin ");
Alert (student. language );

3. JQuery. extend (boolean, source object)

In this method, the boolean parameter indicates whether to use deep replication. If it is true, the deep replication is used.
[Instance] extends the person object to the jQuery object.

The Code is as follows:

Var person = {
Language: ['java', 'c ++ ',' SQL '],
ShowName: function (name ){
Alert ("Name:" + name );
}
};
JQuery. extend (true, person); // extend the person object to the jQuery object
Alert ($. language); // java, c ++, SQL
$. Language. push ('pl/SQL '); // modify the extended object
Alert (person. language); // java, c ++, SQL
Person. language. pop ();

The above example shows that the modification to $. language does not affect the language attribute in person. This is deep replication.

4. JQuery. extend (boolean, target object, source object)

Determine whether to use deep replication to extend the source object to the target object. As follows:
[Instance] creates the person and student objects respectively, and then extends the attributes and methods of the person object to the student object through the jQuery. extend method.

The Code is 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. If there are any errors, please correct them. Thank you!