js中的函数是按值传递还是按引用传递

朱雀 2024-05-23 18:49 70阅读 0赞

#### 文章目录 ####

*  前置知识
 *  结论
 *  原因解析
 *   *  函数参数传递——基本类型
     *  函数参数传递——引用类型

--------------------

## 前置知识 ##

如果关于js中普通类型和引用类型这两种类型的变量在赋值时存在的不同的同学，可以看看下面链接给出的博客。

[js中关于普通类型的赋值和引用类型的赋值][js]

--------------------

## 结论 ##

js中的函数是按值传递的，不是按引用传递。

## 原因解析 ##

### 函数参数传递——基本类型 ###

首先给大家看一段js代码：

function f(n) {
        
      n = 2;
      console.log(n);//2
    }
    var num = 1;
    console.log(num);//1
    f(num);
    console.log(num);//1

在将外部的基本类型变量num传入函数之后，就算对函数内的命名参数（局部变量）的数值修改，外部的变量num的数值并未变化（之前是1，函数内局部变量修改成2，外部的它还是1）

如果是按引用传递，外部变量num自然会受到函数赋值的影响，变成2。

### 函数参数传递——引用类型 ###

function f(obj) {
        
      obj.num = 2;
      console.log(obj);//2
    }
    var obj = {
        num:1};
    console.log(obj);//{num: 1}
    f(obj);
    console.log(obj);//{num: 2}

从这里可以看到，函数内部对对象属性值的修改影响到了外部的对应对象。有些人其实是按照这个来认为函数参数的传递是按引用传递的，但这其实是错的，**它其实还是值的传递**。

为了说明方便，将上文的函数参数名称改为：`obj_`

如果是按照函数参数按照引用传递，那么上述代码的关系应该是这样的：  
![在这里插入图片描述][b31691b7759c40da9f3ad2128522caf2.png]  
那么真的是这样的吗，**如果是这样，我对将一个新的对象赋值给obj\_ ，obj对应的对象也应该发生改变。**

执行代码如下（如有怀疑可以自行打开控制台验证）：

执行结果：  
![在这里插入图片描述][fe526c8af79741679aaf0a7a466ab873.png]  
结果很显而易见，将新的对象赋值给函数内部的变量，这一结果并没有让变量obj的数值改变。

它们的关系应该是这样的：  
![在这里插入图片描述][ffc0fd9a46054ed386bea4c4526824c9.png]  
**外部的obj将其保存的对象地址的引用，函数参数同样保存这一对象地址的引用，二者指向了同一个对象**。上文的代码结果，是按值传递应该产生的结果。

--------------------

至此，结束。

`如果你觉得这篇文章写的不错，多多点赞~收藏吧！`

[js]: https://blog.csdn.net/Aer_7z/article/details/135836649?csdn_share_tail=%7B%22type%22:%22blog%22,%22rType%22:%22article%22,%22rId%22:%22135836649%22,%22source%22:%22Aer_7z%22%7D
[b31691b7759c40da9f3ad2128522caf2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/ecc7e6fac0f14f9bbc2f1ebc53de04c9.png
[fe526c8af79741679aaf0a7a466ab873.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/f0b4a71cb5754132a1e87dad60b2aea9.png
[ffc0fd9a46054ed386bea4c4526824c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/0bd3d8756b1b46a39db748b337372387.png