JavaScript Object's extend is a commonly used function_javascript skills

Usually the default value of the parameter object is given in the function. At this time, you need to overwrite the incoming parameters into the default parameters through extend, such as:
Code:

Copy code The code is as follows:

giant.ui.imageshow = function(options) {
this.opts = $.extend({}, giant .ui.imageshow.defaults, options);
}
giant.ui.imageshow.defaults = {
id:"imageshow",
isAuto:true,
speed:3000
};

The Jquery framework provides an extend tool:
jQuery.extend(target,obj1,[objN])
Extend an object with one or more other objects Object, returns the expanded object.
Used to simplify inheritance.
Extend one object with one or more others, returning the original, modified, object.
This is a great utility for simple inheritance.
Return value--Object
Parameters
target (Object ): The object to be modified.
object1 (Object): The object to be merged into the first object.
objectN (Object): (optional) The object to be merged into the first object.
But the extend built into the framework has an obvious flaw, that is, it cannot inherit objects in objects. Let’s give an example to illustrate:
Code:

Copy code The code is as follows:

var obj1 = {},
var obj2={name:"karry",email:"karry@a.com",tel:{homeTel:"158255",officeTel:"02112585"}}
obj1 = $.extend({},obj1,obj2);

The result is that obj1 only has name and email attributes, while tel itself is an object, and homeTel and officeTel in tel are not inherited.
My goal is to realize the function of copying (inheriting) the sub-properties of sub-objects, no matter how deeply they are nested.
First, let’s take a look at the parameters of this method. There are three parameters, target target object, source source object, and deep whether to copy (inherit) the objects in the object. If deep is true, it will inherit all, if it is false, it will be the same as the jquery implementation. In the same way, child objects will not be inherited.
Code:

Copy code The code is as follows:

Object.extend = function(target , /*optional*/source, /*optional*/deep) {}

I only set the first parameter target as a required parameter, while source and deep are both optional parameters. . This will encounter a problem. If only two parameters are passed when using it, how to confirm whether the second parameter is the corresponding source or deep? So I need to determine the type of the second parameter passed in.
Code:

Copy code The code is as follows:

target = target || {} ; //target is empty by default
var sType = typeof source;
//If the type of the second parameter is undefined or a Boolean value
if( sType === 'undefined' || sType === 'boolean' ) {
deep = sType === 'boolean' ? source : false;
source = target; //Assign target to source,
target = this; //Here This refers to Object
}

Someone may have questions about the last two lines of code, this is how I handle it. If both parameters target and source exist, and source is not a Boolean value, then the contents of the source object are copied to the target. Otherwise, the target object is copied to the Object object. deep defaults to false.
For safety reasons, we also need to make a judgment. If source meets the above conditions, but it is not an Object object, or it is a Function object (this involves some other issues), we also There is no way to copy it. At this time, we set source to an empty Object, that is, no copy operation is performed.
Code:

Copy code The code is as follows:

if( typeof source !== 'object' && Object.prototype.toString.call(source) !== '[object Function]' )
source = {};

Note: When the Function object performs the typeof operation "object" will also be returned, but we can't copy it correctly (at least not in my method), so I have to eliminate it.
The following is a loop to copy. Recursion is used here.
Code:

Copy code The code is as follows:

var i=1,option;
// The outer loop is to modify the options in sequence, first set to target, and then set to source
while(i <= 2) {
options = i === 1 ? target : source;
if( options != null ) {
//The inner loop copies the corresponding attributes
for( var name in options ) {
var src = target[name], copy = options[name];
if(target === copy)
continue;
//If deep is set to true, and the attribute is an object
if(deep && copy && typeof copy === 'object' && !copy.nodeType)
//Recursion
target[name] = this.extend(src ||(copy.length != null ? [] : {}), copy, deep);
else if(copy !== undefined)
target[name] = copy;
}
}
i ;
}

The recursive method is used here to copy the objects in the object in sequence. This function is completed. The whole code is as follows:
Code:

Copy code The code is as follows:

/*
* @param {Object} target target object.
* @param {Object} source source object.
* @param {boolean} deep Whether to copy (inherit) the object in the object.
* @returns {Object} Returns a new object that inherits the properties of the source object.
*/
Object.extend = function(target, /*optional*/source, /*optional*/deep) {
target = target || {};
var sType = typeof source , i = 1, options;
if( sType === 'undefined' || sType === 'boolean' ) {
deep = sType === 'boolean' ? source : false;
source = target;
target = this;
}
if( typeof source !== 'object' && Object.prototype.toString.call(source) !== '[object Function]' )
source = {};
while(i <= 2) {
options = i === 1 ? target : source;
if( options != null ) {
for( var name in options ) {
var src = target[name], copy = options[name];
if(target === copy)
continue;
if(deep && copy && typeof copy === 'object' && !copy.nodeType)
target[name] = this.extend(src ||
(copy.length != null ? [] : {}), copy, deep) ;
else if(copy !== undefined)
target[name] = copy;
}
}
i ;
}
return target;
} ;

Usage example:
Code:

Copy code The code is as follows:

var source = {id:1, name:'Jack Source'}, target = {name:'Jack Target', gender:1,tel:{homeTel:"158255",officeTel:"02112585" }};
var newObj1 = Object.extend(target, source);