用浅/深拷贝和HTML5方法解决js对象的引用的问题

Posted 2020-08-27 Jen Ho

先来看一个例子

例一：

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(){
    var b={};
    for(var attr in a){
        b[attr]=a[attr]
    }    
   return b  
}
b.name=‘hi‘;
alert(a.name); //这时的结果就是hello了
        

上面的方法叫浅拷贝，利用for in 把a中属性拷贝给b，但是只是拷贝了一个副本，实际上当修改b的值是不会改变a的值的。当然有浅拷贝就有深拷贝。

var a={
     name:‘{value:‘world‘}‘          
}
function copy(){
    var b={};
    for(var attr in a){
        b[attr]=a[attr];
    }    
   return b  
}
b.name.value=‘space‘;
alert(a.name.value); //这时的结果是space

这时候大家或许或纳闷，用了拷贝了怎么结果还是space呢！因为JSON里面又有一个 value:‘world‘ 这个类型是一个对象，你拷贝过来还是对象，还是对象的引用，所以结果就是space，当然了，或许有会说那就再用一次copy就行。由结果再调用一次copy，对了，就是递归的含义，在函数内部调用函数本身。稍微修改一下程序即可

var a={
     name:‘{value:‘world‘}‘          
}
function deepCopy(){
     if(typeof a!=‘object‘){
        return a
    }   
    var b={};
    for(var attr in a){
        b[attr]=deepCopy(a[attr]);
    }    
   return b  
}
b.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>