JavaScript函数参数修改的三种方式及变量声明的影响

JavaScript函数参数修改机制概述

这一讨论源于一道笔试题的启发。在常规开发实践中，开发者通常避免在函数内部修改传入的参数值，但为了深入理解JavaScript的执行机制，这里对三种可以修改参数值的情形进行具体分析。

直接修改形参

第一种情形是直接修改函数声明时定义的形参。

function f1(a) {
alert(a);
a = 1;//修改形参a
alert(1 === a);
alert(1 === arguments[0]);
} 
f1(10);

在函数f1中定义了参数a，调用时传入参数10。执行流程先弹出10，随后将a修改为1。此时再次弹出两次true，表明形参a和arguments[0]的值均已同步更新为1。

通过arguments对象修改

第二种情形是通过函数内部的arguments对象来修改参数。

function f2(a) {
alert(a);
arguments[0] = 1;//修改arguments
alert(1 === a);
alert(1 === arguments[0]);
} 

其执行效果与函数f1相同，修改arguments[0]同样会同步更新形参a的值。

声明同名局部变量并赋值

第三种情形涉及函数内部声明的局部变量与形参同名。

function f3(a) {
alert(a);
var a = 1;//声明局部变量a且赋值为1
alert(1 === a);
alert(arguments[0]);
} 
f3(10);

在函数f3中定义了形参a，并在函数内部使用var声明了一个同名的局部变量a，同时赋值为1。尽管存在变量声明，此处的a仍然指向参数a。从最后弹出的arguments[0]被修改为1这一结果可以证明，形参与arguments对象的绑定关系依然有效。

仅声明局部变量不赋值的情况

4，若仅声明局部变量a而未赋值，情形则有所不同

function f3(a) {
var a;//仅声明，不赋值
alert(a);
alert(arguments[0]);
} 
f3(10);

此时弹出的值均为10，而不是undefined。这表明仅声明而不赋值的局部变量，其提升后的初始值即为形参传入的值，不会像赋值操作那样触发对arguments对象的同步修改机制。