Home >Web Front-end >JS Tutorial >JS code that imitates the JQuery.extend function to extend your own object_javascript skills

JS code that imitates the JQuery.extend function to extend your own object_javascript skills

WBOY
WBOYOriginal
2016-05-16 18:39:451184browse

But during the writing process, I found that if I want to add a new static method or instance method to the previously written object, I need to modify the original object structure, so I checked the extend method of jquery, and sure enough, the extend method supports half the sky of jq. , use doctrine to expand your own objects.

Let’s get to the point:
Suppose there is the following object

Copy the code The code is as follows:

var MyMath = {
//Addition
Add: function(a, b){
return a b;
},
//Subtraction
Sub: function(a, b){
return a - b;
}
}

The object name is MyMath. There are two static methods Add and Sub, which are called normally:

Copy code The code is as follows:

alert(MyMath.Add(3, 5)) //Result 8

Okay, now what if MyMath adds two static methods (multiplication, division), and do not modify the previously written objects. We could do this before:
Copy code The code is as follows:

//Add a new static method: Mul multiplication
MyMath[ "Mul"] = function(a, b){
return a * b;
}
//Added a new static method: Div division
MyMath["Div"] = function(a , b){
return a / b;
}

In this way, we add two methods to MyMath: Mul and Div. Normal call:
Copy code The code is as follows:

alert(MyMath.Add(3, 5 )) //Result 8
alert(MyMath.Mul(3, 5)) //Result 15

However, the way to add the method just now is a bit clumsy, and you have to write it every time you add a method One-time object name (MyMath), can we declare an object through the Json structure like we did when we created the object before?
The answer is of course yes, it can be easily done by simulating the JQuery.extend function. The following extracts the JQuery.extend function and changes the function name:
Copy the code The code is as follows:

MyMath.extend = function(){
// copy reference to target object
var target = arguments[0] ||
{}, i = 1, length = arguments.length, deep = false, options;
// Handle a deep copy situation
if (typeof target === "boolean") {
deep = target;
target = arguments[1] ||
{} ;
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
if (typeof target !== "object" && !jQuery.isFunction(target))
target = {};
// extend jQuery itself if only one argument is passed
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 (var name in options) {
var src = target[name], copy = options[name];
// Prevent never-ending loop
if (target === copy)
continue;
// Recurse if we're merging object values ​​
if (deep && copy && typeof copy == = "object" && !copy.nodeType)
target[name] = jQuery.extend(deep, // Never move original objects, clone them
src || (copy.length != null ? [] : {}), copy);
// Don't bring in undefined values ​​
else
if (copy !== undefined)
target[name] = copy;
}
// Return the modified object
return target;
};

Now we use this extend method to add our methods (multiplication, division):
Copy code The code is as follows:

MyMath.extend({
Mul: function(a, b){
return a * b;
},
Div: function(a, b){
return a / b;
}
});

This structure is more clear at a glance.
Please note the source for reprinting: http://www.cnblogs.com/wbkt2t
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn