關(guān)于JavaScript如何將值傳遞給函數(shù)，在互聯(lián)網(wǎng)上有很多誤解和爭論。大致認(rèn)為，參數(shù)為原始數(shù)據(jù)類時使用按值傳遞，參數(shù)為數(shù)組、對象和函數(shù)等數(shù)據(jù)類型使用引用傳遞。

按值傳遞 和 引用傳遞參數(shù) 主要區(qū)別簡單可以說：

• 按值傳遞：在函數(shù)里面改變傳遞的值不會影響到外面
• 引用傳遞：在函數(shù)里面改變傳遞的值會影響到外面

但答案是 JavaScript 對所有數(shù)據(jù)類型都使用按值傳遞。它對數(shù)組和對象使用按值傳遞，但這是在的共享傳參或拷貝的引用中使用的按值傳參。這些說有些抽象，先來幾個例子，接著，我們將研究JavaScript在 函數(shù)執(zhí)行期間的內(nèi)存模型，以了解實際發(fā)生了什么。

按值傳參

在 JavaScript 中，原始類型的數(shù)據(jù)是按值傳參;對象類型是跟Java一樣，拷貝了原來對象的一份引用，對這個引用進(jìn)行操作。但在 JS 中，string 就是一種原始類型數(shù)據(jù)而不是對象類。 

let setNewInt = function (i) {  
ii = i + 33;  
};  
let setNewString = function (str) {  
str += "cool!";  
};  
let setNewArray = function (arr1) {  
var b = [1, 2];  
arr1 = b;  
};  
let setNewArrayElement = function (arr2) {  
arr2[0] = 105;  
};  
let i = -33;  
let str = "I am ";  
let arr1 = [-4, -3];  
let arr2 = [-19, 84];  
console.log('i is: ' + i + ', str is: ' + str + ', arr1 is: ' + arr1 + ', arr2 is: ' + arr2);  
setNewInt(i);  
setNewString(str);  
setNewArray(arr1);  
setNewArrayElement(arr2);  
console.log('現(xiàn)在, i is: ' + i + ', str is: ' + str + ', arr1 is: ' + arr1 + ', arr2 is: ' + arr2);  

運(yùn)行結(jié)果 

i is: -33, str is: I am , arr1 is: -4,-3, arr2 is: -19,84 
 
現(xiàn)在, i is: -33, str is: I am , arr1 is: -4,-3, arr2 is: 105,84  

這邊需要注意的兩個地方:

1)***個是通過 setNewString 方法把字符串 str 傳遞進(jìn)去，如果學(xué)過面向?qū)ο蟮恼Z言如C#,Java 等，會認(rèn)為調(diào)用這個方法后 str 的值為改變，引用這在面向?qū)ο笳Z言中是 string 類型的是個對象，按引用傳參，所以在這個方法里面更改 str 外面也會跟著改變。

但是 JavaScript 中就像前面所說，在JS 中，string 就是一種原始類型數(shù)據(jù)而不是對象類，所以是按值傳遞，所以在 setNewString 中更改 str 的值不會影響到外面。

2)第二個是通過 setNewArray 方法把數(shù)組 arr1 傳遞進(jìn)去，因為數(shù)組是對象類型，所以是引用傳遞，在這個方法里面我們更改 arr1 的指向，所以如果是這面向?qū)ο笳Z言中，我們認(rèn)為***的結(jié)果arr1 的值是重新指向的那個，即 [1, 2]，但***打印結(jié)果可以看出 arr1 的值還是原先的值，這是為什么呢?

共享傳遞

Stack Overflow上Community Wiki 對上述的回答是：對于傳遞到函數(shù)參數(shù)的對象類型，如果直接改變了拷貝的引用的指向地址，那是不會影響到原來的那個對象;如果是通過拷貝的引用，去進(jìn)行內(nèi)部的值的操作，那么就會改變到原來的對象的。

可以參考博文 JavaScript Fundamentals (2) – Is JS call-by-value or call-by-reference? 

function changeStuff(state1, state2)  
{  
state1.item = 'changed';  
state2 = {item: "changed"};  
}  
var obj1 = {item: "unchanged"};  
var obj2 = {item: "unchanged"};  
changeStuff(obj1, obj2);  
console.log(obj1.item); // obj1.item 會被改變  
console.log(obj2.item); // obj2.item 不會被改變  

緣由: 上述的 state1 相當(dāng)于 obj1, 然后 obj1.item = 'changed'，對象 obj1 內(nèi)部的 item 屬性進(jìn)行了改變，自然就影響到原對象 obj1 。類似的，state2 也是就 obj2,在方法里 state2 指向了一個新的對象，也就是改變原有引用地址，這是不會影響到外面的對象(obj2)，這種現(xiàn)象更專業(yè)的叫法：call-by-sharing，這邊為了方便，暫且叫做 共享傳遞。

