以前，遇到過(guò)這樣一個(gè)問(wèn)題：給函數(shù)傳入一個(gè)對(duì)象，在函數(shù)內(nèi)部修改了對(duì)象的值，外部的對(duì)象值也被改了嵌屎。當(dāng)時(shí)造成了一個(gè)不小的 bug，從那以后傳入函數(shù)的對(duì)象我都會(huì) cloneDeep 一下再使用恍涂。知道了這樣使用會(huì)有問(wèn)題宝惰，當(dāng)時(shí)不知道為什么會(huì)有問(wèn)題。今天在閱讀《JavaScript 高級(jí)程序設(shè)計(jì)》一書(shū)時(shí)正好看到相關(guān)的章節(jié)再沧，于是來(lái)捋一捋最終的原因尼夺。
復(fù)制變量
先從復(fù)制變量說(shuō)起。js 變量分為基本類(lèi)型（string、number淤堵、boolean寝衫、null、undefined拐邪、symbol）和引用類(lèi)型（object）慰毅。基本類(lèi)型的復(fù)制是直接將變量值復(fù)制一份扎阶，兩個(gè)值是獨(dú)立的汹胃，不會(huì)相互影響。
const a = 'aaa'
let b = a
b = 'bbb'
console.log(a) // aaa
console.log(b) // bbb
但是东臀，引用類(lèi)型的復(fù)制着饥，只是復(fù)制了其引用。復(fù)制前后指向的都是同一個(gè)對(duì)象惰赋。
const a = {}
let b = a
b.name = 'name'
console.log(a) // {name: "name"}
console.log(b) // {name: "name"}
這里修改了 b的值后贱勃，a 的值也做了相應(yīng)的改變。說(shuō)明 a和 b 指向的是同一個(gè)對(duì)象谤逼。
參數(shù)傳遞
ECMAScript 中所有函數(shù)的參數(shù)都是按值傳遞的。也就是說(shuō)仇穗，把函數(shù)外部的值復(fù)制給函數(shù)內(nèi)部的參數(shù)流部，就和把值從一個(gè)變量復(fù)制到另一個(gè)變量一樣。
在給函數(shù)傳參時(shí)纹坐，實(shí)際上是將傳入的參數(shù)在函數(shù)內(nèi)部復(fù)制一份枝冀，并賦值給函數(shù)的局部作用域內(nèi)的參數(shù)變量。當(dāng)傳入的參數(shù)是基本類(lèi)型時(shí)耘子，函數(shù)內(nèi)部修改參數(shù)不會(huì)影響外部果漾。但是如果傳入的是引用類(lèi)型，則會(huì)修改外部的對(duì)象谷誓。
const a = 123
function f(a) {
a = 321
console.log(a) // 321
}
f(a)
console.log(a) // 123
函數(shù) f 內(nèi)部修改了a 的值绒障，但是函數(shù)外部的變量 a 并未受影響。
const a = {number: 123}
function f(a) {
a.number = 321
console.log(a) // {number: 321}
}
f(a)
console.log(a) // {number: 321}
傳入的參數(shù)是 object 時(shí)捍歪，修改參數(shù)則會(huì)修改外部的變量 a户辱。這樣，就會(huì)有開(kāi)發(fā)人員會(huì)認(rèn)為
在局部作用域中修改的對(duì)象會(huì)在全局作用域中反映出來(lái)糙臼，就說(shuō)明參數(shù)是按引用傳遞的庐镐。
其實(shí)并不是這樣，再看一個(gè)例子：
const a = {}
function f(b) {
b.name = 'abc'
b = {}
b.name = 'cba'
}
f(a)
console.log(a) // {name: "abc"}
在這個(gè)例子中变逃，函數(shù) f 先給 a.name 賦值為 abc必逆。然后給a 賦值為新的對(duì)象，再給 a.name 賦值為 cba。如果是按照引用傳遞名眉，那么在 f 內(nèi)部對(duì)參數(shù) a 的 3次修改應(yīng)該都會(huì)體現(xiàn)在外部變量 a 上粟矿。但是只有第一次的修改體現(xiàn)在外部變量 a 上。
來(lái)分析一下整個(gè)流程璧针。
const a = {} //申明一個(gè)變量 a嚷炉，并為其賦值一個(gè)空對(duì)象。
function f(b) { //將外部傳入的參數(shù)復(fù)制給參數(shù) b
b.name = 'abc' // 給 b.name 賦值為 abc探橱，由于復(fù)制外部變量 a 其實(shí)只是復(fù)制引用申屹。此時(shí) a、b 都指向同一個(gè)對(duì)象隧膏。因此 a.name = b.name = 'abc'
b = {} // 給b 賦值一個(gè)新的對(duì)象哗讥，此時(shí) b 的指向是一個(gè)新的局部對(duì)象。此后對(duì) b 的任何操作都不會(huì)反映到外部變量 a 上了胞枕。并且杆煞，這個(gè)局部對(duì)象在函數(shù)執(zhí)行完畢后被立即銷(xiāo)毀。
b.name = 'cba' //給b.name 復(fù)制為 'cba',對(duì)外部變量沒(méi)有任何影響
}
f(a) // 將變量 a 傳入函數(shù) f
console.log(a) // {name: "abc"}
總結(jié)
由此再次證明了腐泻，參數(shù)傳遞是按值傳遞的决乎。這個(gè)過(guò)程中也解釋了為什么函數(shù)內(nèi)的對(duì)象參數(shù)修改會(huì)影響到函數(shù)外部。
因?yàn)榕勺瑢?duì)象的復(fù)制是引用的復(fù)制而已构诚。
參考
- 《JAVAScript 高級(jí)程序設(shè)計(jì)》P70
