随手记一记之【js 参数传递】

以前，遇到过这样一个问题：给函数传入一个对象，在函数内部修改了对象的值，外部的对象值也被改了。当时造成了一个不小的 bug，从那以后传入函数的对象我都会 cloneDeep 一下再使用。知道了这样使用会有问题，当时不知道为什么会有问题。今天在阅读《JavaScript 高级程序设计》一书时正好看到相关的章节，于是来捋一捋最终的原因。

复制变量

先从复制变量说起。js 变量分为基本类型（string、number、boolean、null、undefined、symbol）和引用类型（object）。基本类型的复制是直接将变量值复制一份，两个值是独立的，不会相互影响。

const a = 'aaa'
let b = a

b = 'bbb'

console.log(a) // aaa
console.log(b) // bbb

但是，引用类型的复制，只是复制了其引用。复制前后指向的都是同一个对象。

const a = {}
let b = a

b.name = 'name'

console.log(a) // {name: "name"}
console.log(b) // {name: "name"}

这里修改了 b的值后，a 的值也做了相应的改变。说明 a和 b 指向的是同一个对象。

参数传递

ECMAScript 中所有函数的参数都是按值传递的。也就是说，把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。

在给函数传参时，实际上是将传入的参数在函数内部复制一份，并赋值给函数的局部作用域内的参数变量。当传入的参数是基本类型时，函数内部修改参数不会影响外部。但是如果传入的是引用类型，则会修改外部的对象。

const a = 123
function f(a) {
  a = 321
  console.log(a) // 321
}
f(a)
console.log(a) // 123

函数 f 内部修改了a 的值，但是函数外部的变量 a 并未受影响。

const  a = {number: 123}
function f(a) {
  a.number = 321
  console.log(a) // {number: 321}
}
f(a)
console.log(a) // {number: 321}

传入的参数是 object 时，修改参数则会修改外部的变量 a。这样，就会有开发人员会认为

在局部作用域中修改的对象会在全局作用域中反映出来，就说明参数是按引用传递的。

其实并不是这样，再看一个例子：

const  a = {}
function f(b) {
  b.name = 'abc'
  b = {}
  b.name = 'cba'
}
f(a)
console.log(a) // {name: "abc"}

在这个例子中，函数 f 先给 a.name 赋值为 abc。然后给a 赋值为新的对象，再给 a.name 赋值为 cba。如果是按照引用传递，那么在 f 内部对参数 a 的 3次修改应该都会体现在外部变量 a 上。但是只有第一次的修改体现在外部变量 a 上。

来分析一下整个流程。

const  a = {} //申明一个变量 a，并为其赋值一个空对象。
function f(b) { //将外部传入的参数复制给参数 b
  b.name = 'abc' // 给 b.name 赋值为 abc，由于复制外部变量 a 其实只是复制引用。此时 a、b 都指向同一个对象。因此 a.name = b.name = 'abc'
  b = {} // 给b 赋值一个新的对象，此时 b 的指向是一个新的局部对象。此后对 b 的任何操作都不会反映到外部变量 a 上了。并且，这个局部对象在函数执行完毕后被立即销毁。
  b.name = 'cba' //给b.name 复制为 'cba',对外部变量没有任何影响
}
f(a) // 将变量 a 传入函数 f
console.log(a) // {name: "abc"}

总结

由此再次证明了，参数传递是按值传递的。这个过程中也解释了为什么函数内的对象参数修改会影响到函数外部。

因为，对象的复制是引用的复制而已。

参考

• 《JAVAScript 高级程序设计》P70