內(nèi)存模型

JavaScript 在執(zhí)行期間為程序分配了三部分內(nèi)存：代碼區(qū)，調(diào)用堆棧和堆。 這些組合在一起稱為程序的地址空間。

代碼區(qū)：這是存儲要執(zhí)行的JS代碼的區(qū)域。

調(diào)用堆:：這個區(qū)域跟蹤當(dāng)前正在執(zhí)行的函數(shù)，執(zhí)行計算并存儲局部變量。變量以后進(jìn)先出法存儲在堆棧中。***一個進(jìn)來的是***個出去的，數(shù)值數(shù)據(jù)類型存儲在這里。

例如： 

var corn = 95  
let lion = 100 

在這里，變量 corn 和 lion 值在執(zhí)行期間存儲在堆棧中。

堆：是分配 JavaScript 引用數(shù)據(jù)類型(如對象)的地方。 與堆棧不同，內(nèi)存分配是隨機(jī)放置的，沒有 LIFO策略。 為了防止堆中的內(nèi)存漏洞，JS引擎有防止它們發(fā)生的內(nèi)存管理器。 

class Animal {}  
// 在內(nèi)存地址 0x001232 上存儲 new Animal() 實例  
// tiger 的堆棧值為 0x001232  
const tiger = new Animal()  
// 在內(nèi)存地址 0x000001 上存儲 new Objec實例  
// `lion` 的堆棧值為 0x000001  
let lion = {  
strength: "Very Strong"  
}    

   

Here，lion 和 tiger 是引用類型，它們的值存儲在堆中，并被推入堆棧。它們在堆棧中的值是堆中位置的內(nèi)存地址。

激活記錄(Activation Record)，參數(shù)傳遞

我們已經(jīng)看到了 JS 程序的內(nèi)存模型，現(xiàn)在，讓我們看看在 JavaScript 中調(diào)用函數(shù)時會發(fā)生什么。 

// 例子一  
function sum(num1,num2) {  
var result = num1 + num2  
return result  
}  
var a = 90  
var b = 100  
sum(a, b)  

每當(dāng)在 JS 中調(diào)用一個函數(shù)時，執(zhí)行該函數(shù)所需的所有信息都放在堆棧上。這個信息就是所謂的激活記錄(Activation Record)。

這個 Activation Record，我直譯為激活記錄，找了好多資料，沒有看到中文一個比較好的翻譯，如果朋友們知道，歡迎留言。

激活記錄上的信息包括以下內(nèi)容:

• SP 堆棧指針：調(diào)用方法之前堆棧指針的當(dāng)前位置。
• RA 返回地址：這是函數(shù)執(zhí)行完成后繼續(xù)執(zhí)行的地址。
• RV 返回值：這是可選的，函數(shù)可以返回值，也可以不返回值。
• 參數(shù)：將函數(shù)所需的參數(shù)推入堆棧。
• 局部變量：函數(shù)使用的變量被推送到堆棧。

我們必須知道這一點(diǎn)，我們在js文件中編寫的代碼在執(zhí)行之前由 JS 引擎(例如 V8，Rhino，SpiderMonke y等)編譯為機(jī)器語言。

所以以下的代碼： 

let shark = "Sea Animal" 

會被編譯成如下機(jī)器碼： 

01000100101010  
01010101010101  

上面的代碼是我們的js代碼等價。 機(jī)器碼和 JS 之間有一種語言，它是匯編語言。 JS 引擎中的代碼生成器在最終生成機(jī)器碼之前，首先是將 js 代碼編譯為匯編代碼。

為了了解實際發(fā)生了什么，以及在函數(shù)調(diào)用期間如何將激活記錄推入堆棧，我們必須了解程序是如何用匯編表示的。

為了跟蹤函數(shù)調(diào)用期間參數(shù)是如何在 JS 中傳遞的，我們將例子一的代碼使用匯編語言表示并跟蹤其執(zhí)行流程。

先介紹幾個概念：

ESP：(Extended Stack Pointer)為擴(kuò)展棧指針寄存器，是指針寄存器的一種，用于存放函數(shù)棧頂指針。與之對應(yīng)的是 EBP(Extended Base Pointer)，擴(kuò)展基址指針寄存器，也被稱為幀指針寄存器，用于存放函數(shù)棧底指針。

EBP：擴(kuò)展基址指針寄存器(extended base pointer) 其內(nèi)存放一個指針，該指針指向系統(tǒng)棧最上面一個棧幀的底部。

EBP 只是存取某時刻的 ESP，這個時刻就是進(jìn)入一個函數(shù)內(nèi)后，cpu 會將ESP的值賦給 EBP，此時就可以通過 EBP 對棧進(jìn)行操作，比如獲取函數(shù)參數(shù)，局部變量等，實際上使用 ESP 也可以。 

