js-克隆(浅克隆 & 深克隆)

js-克隆

浅克隆

  • 浅克隆的对象的引用值是拷贝对象里的引用,这两个对象里面的引用(如对象里的数组或者内嵌对象)指向的地方是一致的。
	var obj = {
	  name:"chen",
	  age:18,
	  gender:"female",
	  card:['visa','cb'],
	  wife:{
		name:'abc',
		son:{
		  name:'hehe'
		}
	  }
	};
	var obj1 = {

	};
	
 function clone(origin,target){
      for(var prop in origin){
        if(origin.hasOwnProperty(prop)){
          target[prop] = origin[prop];
        }
      }
      return target;
    }
    clone(obj,obj1);
	obj1.name = 'ge';
	console.log(obj1.name);//ge
	console.log(obj.name);//chen
    obj1.card.push("abc");
    console.log(obj.card);//['visa','cb','abc'];因为浅克隆的对象的引用值是拷贝对象里的引用,这两个对象的card指向的地方是一致的。

深克隆

这两个对象里的引用的独立拷贝的,不指向同一个地方。
深克隆

  • 思路方法:
    1. 遍历对象
    2. 判断是不是原始值 typeof() object, instanceof, toString(推荐), constructor
    3. 判断是数组还是对象
    4. 建立相应的数组或对象
    5. 递归
function deepClone(origin, target){
      var target = target || {};
      var toStr = Object.prototype.toString;
      var arrStr = '[object Array]';
      for (var prop in origin){
        if(origin.hasOwnProperty(prop)){
          if(origin[prop] !== null && typeof(origin[prop]) == 'object'){
            // if(toStr.call(origin[prop]) == arrStr){
            //   target[prop] = [];
            // }else{
            //   target[prop] = {};
            // }
            target[prop] = (toStr.call(origin[prop])==arrStr) ? [] : {};
            deepClone(origin[prop],target[prop]);
          }else{
            target[prop] = origin[prop];
          }
        }
      }
      return target;
    }
    deepClone(obj,obj1);
    obj1.card.push("abc");
    console.log(obj.card);//['visa','cb'];这两个对象里的引用的独立拷贝的,不指向同一个地方。
 
 
posted @ 2021-02-22 16:36  天午正阳  阅读(80)  评论(0编辑  收藏  举报