深入理解JavaScript引用數據類型

一、定義引用數據類型

JavaScript中有兩種數據類型：原始數據類型和引用數據類型。原始數據類型包括：字符串、數字、布爾值、null、undefined以及ES6新增的Symbol類型。而引用數據類型則包括了：對象、數組、函數、正則表達式、日期等。

引用數據類型與原始數據類型不同的是，引用數據類型的值在內存中是存儲在堆內存中，而在變量中保存的是一個指向堆內存的指針（即引用）。

let obj = {name:"John", age:30};
let newObj = obj; 
obj.age = 40;

console.log(newObj.age);   // 40

上面的代碼中，newObj和obj都引用了同一個對象，所以當修改obj的屬性時，通過newObj也能看到這個變化。

在JavaScript中，函數參數都是按值傳遞的，但當參數是引用類型時，傳遞的是這個引用的地址。所以函數內部修改這個引用所指向的對象是可以被調用者看到的。

let obj = {name:"John", age:30};

function changeAge(obj) {
  obj.age = 40;
}

changeAge(obj);
console.log(obj.age);   // 40

上面的代碼中，changeAge函數內部修改了傳遞進來的obj對象的age屬性，所以在函數外部也能看到這個變化。

在JavaScript中，對象的賦值操作其實是一個淺拷貝的過程，也就是說新對象中的屬性和原對象中的屬性指向的是同一個引用。如果需要複製一個對象的所有屬性，可以使用一些方法來進行深拷貝。

下面是一個簡單的淺拷貝的例子：

let obj = {name:"John", age:30};
let newObj = obj; 

console.log(newObj === obj);   // true

可以看到newObj和obj相等，因為它們指向的是同一個對象。

而下面是一個深拷貝的例子：

let obj = {name:"John", age:30};
let newObj = JSON.parse(JSON.stringify(obj)); 

console.log(newObj === obj);   // false

可以看到newObj和obj不相等，因為它們指向的是兩個不同的對象。

數組也是JavaScript中的一個引用類型，和對象一樣，對數組的賦值也是一個淺拷貝的過程。

let arr1 = [1, 2, 3];
let arr2 = arr1;

arr1[0] = 4;
console.log(arr2[0]);   // 4

上面的代碼中，修改了arr1的第一個元素，通過arr2也能看到這個變化。因為arr1和arr2指向的是同一個數組。

JavaScript中的函數也是一個引用類型，函數名也可以看做是一個變量名，用來引用函數的地址。可以將函數作為參數傳遞給另一個函數，也可以將函數作為另一個函數的返回值。

function foo() {
  console.log("I am foo");
}

function bar(fn) {
  fn();
}

bar(foo);   // I am foo

上面的代碼中，將foo函數作為參數傳給了bar函數，結果就可以執行foo函數。

本文通過多個方面詳細地闡述了JavaScript中的引用數據類型，包括引用數據類型的定義、傳遞、淺拷貝和深拷貝、數組和函數的引用等方面。希望本文能幫助讀者更好地理解JavaScript的引用數據類型。

原創文章，作者：UITHL，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/351761.html