// 例子一  
function sum(num1,num2) {  
var result = num1 + num2  
return result  
}  
var a = 90  
var b = 100  
var s = sum(a, b)  

我們看到 sum 函數(shù)有兩個參數(shù) num1 和 num2。函數(shù)被調(diào)用，傳入值分別為 90 和 100 的 a 和 b。

記住:值數(shù)據(jù)類型包含值，而引用數(shù)據(jù)類型包含內(nèi)存地址。

在調(diào)用 sum 函數(shù)之前，將其參數(shù)推入堆棧 

ESP->[......]  
ESP->[ 100 ]  
[ 90 ]  
[.......]  

然后，它將返回地址推送到堆棧。返回地址存儲在EIP 寄存器中: 

ESP->[Old EIP]  
[ 100 ]  
[ 90 ]  
[.......]  

接下來，它保存基指針 

ESP->[Old EBP]  
[Old EIP]  
[ 100 ]  
[ 90 ]  
[.......]  

然后更改 EBP 并將調(diào)用保存寄存器推入堆棧。 

ESP->[Old ESI]  
[Old EBX]  
[Old EDI]  
EBP->[Old EBP]  
[Old EIP]  
[ 100 ]  
[ 90 ]  
[.......]  

為局部變量分配空間： 

ESP->[ ]  
[Old ESI]  
[Old EBX]  
[Old EDI]  
EBP->[Old EBP]  
[Old EIP]  
[ 100 ]  
[ 90 ]  
[.......]  

這里執(zhí)行加法: 

mov ebp+4, eax ; 100  
add ebp+8, eax ; eaxeax = eax + (ebp+8)  
mov eax, ebp+16  
ESP->[ 190 ]  
[Old ESI]  
[Old EBX]  
[Old EDI]  
EBP->[Old EBP]  
[Old EIP]  
[ 100 ]  
[ 90 ]  
[.......]  

我們的返回值是190,把它賦給了 EAX。 

mov ebp+16, eax 

EAX 是"累加器"(accumulator), 它是很多加法乘法指令的缺省寄存器。

然后，恢復(fù)所有寄存器值。 

[ 190 ] DELETED  
[Old ESI] DELETED  
[Old EBX] DELETED  
[Old EDI] DELETED  
[Old EBP] DELETED  
[Old EIP] DELETED  
ESP->[ 100 ]  
[ 90 ]  
EBP->[.......]  

并將控制權(quán)返回給調(diào)用函數(shù)，推送到堆棧的參數(shù)被清除。 

[ 190 ] DELETED  
[Old ESI] DELETED  
[Old EBX] DELETED  
[Old EDI] DELETED  
[Old EBP] DELETED  
[Old EIP] DELETED  
[ 100 ] DELETED  
[ 90 ] DELETED  
[ESP, EBP]->[.......]  

調(diào)用函數(shù)現(xiàn)在從 EAX 寄存器檢索返回值到 s 的內(nèi)存位置。 

mov eax, 0x000002 ; // s 變量在內(nèi)存中的位置 

我們已經(jīng)看到了內(nèi)存中發(fā)生了什么以及如何將參數(shù)傳遞匯編代碼的函數(shù)。

調(diào)用函數(shù)之前，調(diào)用者將參數(shù)推入堆棧。因此，可以正確地說在 js 中傳遞參數(shù)是傳入值的一份拷貝。如果被調(diào)用函數(shù)更改了參數(shù)的值，它不會影響原始值，因為它存儲在其他地方，它只處理一個副本。 

function sum(num1) {  
num1 = 30  
}  
let n = 90  
sum(n)  
// `n` 仍然為 90  

讓我們看看傳遞引用數(shù)據(jù)類型時會發(fā)生什么。 

function sum(num1) {  
num1 = { number:30 }  
}  
let n = { number:90 }  
sum(n)  
// `n` 仍然是 { number:90 }  

用匯編代碼表示: 

n -> 0x002233  
Heap: Stack:  
002254 012222  
... 012223 0x002233  
002240 012224  
002239 012225  
002238  
002237  
002236  
002235  
002234  
002233 { number: 90 }  
002232  
002231 { number: 30 }  
Code:  
...  
000233 main: // entry point  
000234 push n // n 值為 002233 ，它指向堆中存放 {number: 90} 地址。 n 被推到堆棧的 0x12223 處.  
000235 ; // 保存所有寄存器  
...  
000239 call sum ; // 跳轉(zhuǎn)到內(nèi)存中的`sum`函數(shù)  
000240  
...  
000270 sum:  
000271 ; // 創(chuàng)建對象 {number: 30} 內(nèi)在地址主 0x002231  
000271 mov 0x002231, (ebp+4) ; // 將內(nèi)存地址為 0x002231 中 {number: 30} 移動到堆棧 (ebp+4)。(ebp+4)是地址 0x12223 ，即 n 所在地址也是對象 {number: 90} 在堆中的位置。這里，堆棧位置被值 0x002231 覆蓋?，F(xiàn)在，num1 指向另一個內(nèi)存地址。 
000272 ; // 清理堆棧  
...  
000275 ret ; // 回到調(diào)用者所在的位置(000240)  

