先来看一个例子
例一:
var a=[1,2,3];
var b=a;
b.push(4);
alert(b);//1,2,3,4
alert(a);//1,2,3,4
var a=[1,2,3];
var b=a;
b=[1,2,3,4]
alert(b);//1,2,3,4
alert(a);//1,2,3
这两种方法得出的结果是不一样的。
第一个程序,是对象的引用, 把a的值附给b,a与b之间是引用的关系,当两者之间是引用的关系时,改变任一变量,都会影响另一个变量。
第二个程序,只是对b的值改变,虽然b=a ,但是当改变b的值时,又重新建立了一个地址,这个地址与a无关,所以在改变b值时,与a无关,这有点类似于C中的指针
再来看一个例子
例二:
var a={
name:'hello'
};
var b=a;
b.name='hi';
alert(a.name);//当然了,这个结果肯定是hi
如何解决上面的问题呢?
var a={
name:'hello'
};
function copy(a){
var b={};
for(var attr in a){
b[attr]=a[attr]
}
return b
}
copy(a).name='hi';
alert(a.name); //这时的结果就是hello了
上面的方法叫浅拷贝,利用for in 把a中属性拷贝给b,但是只是拷贝了一个副本,实际上当修改b的值是不会改变a的值的。当然有浅拷贝就有深拷贝。
var a={
name:{value:'world'}
}
function copy(a){
var b={};
for(var attr in a){
b[attr]=a[attr];
}
return b
}
copy(a).name.value='space';
alert(a.name.value); //这时的结果是space
这时候大家或许或纳闷,用了拷贝了怎么结果还是space呢!因为JSON里面又有一个 value:'world' 这个类型是一个对象,你拷贝过来还是对象,还是对象的引用,所以结果就是space,当然了,或许有会说那就再用一次copy就行。由结果再调用一次copy,对了,就是递归的含义,在函数内部调用函数本身。稍微修改一下程序即可
var a={
name:{value:'world'}
}
function deepCopy(a){
if(typeof a!='object'){
return a
}
var b={};
for(var attr in a){
b[attr]=deepCopy(a[attr]);
}
return b
}
deepCopy(a).name.value='space';
alert(a.name.value); //这时的结果就是world
改的地方有两处,1、执行函数内部调用函数本身 b[attr]=deepCopy(a[attr]) 2、终止条件typeof a!='object' 就像上面说的,你用浅拷贝拷的是对象,终止条件就是检测类型不是对象的时候,返回a的值。这样就解决了问题。 上面的方法就是深拷贝。
例三:
现在了解了浅/深拷贝,想用HTML5方法去解决。在解决之前,我们很有必要去了解HTML5之前如何将字符串转换成js语句,如下:
var str='function task(){alert('hello')}'
var fn=eval(str);
task(); //hello
HTML5如何把JSON格式的字符串转成JSON对象,用JSON.parse() 如下:
var a='{
'name':'hello';
};'
var json=JSON.parse(a);
alert(json.name); //hello
这个name上加了 ' ' 不加' ' 是不严格的JSON,JSON.parse 方法要求必须是严格的JSON
如何将JSON对象转成JSON格式的字符串呢,用JSON.stringify() 如下:
var a={
name:'hello'
};
var json=JSON.stingify(a);
alert(json); // '{'name':'hello'}'
这时的结果就是 '{'name':'hello'}',这时候就明白了为什么要用严格的JSON格式了
那么用HTML5怎么解决问题呢,那就先把JSON转成字符串,再把JSON格式的字符换转成对象,实际上引用的还是a的副本,并没有真正引用a。这就和拷贝中的 副本原理是一样的。如下:
var a={
name:'hello'
};
var str=JSON.stringify(a);
var obj=JSON.parse(str);
var b=obj;
b.name='hi';
alert(a.name);//hello
拓展:
这种方法实际上在8以下是不兼容的,如何兼容呢,就是引用一个json文件:json2.js,如下
<script type='text/javascript' src='json2.js'></script>
|