引用賦值、淺拷貝、深拷貝

引用類型賦值

只是改變了指針的指向，值會跟着一起變化

引用類型淺拷貝

複製一層對象的屬性，並不包括對象裏面的爲引用類型的數據，當改變拷貝的對象裏面的引用類型時，源對象也會改變。

淺拷貝的實現

• 方式一：

// 只複製第一層的淺拷貝
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"}