我們在這里看到變量n保存了指向堆中其值的內(nèi)存地址。 在sum 函數(shù)執(zhí)行時，參數(shù)被推送到堆棧，由 sum 函數(shù)接收。

sum 函數(shù)創(chuàng)建另一個對象 {number：30}，它存儲在另一個內(nèi)存地址 002231 中，并將其放在堆棧的參數(shù)位置。 將前面堆棧上的參數(shù)位置的對象 {number：90} 的內(nèi)存地址替換為新創(chuàng)建的對象 {number：30} 的內(nèi)存地址。

這使得 n 保持不變。因此，復(fù)制引用策略是正確的。變量 n 被推入堆棧，從而在 sum 執(zhí)行時成為 n 的副本。

此語句 num1 = {number：30} 在堆中創(chuàng)建了一個新對象，并將新對象的內(nèi)存地址分配給參數(shù) num1。 注意，在 num1 指向 n 之前，讓我們進(jìn)行測試以驗證： 

// example1.js  
let n = { number: 90 }  
function sum(num1) {  
log(num1 === n)  
num1 = { number: 30 }  
log(num1 === n)  
}  
sum(n)  
$ node example1  
true  
false  

是的，我們是對的。就像我們在匯編代碼中看到的那樣。最初，num1 引用與 n 相同的內(nèi)存地址，因為n被推入堆棧。

然后在創(chuàng)建對象之后，將 num1 重新分配到對象實例的內(nèi)存地址。

讓我們進(jìn)一步修改我們的例子1： 

function sum(num1) {  
num1.number = 30  
}  
let n = { number: 90 }  
sum(n)  
// n 成為了 { number: 30 }  

這將具有與前一個幾乎相同的內(nèi)存模型和匯編語言。這里只有幾件事不太一樣。在 sum 函數(shù)實現(xiàn)中，沒有新的對象創(chuàng)建，該參數(shù)受到直接影響。 

...  
000270 sum:  
000271 mov (ebp+4), eax ; // 將參數(shù)值復(fù)制到 eax 寄存器。eax 現(xiàn)在為 0x002233  
000271 mov 30, [eax]; // 將 30 移動到 eax 指向的地址  

num1 是(ebp+4)，包含 n 的地址。值被復(fù)制到 eax 中，30 被復(fù)制到 eax 指向的內(nèi)存中。任何寄存器上的花括號 [] 都告訴 CPU 不要使用寄存器中找到的值，而是獲取與其值對應(yīng)的內(nèi)存地址號的值。因此，檢索 0x002233 的 {number: 90} 值。

看看這樣的答案：

原始數(shù)據(jù)類型按值傳遞，對象通過引用的副本傳遞。

具體來說，當(dāng)你傳遞一個對象(或數(shù)組)時，你無形地傳遞對該對象的引用，并且可以修改該對象的內(nèi)容，但是如果你嘗試覆蓋該引用，它將不會影響該對象的副本- 即引用本身按值傳遞： 

function replace(ref) {  
ref = {}; // 這段代碼不影響傳遞的對象  
}  
function update(ref) {  
ref.key = 'newvalue'; // 這段代碼確實會影響對象的內(nèi)容  
}  
var a = { key: 'value' };  
replace(a); // a 仍然有其原始值，它沒有被修改的  
update(a); // a 的內(nèi)容被更改  

從我們在匯編代碼和內(nèi)存模型中看到的。這個答案***正確。在 replace 函數(shù)內(nèi)部，它在堆中創(chuàng)建一個新對象，并將其分配給 ref 參數(shù)，a 對象內(nèi)存地址被重寫。

update 函數(shù)引用 ref 參數(shù)中的內(nèi)存地址，并更改存儲在存儲器地址中的對象的key屬性。

總結(jié)

根據(jù)我們上面看到的，我們可以說原始數(shù)據(jù)類型和引用數(shù)據(jù)類型的副本作為參數(shù)傳遞給函數(shù)。不同之處在于，在原始數(shù)據(jù)類型，它們只被它們的實際值引用。JS　不允許我們獲取他們的內(nèi)存地址，不像在C與C++程序設(shè)計學(xué)習(xí)與實驗系統(tǒng)，引用數(shù)據(jù)類型指的是它們的內(nèi)存地址。