前端程序員必知的javascript值傳遞和引用傳遞

本文和大家分享的主要是javascript中值傳遞和引用傳遞相關(guān)內(nèi)容，一起來(lái)看看吧，希望對(duì)大家學(xué)習(xí)javascript有所幫助。

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

　　基本數(shù)據(jù)類(lèi)型

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

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

　　當(dāng)我們使用 = 將這些變量賦值到另外的變量，實(shí)際上是將對(duì)應(yīng)的值拷貝了一份，然后賦值給新的變量。我們把它稱(chē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 不會(huì)受到影響。

　　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'

　　對(duì)象

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

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

　　var arr = []; // (a)

　　arr.push(1); // (b)

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

　　變量地址對(duì)象

　　arr#001[]

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

　　變量地址對(duì)象

　　arr#001[1]

　　引用傳遞

　　對(duì)象是通過(guò)引用傳遞，而不是值傳遞。也就是說(shuō)，變量賦值只會(huì)將地址傳遞過(guò)去。

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

　　變量地址對(duì)象

　　reference#001[1]

　　refCopy#001

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

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

　　變量地址對(duì)象

　　reference#001[1, 2]

　　refCopy#001

　　引用重新賦值

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

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

　　obj = { second: 'fundebug.cn'};

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

　　變量地址對(duì)象

　　obj#001{first: ‘fundebug.com’}

　　#002{second: ‘fundebug.cn’}

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

　　== 和 ===

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

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

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

　　如果是不同的對(duì)象，及時(shí)包含相同的屬性和值，也會(huì)返回 false 。

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

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

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

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

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

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

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

　　當(dāng)我們將基本類(lèi)型數(shù)據(jù)傳入函數(shù)，函數(shù)會(huì)將這些數(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ù)

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

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

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

　　我們來(lái)看一個(gè)例子：

　　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 中，將對(duì)象 person 的 age 更新并返回。原始的 alex 對(duì)象也被影響， age 更新為25。

　　讓我們來(lái)看如何實(shí)現(xiàn)一個(gè)純函數(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 }

　　我們通過(guò) JSON.sringify 將對(duì)象變?yōu)橐粋€(gè)字符串，然后再通過(guò) JSON.parse 將字符串變回對(duì)象。通過(guò)該操作會(huì)生成一個(gè)新的對(duì)象。

　　一道簡(jiǎn)單的面試題

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

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

 

 

來(lái)源：Fundebug博客