zoukankan      html  css  js  c++  java
  • 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'];这两个对象里的引用的独立拷贝的,不指向同一个地方。
    
     
  • 相关阅读:
    只因写了一段爬虫,公司200多人被抓!
    中国顶级程序员图鉴
    漫画 | 外行对程序员误会有多深!
    关于深夜技术事故纪实录的若干问题回复
    富士康14跳被我赶上了,流水线车间真的没有梦想 | 十年系列
    祖国和我们小山村的希望
    互联网从此没有 BAT
    程序员,职场上请远离这种人!
    HTML5漂亮实用的电子书
    这个jQuery导航菜单怎么样
  • 原文地址:https://www.cnblogs.com/1549983239yifeng/p/14431145.html
Copyright © 2011-2022 走看看