js中的值传递和引用传递

怼烎@ 2024-04-18 06:40 75阅读 0赞

在js中值传递和引用传递是让人容易混淆的问题，下面我就来根据自己的理解来区分一下这两个传递方式：

## 值传递 ##

值传递是两个变量传递前后互补干扰，无法造成影响，下面代码举例说明

var a=7;
    function fuc(a){
      a++;
    }
    fuc(a)
    console.log(a);  //7

向上面这样，当我们给a赋值之后，在通过调用函数调用吧a的值自增，但是改变的a的值只是在函数中，没有改变函数外部的值，这种方式传递叫做值传递，实际的原理可以用堆栈解释一下：

当我们赋值a=7的时候，因为数据是基本数据类型，所以存在栈中，而函数fuc的值a是引用数据类型得数据所以存在堆中，而栈中只是存放一个地址，（基本数据类型有哪些，**number，string，boolean，null，undefined，symbol**以及未来ES10新增的**BigInt**(任意精度整数)七类。引用数据类型(Object类)有常规名值对的无序对象\{a:1\}，数组\[1,2,3\]，以及函数function()\{\}等）。如下图所示：

var a=7时；

![20190903154745199.png][]

fuc(a)时；

![2019090315482936.png][]

所以当我们打印a的值得时候a的值是保存在堆中的因而没有变。

## 引用传递 ##

值传递的时候通过函数调用之后如果没有在函数中找到所需要的值，会去函数外面找所需要的变量及其值，改变的过程如下：

代码：

var a=7;
    function fuc(){
    	a++
    }
    fuc(a);
    console.log(a); //8

堆栈中数据存储：

var a=7;

![20190903154745199.png][]

fuc(a)时，这时候因为函数中没有a变量，所以没有数据保存到堆栈中，所以函数就会去函数外面寻找，就会找到上图的栈中存贮的a=7，所以在函数调用的时候，改变的是函数外边的值，也就是存储在栈中的值。

或者换一种方式理解，代码如下：

function test(obj){
      obj.name = 'lili';
    }
    var tal = new Object();
    test(tal);
    console.log(tal);  //{name:'lili'}

当函数test创建的时候，会创建一个对象obj：

![20190903160400396.png][]

当我们创建一个空对象tal的时候：

![2019090316051948.png][]

test(tal)的时候：tal=obj,

![20190903161631728.png][]

当调用函数的时候，因为tal和obj都是引用数据类型，所以都把数据保存在堆中，栈中只是存一个地址，当我们赋值tal=obj的时候，这时就是把tal对象在栈中创建的地址指向改为和obj是一样的，都指向obj在堆中的内存数据，这种传递数据的方式叫做引用传递。

除此之外参数也是按照值传递的，具体代码如下：

function test(obj){
    	obj.name = 'lili';
    	var obj = new Object();
    	obj.name = 'kiki';
    }
    var tal = new Object();
    test(tal);
    console.log(tal);  //{name:'lili'}

堆栈中的存储数据过程如下：

![2019090316051948.png][]

然后函数调用：

![20190903161631728.png][]

当重新声明obj对象的时候，并且赋值之后：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70][]

这时候我们看到创建一个新对象，就相当于把obj的值放到一个新的堆中，改变对象obj的值之后，因为tal对象还是指向之前的obj的堆，所以数据没有改变，并且由此可以看出，对象的传递也是按照引用传递的方式来传递的。

[20190903154745199.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ad7a5fd41e9d488ca618e0dd9a6450ae.png
[2019090315482936.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9fff200f09cb43199589e524f123fcbb.png
[20190903160400396.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/25512a4f7e5e4b3d8411959b4db99a3a.png
[2019090316051948.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/163f37436aaa457f90e804f9449bdbf7.png
[20190903161631728.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4139671a57194a9c973bdf96039562d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c407c5252fbf4befb0351419d0c19ee2.png