引用赋值、浅拷贝、深拷贝

引用类型赋值

只是改变了指针的指向，值会跟着一起变化

引用类型浅拷贝

复制一层对象的属性，并不包括对象里面的为引用类型的数据，当改变拷贝的对象里面的引用类型时，源对象也会改变。

浅拷贝的实现

• 方式一：

// 只复制第一层的浅拷贝
function simpleCopy(obj1) {
   var obj2 = Array.isArray(obj1) ? [] : {};
   for (let i in obj1) {
   obj2[i] = obj1[i];
  }
   return obj2;
}
var obj1 = {
   a: 1,
   b: 2,
   c: {
         d: 3
      }
}
var obj2 = simpleCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
alert(obj1.a); // 1
alert(obj2.a); // 3
alert(obj1.c.d); // 4
alert(obj2.c.d); // 4

• 方式二：

var obj = {
    a: 1,
    b: 2
}
var obj1 = Object.assign({},obj);
boj1.a = 3;
console.log(obj.a) // 3

• 方式三： 扩展运算符

let obj1 = {
    'name': 'dj',
    'age': '24',
    'language': {
        "lang1": "chinese",
        "lang2": "english"
    }
}
let obj2 = { ...obj1 };    // 浅拷贝

引用类型深拷贝

重新开辟一个内存空间，需要递归拷贝对象里的引用，直到子属性都为基本类型。两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。

深拷贝的实现

• 1、方式一：

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);

• 2、方式二： 通过JSON对象来实现深拷贝

function deepClone2(obj) {
  var _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
  return objClone;
}
缺点： 无法实现对对象中方法的深拷贝，会显示为undefined

• 3、方式三： 通过jQuery的extend方法实现深拷贝

var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true为深拷贝，false为浅拷贝

• 4、方式四： lodash函数库实现深拷贝

let result = _.cloneDeep(test)

案例

let obj1 = {
    'name': 'dj',
    'age': '24',
    'language': {
        "lang1": "chinese",
        "lang2": "english"
    }
}
let obj2 = obj1;    // 赋值 只是改变了指针的指向，值会跟着一起变化
let obj3 = { ...obj1 };    // 浅拷贝
let obj4 = JSON.parse(JSON.stringify(obj1));    // 深拷贝

obj2.name = "dj1";

console.log("obj1.name: ", obj1.name)  // dj1
console.log("obj2.name: ", obj2.name)  // dj1

obj3.name = "dj2";

console.log("obj1.name: ", obj1.name)   // dj1
console.log("obj3.name: ", obj3.name);  // dj2

obj3.language.lang1 = "chinese1";

console.log("obj1.language: ", obj1.language);  // {lang1: "chinese1", lang2: "english"}
console.log("obj3.language: ", obj3.language);  // {lang1: "chinese1", lang2: "english"}

obj4.language.lang1 = "chinese2";

console.log("obj1.language: ", obj1.language);  // {lang1: "chinese1", lang2: "english"}
console.log("obj4.language: ", obj4.language);  // {lang1: "chinese2", lang2: "english"}