基本類型 & 引用類型

ECMAScript中的數據類型可分為兩種：

• 基本類型：undefined,null,Boolean,String,Number,Symbol
• 引用類型：Object,Array,Date,Function,RegExp等

不同類型的存儲方式：

• 基本類型：基本類型值在內存中占據固定大小，保存在棧內存中
• 引用類型：引用類型的值是對象，保存在堆內存中，而棧內存存儲的是對象的變量標識符以及對象在堆內存中的存儲地址

不同類型的復制方式：

• 基本類型：從一個變量向另外一個新變量復制基本類型的值，會創建這個值的一個副本，并將該副本復制給新變量

let foo = 1;
let bar = foo;
console.log(foo === bar); // -> true

// 修改foo變量的值并不會影響bar變量的值
let foo = 233;
console.log(foo); // -> 233
console.log(bar); // -> 1
復制代碼

• 引用類型：從一個變量向另一個新變量復制引用類型的值，其實復制的是指針，最終兩個變量最終都指向同一個對象

let foo = {
  name: 'leeper',
  age: 20
}
let bar = foo;
console.log(foo === bar); // -> true

// 改變foo變量的值會影響bar變量的值
foo.age = 19;
console.log(foo); // -> {name: 'leeper', age: 19}
console.log(bar); // -> {name: 'leeper', age: 19}
復制代碼

深拷貝 & 淺拷貝

• 淺拷貝：僅僅是復制了引用，彼此之間的操作會互相影響
• 深拷貝：在堆中重新分配內存，不同的地址，相同的值，互不影響

總的來說，深淺拷貝的主要區別就是：復制的是引用還是復制的是實例

深淺拷貝的實現

看一看原生JavaScript中提供的一些復制方法究竟是深拷貝還是淺拷貝以及動手實現深拷貝。

淺拷貝

• Array.prototype.slice()

let a = [1, 2, 3, 4];
let b = a.slice();
console.log(a === b); // -> false

a[0] = 5;
console.log(a); // -> [5, 2, 3, 4]
console.log(b); // -> [1, 2, 3, 4]
復制代碼

• Array.prototype.concat()

let a = [1, 2, 3, 4];
let b = a.concat();
console.log(a === b); // -> false

a[0] = 5;
console.log(a); // -> [5, 2, 3, 4]
console.log(b); // -> [1, 2, 3, 4]
復制代碼

看起來Array的slice(),concat()似乎是深拷貝，再接著看就知道它們究竟是深拷貝還是淺拷貝：

let a = [[1, 2], 3, 4];
let b = a.slice();
console.log(a === b); // -> false

a[0][0] = 0;
console.log(a); // -> [[0, 2], 3, 4]
console.log(b); // -> [[0, 2], 3, 4]
復制代碼

同樣，對于concat()也進行驗證:

let a = [[1, 2], 3, 4];
let b = a.concat();
console.log(a === b); // -> false

a[0][0] = 0;
console.log(a); // -> [[0, 2], 3, 4]
console.log(b); // -> [[0, 2], 3, 4]
復制代碼

綜上， Array的slice和concat方法并不是真正的深拷貝，對于Array的第一層的元素是深拷貝，而Array的第二層 slice和concat方法是復制引用。所以，Array的slice和concat方法都是淺拷貝。

深拷貝

• JSON.parse()和JSON.stringify()

1. JSON.stringify()：把一個js對象序列化為一個JSON字符串
2. JSON.parse()：把JSON字符串反序列化為一個js對象

let obj = {
  name: 'leeper',
  age: 20,
  friend: {
    name: 'lee',
    age: 19
  }
};
let copyObj = JSON.parse(JSON.stringify(obj));
obj.name = 'Sandman';
obj.friend.name = 'Jerry';
console.log(obj);
// -> {name: "Sandman", age: 20, friend: {age: 19,name: 'Jerry'}}
console.log(copyObj);
// -> {name: "leeper", age: 20, friend: {age: 19,name: 'lee'}}
復制代碼

綜上，JSON.parse()和JSON.stringify()是完全的深拷貝。

• 動手實現深拷貝 利用遞歸來實現對對象或數組的深拷貝。遞歸思路：對屬性中所有引用類型的值進行遍歷，直到是基本類型值為止。

function deepCopy(obj) {
  if (!obj && typeof obj !== 'object') {
    throw new Error('error arguments');
  }
  // const targetObj = obj.constructor === Array ? [] : {};
  const targetObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    
    //只對對象自有屬性進行拷貝
    if (obj.hasOwnProperty(key)) {
      if (obj[key] && typeof obj[key] === 'object') {
        targetObj[key] = deepCopy(obj[key]);
      } else {
        targetObj[key] = obj[key];
      }
    }
  }
  return targetObj;
}