JavaScript的值傳遞和引用傳遞

• 原文: Explaining Value vs. Reference in Javascript
• 譯者: Fundebug

爲了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原做者全部，翻譯僅用於學習。

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/…