譯者按: 機智如你,應(yīng)該可以答對文末的面試題吧?如果不能,請好好學(xué)習(xí),天天編程:)
為了保證可讀性死姚,本文采用意譯而非直譯。另外勤篮,本文版權(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)我們使用=
將這些變量賦值到另外的變量坝锰,實際上是將對應(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'
堪夭,并且它們是完全獨立的拷貝愕把,互不干涉。如果我們將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引擎的垃圾回收機制會將該對象銷毀并釋放內(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)生任何附帶影響蛀骇。我們機會稱該函數(shù)為純函數(shù)。所有函數(shù)內(nèi)部定義的變量在函數(shù)返回之后都被垃圾回收掉读拆。
但是擅憔,如果函數(shù)的輸入是對象(Array, Function, Object),那么傳入的是一個引用檐晕。對該變量的操作將會影響到原本的對象暑诸。這樣的編程手法將產(chǎn)生附帶影響,是的代碼的邏輯復(fù)雜和可讀性變低辟灰。
因此个榕,很多數(shù)組函數(shù),比如Array.map
和Array.filter
是以純函數(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。
讓我們來看如何實現(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實時BUG監(jiān)控忆植。 自從2016年雙十一正式上線,F(xiàn)undebug累計處理了7億+錯誤事件,得到了Google朝刊、360耀里、金山軟件、百姓網(wǎng)等眾多知名用戶的認(rèn)可拾氓。歡迎免費試用冯挎!
版權(quán)聲明:
轉(zhuǎn)載時請注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/08/09/explain_value_reference_in_js/