JavaScript 函数参数按值传递

不念不忘少年蓝@ 2022-05-26 01:14 284阅读 0赞

JavaScript 函数的参数按值传递 这句话基本上是耳熟能详的，这篇博客根据基本类型和引用类型，分别举例来加深对这句话的理解。

1、基本类型

var num = 10;
    function add10(n){
        n += 10;
        console.log(n);
    }
    function add20(n){
        n += 20;
        console.log(n);
    }
    add10(num);              //20
    add20(num);              //30
    console.log(num);        //10

在这个例子中，我们定义了两个函数，分别对参数对的值 +10 和 +20，调用时都将num作为参数传入。但是函数的执行并没有改变函数外部num的值。由此可以得出结论，JavaScript 函数的参数按值传递。

如果我们需要拿到函数中对参数计算后的结果，需要使用return语句

var num = 10;
    function add10(n){
        n += 10;
        return n;
    }
    function add20(n){
        n += 20;
        return n;
    }
    
    console.log(add20(add10(num)));  //40
    console.log(num);                //10
    
    num = add10(num);
    num = add20(num);
    console.log(num);                //40

2、引用类型

var object = {};
    function fun(obj){
        obj.name = 'latency';
    }
    fun(object)
    console.log(object.name);         //latency

在这个例子中，函数为参数obj增加了name属性，函数调用后，函数外部的object也被改变了。但此时函数的参数依旧是按值传递的，因为引用类型对的值是一个地址，参数按值传递以后，参数obj和外部对象object的值是同一个地址，指向的是同一块内存空间，所以函数内部的改变影响了外部的对象。

再看一个例子

明明函数中对象name属性的值变为了'cheng'， 为什么外部 object.name 的值是'latency'？

这是因为函数中的 obj = \{\}; 这条语句使用了赋值操作，其实是让 obj 指向了一个新的地址，也就是说，此时参数obj和函数外部的object是不同的地址，对obj的修改，自然不会再影响object。

对于数组的操作也是类似的

var arr1 = [1,2,3,4];
    var arr2 = [];
    function arrFun1(arr){
        arr.push(5);
    }
    function arrFun2(arr){
        arr = [1,2,3,4,5];
    }
    
    arrFun1(arr1)
    console.log(arr1)        //[1, 2, 3, 4, 5]
    
    arrFun2(arr2)
    console.log(arr2)        //[]

在函数 arrFun1() 中，参数 arr 和外部 arr1 指向同一块内存空间，互相影响。arrFun2()中，对参数 arr 进行了赋值操作，arr 的值变成了一个新的地址，所以不会再影响外部的arr2。