简单例子
代码如下 | 复制代码 |
// 浅层复制(只复制顶层的非 object 元素) 测试如下: var obj1 = { var obj2 = $.extend(true, {}, obj1); console.log(obj1); |
obj2 内部元素的值改变之后,如果 obj1 的相应值保持不变,就说明复制成功。
ExtJS 也有类似的方法 Ext.apply,因此单独用 ExtJS 应该也能实现同样的功能。
后面在项目中原来使用了前端同学自己写的一个扩展 jQuery 的类库,而里边有些方法却没有实现,如live等。加上我们后台开发人员在项目中又使用了 jQuery,感觉显得很冗余。里边有个扩展的克隆对象的方法,如下:
代码如下 | 复制代码 |
/** 复制一个Object对像 * @param {Object} obj 要复制的Object对像 * @return {Object} 返回新对像 * @static */ clone: function (obj) { var objClone; if (obj instanceof Array) { objClone = []; for (var i = 0; i < obj.length; i++) objClone[i] = Js.clone(obj[i]); return objClone; } else if (obj instanceof Object) { if (obj.constructor == Object) { objClone = new obj.constructor(); } else { objClone = new obj.constructor(obj.valueOf()); } for (var key in obj) { if (objClone[key] != obj[key]) { if (typeof (obj[key]) == 'object') { objClone[key] = Js.clone(obj[key]); } else { objClone[key] = obj[key]; } } } objClone.toString = obj.toString; objClone.valueOf = obj.valueOf; return objClone; } return obj; } |
于是又得后台开发人员将所有引用的地方换成了使用jQuery实现,将这个方法改成了jQuery扩展,如下:
代码如下 | 复制代码 |
$.extend({ cloneObj: function (obj) { var objClone; if (obj instanceof Array) { objClone = []; for (var i = 0; i < obj.length; i++) objClone[i] = $.cloneObj(obj[i]); return objClone; } else if (obj instanceof Object) { if (obj.constructor == Object) { objClone = new obj.constructor(); } else { objClone = new obj.constructor(obj.valueOf()); } for (var key in obj) { if (objClone[key] != obj[key]) { if (typeof (obj[key]) == 'object') { objClone[key] = $.cloneObj(obj[key]); } else { objClone[key] = obj[key]; } } } objClone.toString = obj.toString; objClone.valueOf = obj.valueOf; return objClone; } return obj; } }); |
试了下是没问题的,但总感觉有些多余。在What is the most efficient way to clone a JavaScript object?看到jQuery作者John Resig给出的回答是这样的。
代码如下 | 复制代码 |
// Shallow copy // Deep copy |
可见,又是我们在造轮子了。自己扩展jQuery类库想法是好的,但想维护好不是一个人所能完成的,毕竟很多时候还要忙其他的项目。