JavaScript 函数参数按值传递

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的值是同一个地址，指向的是同一块内存空间，所以函数内部的改变影响了外部的对象。

再看一个例子

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

明明函数中对象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。

JavaScript 函数参数按值传递

猜你喜欢