JavaScript的值傳遞和引用傳遞-創(chuàng)新互聯(lián)

譯者按: 機(jī)智如你，應(yīng)該可以答對文末的面試題吧？如果不能，請好好學(xué)習(xí)，天天編程:)

晉中網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)從2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

• 原文: Explaining Value vs. Reference in Javascript

• 譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

JavaScript有5種基本的數(shù)據(jù)類型，分別是：布爾、null、undefined、String和Number。這些基本類型在賦值的時候是通過值傳遞的方式。值得注意的是還有另外三種類型: Array、Function和Object，它們通過引用來傳遞。從底層技術(shù)上看，它們?nèi)际菍ο蟆?/p>

基本數(shù)據(jù)類型

如果一個基本的數(shù)據(jù)類型綁定到某個變量，我們可以認(rèn)為該變量包含這個基本數(shù)據(jù)類型的值。

var x = 10;
var y = 'abc';
var z = null;

當(dāng)我們使用=將這些變量賦值到另外的變量，實(shí)際上是將對應(yīng)的值拷貝了一份，然后賦值給新的變量。我們把它稱作值傳遞。

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'，并且它們是完全獨(dú)立的拷貝，互不干涉。如果我們將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'

對象

如果一個變量綁定到一個非基本數(shù)據(jù)類型(Array, Function, Object)，那么它只記錄了一個內(nèi)存地址，該地址存放了具體的數(shù)據(jù)。注意之前提到指向基本數(shù)據(jù)類型的變量相當(dāng)于包含了數(shù)據(jù)，而現(xiàn)在指向非基本數(shù)據(jù)類型的變量本身是不包含數(shù)據(jù)的。

對象在內(nèi)存中被創(chuàng)建，當(dāng)我們聲明arr = []，我們在內(nèi)存中創(chuàng)建了一個數(shù)組。arr記錄的是該內(nèi)存的地址。

var arr = []; // (a)
arr.push(1); // (b)

當(dāng)執(zhí)行完(a)之后，內(nèi)存中創(chuàng)建了一個空的數(shù)組對象，其內(nèi)存地址為#001，arr指向該地址。

變量	地址	對象
arr	#001	[]

當(dāng)執(zhí)行完(b)之后，數(shù)組對象中多了一個元素，但是數(shù)組的地址依然沒有變，arr也沒有變。

變量	地址	對象
arr	#001	[1]

引用傳遞

對象是通過引用傳遞，而不是值傳遞。也就是說，變量賦值只會將地址傳遞過去。

var reference = [1];
var refCopy = reference;

變量	地址	對象
reference	#001	[1]
refCopy	#001

reference和refCopy指向同一個數(shù)組。 如果我們更新reference，refCopy也會受到影響。

reference.push(2);
console.log(reference, refCopy); // [1, 2], [1, 2]

變量	地址	對象
reference	#001	[1, 2]
refCopy	#001

引用重新賦值

如果我們將一個已經(jīng)賦值的變量重新賦值，那么它將包含新的數(shù)據(jù)或則引用地址。

var obj = { first: 'fundebug.com'};
obj = { second: 'fundebug.cn'};

obj從指向第一個對象變?yōu)橹赶虻诙€對象。

變量	地址	對象
obj	#001	{first: 'fundebug.com'}
	#002	{second: 'fundebug.cn'}

如果一個對象沒有被任何變量指向，就如第一個對象(地址為#001)，JavaScript引擎的垃圾回收機(jī)制會將該對象銷毀并釋放內(nèi)存。

== 和 ===

對于引用類型的變量，==和===只會判斷引用的地址是否相同，而不會判斷對象具體里屬性以及值是否相同。因此，如果兩個變量指向相同的對象，則返回true。

var arrRef = ['Hi!'];
var arrRef2 = arrRef;

console.log(arrRef === arrRef2); // true

如果是不同的對象，及時包含相同的屬性和值，也會返回false。

var arr1 = ["Hi!"];
var arr2 = ["Hi!"];

console.log(arr1 === arr2); // false

如果想判斷兩個不同的對象是否真的相同，一個簡單的方法就是將它們轉(zhuǎn)換為字符串然后判斷。

var arr1str = JSON.stringify(arr1);
var arr2str = JSON.stringify(arr2);

console.log(arr1str === arr2str); // true

另一個方法就是遞歸地判斷每一個屬性的值，直到基本類型位置，然后判斷是否相同。

函數(shù)參數(shù)

當(dāng)我們將基本類型數(shù)據(jù)傳入函數(shù)，函數(shù)會將這些數(shù)據(jù)拷貝賦值給函數(shù)的參數(shù)變量。

var hundred = 100;
var two = 2;
function multiply(x, y) {
    return x * y;
}
var twoHundred = multiply(hundred, two);

hundred的值拷貝給變量x，two的值拷貝給變量y。

純函數(shù)

對于一個函數(shù)，給定一個輸入，返回一個唯一的輸出。除此之外，不會對外部環(huán)境產(chǎn)生任何附帶影響。我們機(jī)會稱該函數(shù)為純函數(shù)。所有函數(shù)內(nèi)部定義的變量在函數(shù)返回之后都被垃圾回收掉。

但是，如果函數(shù)的輸入是對象(Array, Function, Object)，那么傳入的是一個引用。對該變量的操作將會影響到原本的對象。這樣的編程手法將產(chǎn)生附帶影響，是的代碼的邏輯復(fù)雜和可讀性變低。

因此，很多數(shù)組函數(shù)，比如Array.map和Array.filter是以純函數(shù)的形式實(shí)現(xiàn)。雖然它們的參數(shù)是一個數(shù)組變量，但是通過深度拷貝并賦值給一個新的變量，然后在新的數(shù)組上操作，來防止原始數(shù)組被更改。

我們來看一個例子：

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 }

在非純函數(shù)changeAgeImpure中，將對象person的age更新并返回。原始的alex對象也被影響，age更新為25。

讓我們來看如何實(shí)現(xiàn)一個純函數(shù)：

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將對象變?yōu)橐粋€字符串，然后再通過JSON.parse將字符串變回對象。通過該操作會生成一個新的對象。

一道簡單的面試題

值傳遞和引用傳遞經(jīng)常在面試中被問到，來嘗試回答一下如下代碼如何輸出：

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);

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計處理了7億+錯誤事件，得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用！

版權(quán)聲明

轉(zhuǎn)載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/08/09/explain_value_reference_in_js/

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標(biāo)題：JavaScript的值傳遞和引用傳遞-創(chuàng)新互聯(lián)
瀏覽地址：http://muchs.cn/article14/deehde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、搜索引擎優(yōu)化、外貿(mào)建站、電子商務(wù)、營銷型網(wǎng)站建設(shè)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)