Js 对象拷贝
对象的引用在js里面实在的太常见了。如果不注意这个问题,则往往会犯一些小白一样的错误。比如:
var pa = { name: 'huasheng', age: '20', address: { province: 'zzz', city: 'aaa' } }; function test(param){ var addr = param.address; addr.city = "bbb"; } test(obj); console.log(obj.address.city); // bbb
// 这里函数test里面的 addr = param.address 其实就产生了一个引用
// 本来以为的是把param的address重新赋给一个变量 addr,然后修改 addr 里面的值,不去影响param
// 但是实验结果发现,addr 和 param.address 两个其实是一个东西。
关于Js变量引用的问题,其实就是数据类型的问题。在Js里面,有两种数据类型:基础类型和引用类型
其中,Number, Boolean, String都是基础类型,引用类型包括:Object, Array, Function
大家也可以参考一下这篇文章:http://www.cnblogs.com/diva/
既然发现了问题,那当然要来解决问题。(下面主要针对的是Object和Array两种引用类型,在实际应用中,引用里面需要变化Function的需求不多,最多要求调用一下。)
其实,解决办法说白了,就是重新拷贝一份新的数据,如果是基础类型的,直接赋值就OK, 引用类型的需要拷贝一份出来。这里的拷贝都要求能够深层拷贝对象。
方案1:递归法
function deepCopy(result, source) { for (var key in source) { var copy = source[key]; if (source === copy) continue;//如window.window === window,会陷入死循环,需要处理一下 if (is(copy, "Object")) { result[key] = arguments.callee(result[key] || {}, copy); } else if (is(copy, "Array")) { result[key] = arguments.callee(result[key] || [], copy); } else { result[key] = copy; } } return result; function is(obj, type) { var toString = Object.prototype.toString; return (type === "Null" && obj === null) || (type === "Undefined" && obj === undefined ) || toString.call(obj).slice(8, -1) === type; } }
callee 的用法可以参见:JS 中的call,apply,bind 和 caller, callee
方案2:JSON序列化法
先把对象转成JSON格式的字符串,再将该字符串解析成新的对象。该方法可以一次性解决深层拷贝问题。简单易行。
var pa = { name: 'huasheng', age: '20', address: { province: 'zzz', city: 'aaa' } }; var b = JSON.parse(JSON.stringify(pa)); console.log(b); b.address.city = 'bbb'; console.log(b.address.city); // bbb console.log(pa.address.city); // aaa