為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。
JavaScript有5種基本的資料型別，分別是：布林、null、undefined、String和Number。這些基本型別在賦值的時候是通過值傳遞的方式。值得注意的是還有另外三種型別: Array、Function和Object，它們通過引用來傳遞。從底層技術上看，它們三都是物件。
基本資料型別
如果一個基本的資料型別繫結到某個變數，我們可以認為該變數包含這個基本資料型別的值。
var x = 10;
var y = 'abc';
var z = null;
複製程式碼當我們使用=將這些變數賦值到另外的變數，實際上是將對應的值拷貝了一份，然後賦值給新的變數。我們把它稱作值傳遞。
var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log(x, y, a, b) // 10, 'abc', 10, 'abc'
複製程式碼a和x都包含10，b和y都包含'abc'，並且它們是完全獨立的拷貝，互不干涉。如果我們將a的值改變，x不會受到影響。
var x = 10;
var y = 'abc';
var a = x;
var b = y;
a = 5;
b = 'def';
console.log(x, y, a, b); // 10, 'abc', 5, 'def'
複製程式碼物件
如果一個變數繫結到一個非基本資料型別(Array, Function, Object)，那麼它只記錄了一個記憶體地址，該地址存放了具體的資料。注意之前提到指向基本資料型別的變數相當於包含了資料，而現在指向非基本資料型別的變數本身是不包含資料的。
物件在記憶體中被建立，當我們宣告arr = []，我們在記憶體中建立了一個陣列。arr記錄的是該記憶體的地址。
var arr = []; // (a)
arr.push(1); // (b)
複製程式碼當執行完(a)之後，記憶體中建立了一個空的陣列物件，其記憶體地址為#001，arr指向該地址。
| 變數 | 地址 | 物件 |
|---|---|---|
| arr | #001 | [] |
當執行完(b)之後，陣列物件中多了一個元素，但是陣列的地址依然沒有變，arr也沒有變。
| 變數 | 地址 | 物件 |
|---|---|---|
| arr | #001 | [1] |
引用傳遞
物件是通過引用傳遞，而不是值傳遞。也就是說，變數賦值只會將地址傳遞過去。
var reference = [1];
var refCopy = reference;
複製程式碼| 變數 | 地址 | 物件 |
|---|---|---|
| reference | #001 | [1] |
| refCopy | #001 |
reference和refCopy指向同一個陣列。 如果我們更新reference，refCopy也會受到影響。
reference.push(2);
console.log(reference, refCopy); // [1, 2], [1, 2]
複製程式碼| 變數 | 地址 | 物件 |
|---|---|---|
| reference | #001 | [1, 2] |
| refCopy | #001 |
引用重新賦值
如果我們將一個已經賦值的變數重新賦值，那麼它將包含新的資料或則引用地址。
var obj = { first: 'fundebug.com'};
obj = { second: 'fundebug.cn'};
複製程式碼obj從指向第一個物件變為指向第二個物件。
| 變數 | 地址 | 物件 |
|---|---|---|
| obj | #001 | {first: 'fundebug.com'} |
| #002 | {second: 'fundebug.cn'} |
如果一個物件沒有被任何變數指向，就如第一個物件(地址為#001)，JavaScript引擎的垃圾回收機制會將該物件銷燬並釋放記憶體。
== 和 ===
對於引用型別的變數，==和===只會判斷引用的地址是否相同，而不會判斷物件具體裡屬性以及值是否相同。因此，如果兩個變數指向相同的物件，則返回true。
var arrRef = ['Hi!'];
var arrRef2 = arrRef;
console.log(arrRef === arrRef2); // true
複製程式碼如果是不同的物件，及時包含相同的屬性和值，也會返回false。
var arr1 = ["Hi!"];
var arr2 = ["Hi!"];
console.log(arr1 === arr2); // false
複製程式碼如果想判斷兩個不同的物件是否真的相同，一個簡單的方法就是將它們轉換為字串然後判斷。
var arr1str = JSON.stringify(arr1);
var arr2str = JSON.stringify(arr2);
console.log(arr1str === arr2str); // true
複製程式碼另一個方法就是遞迴地判斷每一個屬性的值，直到基本型別位置，然後判斷是否相同。
函式引數
當我們將基本型別資料傳入函式，函式會將這些資料拷貝賦值給函式的引數變數。
var hundred = 100;
var two = 2;
function multiply(x, y) {
return x * y;
}
var twoHundred = multiply(hundred, two);
複製程式碼hundred的值拷貝給變數x，two的值拷貝給變數y。
純函式
對於一個函式，給定一個輸入，返回一個唯一的輸出。除此之外，不會對外部環境產生任何附帶影響。我們機會稱該函式為純函式。所有函式內部定義的變數在函式返回之後都被垃圾回收掉。
但是，如果函式的輸入是物件(Array, Function, Object)，那麼傳入的是一個引用。對該變數的操作將會影響到原本的物件。這樣的程式設計手法將產生附帶影響，是的程式碼的邏輯複雜和可讀性變低。
因此，很多陣列函式，比如Array.map和Array.filter是以純函式的形式實現。雖然它們的引數是一個陣列變數，但是通過深度拷貝並賦值給一個新的變數，然後在新的陣列上操作，來防止原始陣列被更改。
我們來看一個例子：
function changeAgeImpure(person) {
person.age = 25;
return person;
}
var alex = {
name: 'Alex',
age: 30
};
var changedAlex = changeAgeImpure(alex);
console.log(alex); // { name: 'Alex', age: 25 }
console.log(changedAlex); // { name: 'Alex', age: 25 }
複製程式碼在非純函式changeAgeImpure中，將物件person的age更新並返回。原始的alex物件也被影響，age更新為25。
讓我們來看如何實現一個純函式：
function changeAgePure(person) {
var newPersonObj = JSON.parse(JSON.stringify(person));
newPersonObj.age = 25;
return newPersonObj;
}
var alex = {
name: 'Alex',
age: 30
};
var alexChanged = changeAgePure(alex);
console.log(alex); // { name: 'Alex', age: 30 }
console.log(alexChanged); // { name: 'Alex', age: 25 }
複製程式碼我們通過JSON.sringify將物件變為一個字串，然後再通過JSON.parse將字串變回物件。通過該操作會生成一個新的物件。
一道簡單的面試題
值傳遞和引用傳遞經常在面試中被問到，來嘗試回答一下如下程式碼如何輸出：
function changeAgeAndReference(person) {
person.age = 25;
person = {
name: 'John',
age: 50
};
return person;
}
var personObj1 = {
name: 'Alex',
age: 30
};
var personObj2 = changeAgeAndReference(personObj1);
console.log(personObj1); // -> ?
console.log(personObj2); // -> ?
複製程式碼關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了7億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！
版權宣告
轉載時請註明作者Fundebug以及本文地址：
blog.fundebug.com/2017/08/09/…