彻底弄懂函数形参与变量、函数的重名问题

1.函数与变量重名

例1：

console.log(foo);

function foo(){}

var foo = "变量";

 

输出为：

function foo(){}

代码实际是：

function foo(){}

var foo;

console.log(foo);

foo = "变量";

为什么会这样呢？原因很简单与变量对象的创建过程有关。

全局上下文中的变量对象

全局上下文环境包括变量对象，作用域链，this指针三部分

理解全局上下文环境的变量对象之前先了解一下全局对象

全局对象明确的定义：

全局对象(Global object) 是在进入任何执行上下文之前就已经创建了的对象。这个对象只存在一份，它的属性在程序中任何地方都可以访问，全局对象的生命周期终止于程序退出那一刻。

全局对象初始创建阶段将Math、String、Date、parseInt作为自身属性，等属性初始化，同样也可以有额外创建的其它对象作为属性（其可以指向到全局对象自身）。例如，在DOM中，全局对象的window属性就可以引用全局对象自身(当然，并不是所有的具体实现都是这样)：

global = {
    Math: <...>,
    String: <...>
    ...
    ...
    window: global //引用自身
｝

当访问全局对象的属性时通常会忽略掉前缀，这是因为全局对象是不能通过名称直接访问的。不过我们依然可以通过全局上下文的this来访问全局对象，同样也可以递归引用自身。例如，DOM中的window。综上所述，代码可以简写为：

String(10); // 就是global.String(10);
  
// 带有前缀
window.a = 10; // === global.window.a = 10 === global.a = 10;
this.b = 20; // global.b = 20;

因此，全局上下文中的变量对象——就是全局对象自己：

 

全局变量对象的创建过程如下：

1.函数提升：找到这个将要执行的函数内的所有函数声明，储存在变量对象中，属性名就是函数名，属性值就是函数的引用（所在的内存地址）。如果有多个同名的函数声明，后出现的函数覆盖前面的属性值。

2.变量提升：找到这个将要执行的函数内的所有变量声明，储存在变量对象中，属性名就是变量名，属性值是undefined。

 

从上面创建过程的顺序可以看出，函数提升优先级比变量提升要高，且不会被变量声明覆盖

所以第一个输出：function foo(){}

但是函数提升会被执行时的变量赋值覆盖。例如以下情况：

第二个输出：''变量''

console.log(foo);

function foo(){}

var foo = "变量";

console.log(foo);

输出：

function foo(){}

变量

2.函数形参与局部变量重名

例2：

function test(x){
    
    console.log(x);

    var x = 10;

    console.log(x);

}

test (40);

相当于：

function test(){

    var x = 40
    
    console.log(x);//40

    var x = 10;

    console.log(x);//10

}

test ();

输出： 

40

10

 

3.函数形参与内部函数重名

例3：

function test(x){

    console.log(x);

    function x() {};

}
test (40);

输出： 

ƒ x() {}

居然不是40？？？你把我的40弄那去了？王德发！很诡异是吧

 

想弄清楚这个，得了解：当一个函数被调用时发生了什么

第一步：

函数被调用

第二步：

执行引擎创建一个函数执行上下文环境。执行上下文环境包括变量对象，作用域链，this指针三部分。

在这里为了说明问题，我们只关心变量对象。

在函数执行上下文中，变量对象是不能直接访问的

它包含普通参数(formal parameters) 与特殊参数(Arguments)对象(具有索引属性的参数映射表)。

特殊参数(Arguments)对象是通过函数的arguments属性初始化的。即arguments属性的值是Arguments对象。

 

创建变量对象的过程是这样：

1.建立特殊参数(Arguments)对象：属性名是'0'、'1'、'2'.....，属性值就是函数调用时传入的实参。此外arguments.length是实际参数的个数。此时函数的形参在函数中作为局部变量存在，且与arguments中的数据共享状态（这句话极为重要！）

2.函数提升：找到这个将要执行的函数内的所有函数声明，储存在变量对象中，属性名就是函数名，属性值就是函数的引用（所在的内存地址）。如果有多个同名的函数声明，后出现的函数覆盖前面的属性值。

3.变量提升：找到这个将要执行的函数内的所有变量声明，储存在变量对象中，属性名就是变量名，属性值是undefined。

 

第三步：

先掌握一个概念：活动对象（activation object）

活动对象其实和变量对象是同一个东西在不同时期的两种叫法。函数还未开始执行（创建上下文的期间）时叫变量对象，函数开始执行以后就叫活动对象。

开始顺序执行函数体内的同步函数语句，此时变量对象切换为活动对象

形参赋值和函数声明赋值在第二步已经完成了。只剩下给第二步中的普通参数中声明过的变量进行赋值，即把undefined替换为真实值。

第四步：

函数执行完销毁（没有闭包情况下）

 

理解了上面过程再来看例题3

当test函数调用时，创建函数执行上下文，然后根据实参填充arguments对象，即：形参var x = arguments[0]，然后根据函数内的函数声明将函数名x进行提升，此时会发现函数名和形参名发生了冲突，由于形参与arguments中的数据共享状态，所以接下来后提升的函数名x内存放的函数引用地址会将前面定义的形参名x指向的arguments[0]直接覆盖掉

在浏览器中打印arguments验证：

以上内容为本人整理，转载请注明出处！