The extend of JavaScript object is a common feature _javascript technique

Source: Internet
Author: User
Tags extend inheritance
Usually, the default value of the Parameter object is given in the function, at which time it is necessary to overwrite the parameters passed into the default parameters by extend, such as:
Code:
Copy Code code 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
};

A extend tool is given in the Jquery framework:
Jquery.extend (Target,obj1,[objn])
Extends an object with one or more other objects, returning the object being extended.
Used to simplify inheritance.
Extend one object with one or more others, returning the original, modified, object.
This is a great utility to simple inheritance.
return value--object
Parameters
Target (object): Objects to be modified.
Object1 (object): Objects to be merged into the first object.
Objectn (object): (optional) objects to be merged into the first object.
But the extend that is built into the framework has the obvious flaw that it is not possible to inherit objects from objects. Give an example to illustrate:
Code:
Copy Code code as follows:

var obj1 = {},
var obj2={name: "Karry", Email: "Karry@a.com", Tel:{hometel: "158255", Officetel: "02112585"}
Obj1 = $.extend ({},obj1, obj2);

Results obj1 only name and email attributes, and the Tel itself is an object, Tel Hometel and Officetel did not inherit the past.
My goal is to implement the ability to replicate (inherit) the child properties of the sub objects, no matter how deep they are nested.
First we take a look at the parameters of this method, with three parameters, target target object, source object, deep whether to copy (inherit) objects in the object, if deep is true, inherit all, False is the same as jquery, and do not inherit child objects.
Code:
Copy Code code as follows:

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

I only set the first parameter target to be a required parameter, and both source and deep are set to optional parameters. This will encounter a problem, if the use of only two parameters, how to confirm that the second parameter is the corresponding source or deep? So I need to determine the type of the second argument passed in.
Code:
Copy Code code as follows:

target = Target | | {}; Target defaults to NULL
var stype = typeof source;
If the type of the second argument is undefined or is a Boolean
if (stype = = ' undefined ' | | | stype = = ' Boolean ') {
Deep = Stype = = ' Boolean '? Source:false;
Source = target; Assign target to source,
target = this; This here refers to the object
}

Someone might have a problem with the last two lines of code, and I'm dealing with it this way. If both target and source two parameters exist and source is not a Boolean value, the contents of the source object are copied to target. Otherwise, the target object is copied to the object. Deep defaults to False.
To be on the safe side, we also need to judge if souce satisfies the above criteria, but it is not an object, or it is a function object (which involves some other problem) and we can't replicate it. This time we set the souce to an empty object, which is not a copy operation.
Code:
Copy Code code as follows:

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

Note: The function object also returns "Object" when performing the typeof operation, but we cannot copy it properly (at least not in my method), so I have to get rid of it.
The following is the cycle of replication. This uses recursion.
Code:
Copy Code code as follows:

var i=1,option;
The outer loop is to change the options in turn, set to target first, and then set to source
while (I <= 2) {
options = i = = 1? Target:source;
if (options!= null) {
The inner loop replicates the corresponding properties
for (var name in options) {
var src = target[name], copy = Options[name];
if (target = = copy)
Continue
If Deep is set to true and the property 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++;
}

This uses recursive methods to replicate objects in the object in turn. This function is done. All the code is as follows:
Code:
Copy Code code as follows:

/*
* @param {Object} target object.
* @param {Object} source object.
* @param {Boolean} deep whether to copy (inherit) objects 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;
};

Use examples:
Code:
Copy Code code 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);

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.