1.JavaScript中常见的赋值和引用
1.案例一:典型的赋值操作
var dog = 66 ;
var cat = dog ;
cat += 33 ;
alert(cat);//99
alert(dog);//66
2.案例二:对象引用导致值得更改
var horse = [1,2,3];
var bull = horse ;
bull.push(4);
alert(bull);//[1,2,3,4]
alert(horse);//[1,2,3,4]
3.案例三:对象引用指针发生变化
var donkey = [9,8]
var mule = donkey ;
mule = [6,5];
alert(mule);//[6,5]
alert(donkey);//[9,8]
2.对象浅拷贝
通过以上三个案例可以发现值得引用通常不会出现问题,但是在JavaScript中对象的引用经常会出现对象中的值也会出现引用的问题。在实际程序中经常有这样的需求:拷贝一个对象给另外一个对象实现数据的操纵功能,例如下面的案例:
var American = {
state:'New York'
};
var China = American ;
China.state = 'Beijing';
alert(American.state);//Beijing
alert(China.state);//Beijing
通过上面的案例发现对象中的属性值被改变了,这也太不符合常理了,我们要的效果是对象引用的时候不对源对象产生污染,怎样做到呢?
var American = {
state:'New York'
};
function copyObj(srcObj){
var targetObj = {};
for(var attr in srcObj){
targetObj[attr] = srcObj[attr];
}
return targetObj ;
}
var China = copyObj(American);
China.state = 'Shanghai';
alert(American.state);//New York
alert(China.state);//Shanghai
上述案例已经解决了对象的引用的问题,其实上述案例就是大名鼎鼎的‘对象浅拷贝’。但是浅拷贝本身还是存在问题的,如果对象有多层的嵌套,那么就会出现内层嵌套对象还是会出现引用的问题,如何解决呢?深度拷贝
3.对象深度拷贝
var American = {
state: {
street:'Broadway'
}
};
function deepCopyObj(srcObj){
var targetObj = {};
if(typeof srcObj != 'object'){
return srcObj ;
}
for(var attr in srcObj){
targetObj[attr] = deepCopyObj(srcObj[attr]);
}
return targetObj ;
}
var China = deepCopyObj(American);
China.state.street = 'BeijingRoad';
alert(American.state.street);//Broadway
alert(China.state.street);//BeijingRoad
上面的深度拷贝中使用了递归的方法解决了问题,至此JavaScript中的对象引用问题已经完美解决。
参考
1.JavaScript原始值和对象引用
2.ECMAScript 对象应用
3.javascript对象引用与赋值
4.知乎JavaScript对象引用讨论