繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript Object的extend是一个常用的功能
- Javascript
- JQuery 获取和设置Select选项的代码
- jQuery ctrl+Enter shift+Enter实现代码
- jQuery学习2 选择器的使用说明
- jQuery学习3：操作元素属性和特性
- jQuery学习4 浏览器的事件模型
- jQuery学习5 jQuery事件模型
- jQuery 学习6 操纵元素显示效果的函数
- jQuery学习7 操作JavaScript对象和集合的函数
- jQuery库与其他JS库冲突的解决办法
- JavaScript Event事件学习第一章 Event介绍
- JavaScript Event学习第二章 Event浏览器兼容性
- JavaScript Event学习第三章 早期的事件处理程序
- JavaScript Event学习第四章 传统的事件注册模型
- JavaScript Event学习第五章 高级事件注册模型
- JavaScript Event学习第六章 事件的访问
- JavaScript Event学习第七章 事件属性
- JavaScript Event学习第八章 事件的顺序
- js png图片(有含有透明)在IE6中为什么不透明了
- JavaScript 读取元素的CSS信息的代码
- 基于mootools的圆角边框扩展代码
Javascript 中的 JavaScript Object的extend是一个常用的功能
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 57 ::
收藏到网摘: n/a
对Object的extend是一个常用的功能。举一个例子，由于javascript 没有重载（overload），而且函数的参数类型是没有定义的，所以很多时候我们都传入一个对象来作为参数已方便控制。 通常在函数里面给了参数对象的默认值，这个时候就需要通过extend来把传入的参数覆盖进默认参数,如：
代码:
复制代码 代码如下:
giant.ui.imageshow = function(options) {
this.opts = $.extend({}, giant.ui.imageshow.defaults, options);
}
giant.ui.imageshow.defaults = {
id:"imageshow",
isAuto:true,
speed:3000
};
Jquery 的框架中给了一个extend工具：
jQuery.extend(target,obj1,[objN])
用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
用于简化继承。
Extend one object with one or more others, returning the original, modified, object.
This is a great utility for simple inheritance.
返回值--Object
参数
target (Object) : 待修改对象。
object1 (Object) : 待合并到第一个对象的对象。
objectN (Object) : (可选) 待合并到第一个对象的对象。
但框架中内置的这个extend有明显的缺陷，那就是不能继承对象中的对象。还是举一个例子来说明：
代码:
复制代码 代码如下:
var obj1 = {},
var obj2={name:"karry",email:"[email protected]",tel:{homeTel:"158255",officeTel:"02112585"}}
obj1 = $.extend({},obj1 ,obj2 );
结果obj1 只有name 和email属性，而有与tel本身就是一个对象，tel里面的homeTel和officeTel没有继承过去。
我的目标就是实现这种对子对象的子属性也一起复制(继承)的功能，不管他嵌套有多深。
首先我们看看这个方法的参数，有三个参数，target 目标对象，source 源对象，deep 是否复制(继承)对象中的对象，如果deep为true则继承所有，为false则和jquery的实现方式一样，不会继承子对象。
代码:
复制代码 代码如下:
Object.extend = function(target, /*optional*/source, /*optional*/deep) {}
我只把第一个参数target设为必选参数，而source 和deep都设为可选参数。这样就会遇到一个问题，如果使用的时候只传如两个参数，怎么确认第二个参数是 对应的source还是deep?所以我需要判断传入的第二个参数的类型。
代码:
复制代码 代码如下:
target = target || {}; //target默认为空
var sType = typeof source;
//如果第二个参数的类型为未定义或者为布尔值
if( sType === 'undefined' || sType === 'boolean' ) {
deep = sType === 'boolean' ? source : false;
source = target; //把target赋值给source，
target = this; //这里的this指的是Object
}
有人可能对最后面的两行代码有疑问，我的处理方式是这样的。如果target和source两个参数都存在，且source不是布尔值，那么，就把source对象的内容复制给target.否则，把target对象复制给Object对象。deep默认为false.
为了安全起见，我们还需要判断一下，如果souce满足了上面的条件，但它不是Object对象，或者它是一个Function对象(这涉及到一些其他的问题)，我们也没办法对其进行复制的。这个时候我们把souce设为空的Object,也就是并不进行复制操作。
代码:
复制代码 代码如下:
if( typeof source !== 'object' && Object.prototype.toString.call(source) !== '[object Function]' )
source = {};
注：Function对象在执行typeof 操作时 也会返回“object”,但我们没办法对其进行正确的复制（至少在我这个方法里面不行），所以我必须剔除出来。
下面就是循环进行复制了。这里利用了递归。
代码:
复制代码 代码如下:
var i=1,option;
// 外层循环就是为了把依次修改options，先设为target,后设为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;
//如果deep设为true,且该属性是一个对象
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++;
}
这里利用了递归的方式，依次复制对象里面的对象。这个功能就做完了。全部代码如下：
代码:
复制代码 代码如下:
/*
* @param {Object} target 目标对象。
* @param {Object} source 源对象。
* @param {boolean} deep 是否复制(继承)对象中的对象。
* @returns {Object} 返回继承了source对象属性的新对象。
*/
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;
};
使用示例：
代码:
复制代码 代码如下:
var source = {id:1, name:'Jack Source'}, target = {name:'Jack Target', gender:1,tel:{homeTel:"158255",officeTel:"02112585"}};
var newObj1 = Object.extend(target, source);
评论 (0) All
