一文詳解JavaScript中的按值傳遞和按引用傳遞

更新時間：2024年05月07日 11:01:51 作者：劉同學有點忙

編程語言中,把一個變量的值賦值給另一個變量,或者給函數(shù)調(diào)用傳遞參數(shù)有兩種方式：按值傳遞和按引用傳遞,本文將給大家詳細介紹JavaScript中的按值傳遞和按引用傳遞,需要的朋友可以參考下

JavaScript中幾乎都是按值傳遞

編程語言中，把一個變量的值賦值給另一個變量，或者給函數(shù)調(diào)用傳遞參數(shù)有兩種方式：按值傳遞和按引用傳遞。

JavaScript中幾乎都是按值傳遞。我們看一個例子：

let a = 1
let b = a
b = 2
console.log(a) // 1

上面的代碼，聲明了一個變量a，賦值為1；
然后又聲明了一個變量b，將變量a的值1賦值給變量b，此時變量b的值也是1；
接著我們將變量b的值修改為2；
此時打印變量a的值應該仍然是1，而不是2。

這就是按值傳遞，我們把變量a的值賦值給變量b的時候，只是把1這個值復制了一份給變量b，變量b的值的修改并不會影響到變量a的值。

很好，到目前為止，我們說上面的代碼是按值傳遞很好理解，很符合我們的直覺。

上面是基元值的情況，如果換成引用類型的值呢？看下面的代碼。

const foo = {
    a: 1
}
const bar = foo
bar.a = 2
console.log(foo.a) // 2

上面的代碼聲明了一個變量foo，給它賦值了一個對象；
然后又聲明了一個變量bar，把變量foo指向的對象賦值給變量bar；
接著我們通過bar.a把對象的屬性a修改為2；
我們發(fā)現(xiàn)foo.a也被修改了！

說好的按值傳遞呢？如果是按值傳遞，修改bar.a不應該導致foo.a被修改啊，這好像不太符合直覺??？難道引用類型的值是按引用傳遞嗎？

并不是。JavaScript中引用類型的值也是按值傳遞的，只不過這個傳遞的值是對象在堆內(nèi)存中的地址。

看上面的圖片可以更清楚地理解這個過程，假設對象在堆內(nèi)存中的地址是0x100，那么按值傳遞的就是0x100這個地址。bar.a修改了對象里屬性的值，但是foo和bar仍都然都指向地址0x100，所以通過bar.a修改對象屬性值會反應到foo.a上。

上面的圖只是一個粗略的方便理解的圖，下面的圖可能更符合代碼實際的內(nèi)存分布。

另外，仍然是上面的代碼，如果我們稍加改動，給變量bar賦值一個新的對象，那么變量foo和變量bar就指向不同的內(nèi)存地址了，修改變量bar將不再導致變量foo被修改。有些支持按引用傳遞的語言，類似的操作會導致變量foo也被修改，這個我不太了解，所以就不展開了。

const foo = {
    a: 1
}
let bar = foo
bar = {
    a: 2
}
console.log(foo.a) // 1

ES Module中的live bindings

前面我們說了，JavaScript中幾乎都是按值傳遞，這樣說通常都有例外。ES Module中export導出的變量被稱為live bindings（實時綁定），這是JavaScript中唯一按引用傳遞的情況。

// a.js
export let count = 1
export function increment() {
    count++
}

// b.js
import { count, increment } from './a.js'
console.log(count) // 1
// count = 2 // import的變量是只讀的，不能修改，嘗試修改會報錯 TypeError: Assignment to constant variable.
increment()
console.log(count) // ?

讓我們暫停下來，思考一下，上面的代碼中，第二個console.log(count)會輸出什么？

答案是2。ES Module中export的變量，其它模塊import進來之后是只讀的，嘗試修改會報錯。但是export變量的模塊可以另外導出一個方法用來修改這個變量，變量的修改會同步反應在兩個模塊中，這種情況被稱為live bindings，是按引用傳遞的。

上面類似的代碼在CommonJs中的執(zhí)行結(jié)果截然不同。

// a.js
let count = 1
function increment() {
    count++
}
module.exports = {
    count,
    increment
}

const { count, increment } = require('./a.js')
console.log(count) // 1
count = 2  // 可以修改
console.log(2) // 2
increment()
console.log(count) // 是2而不是3

require導入的變量是可以被修改的，上面的代碼中最后的console.log(count)的值是2而不是3，因為這里count是按值傳遞的。