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指向的地方是一致的。

深克隆

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

• 思路方法：
  0. 遍历对象
  1. 判断是不是原始值 typeof() object, instanceof, toString(推荐）, constructor
  2. 判断是数组还是对象
  3. 建立相应的数组或对象
  4. 递归

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']；这两个对象里的引用的独立拷贝的，不指向同一个地方。

 

分类: JavaScript