本文深入解析JavaScript中函数参数的传递机制。通过对比基本数据类型与对象类型在函数调用时的行为差异,阐明为何修改基本类型参数不影响外部变量,而修改对象属性却能改变原值。文章结合代码实例,剖析内部副本变量与内存地址指向的关系,帮助开发者准确理解JS的值传递本质及引用类型操作后果。
JavaScript函数参数传递机制概述
在JavaScript中,函数参数的传递机制统一为按值传递。通常情况下,在函数内部修改参数变量的值,不会影响到函数外部对应的原始变量。例如:
'use strict';
var list = [1, 2, 3];
list.forEach(function(item) {
item ++;
});
console.log(list); // [ 1, 2, 3 ]
这一现象的原因在于,JavaScript在接收参数时,会创建一个等于参数值的副本变量。我们可以从JavaScript的执行逻辑层面进行分析:
'use strict';
var list = [1, 2, 3];
list.forEach(function(item, i) {
// 第一个item是副本,第二个item是数组元素list[i]
var item = item;
// 副本item++
item ++;
// 打印的是副本的值
console.log(item); // 2, 3, 4
});
// 原数组不会改变
console.log(list); // [ 1, 2, 3 ]
对象类型参数的传递行为分析
然而,当传递给函数的参数是一个对象时,情况会有所不同吗?
'use strict';var list = [{a: 1, b: 2}];
list.forEach(function(item) {
item.a ++;
});
console.log(list); // [ { a: 2, b: 2 } ]
观察发现,函数内部的操作竟然改变了函数外部变量的值。这又是基于什么原理呢?
接下来,我们逐步分析JavaScript执行这段代码的具体过程。
'use strict';
var list = [{a: 1, b: 2}];
list.forEach(function(item, i) {
// 第一个item是副本,第二个item是数组元素list[i]
var item = item;
// 此时item和list[i]指向的是同一地址,故两者完全一样
console.log(item === list[i]); // true
// 此时item.a++ 亦即 list[i].a++
item.a ++;
// list[i]的值已经改变
console.log(list[i]); // { a: 2, b: 2 }
});
console.log(list); // [ { a: 2, b: 2 } ]
那么,导致上述现象产生的根本原因是什么?
原因在于JavaScript中对象属于引用类型。执行 var item = item 这一步时,实际上是将 list[i] 的内存地址赋值给了 item。此时,两者指向同一个原始对象的地址。因此,通过其中任意一个变量修改值,实际上都是修改它们共同指向的那个对象。在示例中,通过 item.a++ 修改了原对象的属性 a,因此最终输出结果为 [ { a: 2, b: 2 } ]。
以上关于JavaScript函数按值传递参数的实例讲解到此结束,希望能为读者提供参考。