深入理解 JS 参数传递

由于在 JavaScript 中访问变量的方式有两种：按值访问及按引用访问，那么参数传递是以是什么方式传递的呢？

在《JavaScript 高级程序设计》一书中有写到：

ECMAScript 中所有函数的参数都是按值传递的。也就是说，把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。基本类型值的传递如同基本类型变量的复制一样，而引用类型值的传递，则如同引用类型变量的复制一样。

（P70 页）

那么我们就通过几个例子来分析看一下。

传入基本类型

function add(num) {  num = num + 1;  return num;}
var count = 0;
console.log(add(count)) // 1console.log(count) // 0

这里我们声明了一个变量 count，然后调用 add 函数，传入 count，此时相当于把 count 复制了一份，赋值给 num，各自占用单独的空间：

因此在 add 函数内部对 num 的修改，并不会影响到原来的 count：

上面演示的是一个基本类型，那么如果传入的是一个引用类型呢？

传入引用类型

首先来看第一个例子：

function foo(o) {  o = {b: 1};  return o;}
var obj = {a: 1};
console.log(foo(obj)); // {b: 1}console.log(obj); // {a: 1}

通过运行结果，看起来传入引用类型貌似也是复制了一份，对原来的并未有影响？

首先看一下引用类型的存储方式：

引用类型在栈空间中存储的实际上是一个指针，指向堆内存中实际存储的位置。

当 obj 传入 foo 函数内部，对于值也是复制了一份，只不过是指向同样的堆空间，他们的引用还是一样的。

但是在 foo 函数内部，对于 o 的修改实际上是赋值操作，直接覆盖，指向了新的地址，因此对于 obj 并没有影响，如图所示：

然后再来看下一个例子：

function foo(o) {  o.a = 2;  return o;}
var obj = {a: 1};
console.log(foo(obj)); // {a: 2}console.log(obj); // {a: 2}

由于在函数 foo 内部执行 o.a = 2，修改的是堆空间中的对象，而这个对象和 obj 共享，因此也影响到了 obj 的变化：

总结

通过以上分析，我们可以知道 JavaScript 中的所有参数传递均为值传递，存在一个值复制的过程，基本类型直接复制出新的值，而引用类型复制的是指针，指向堆空间中的实际存储对象。

思考：可以分析下如下代码中各个 console.log 的输出结果

var obj = {n:1};
(function(obj){  console.log(obj.n)  obj.n=3;  var obj = {n:2};  console.log(obj.n)})(obj);
console.log(obj.n)

Ok, 以上就是关于 JS 中参数传递的一些总结😯。

Photo by Brooke Cagle on Unsplash