先看一个例子
func1(); // 输出:我是函数声明
func2(); // 报错
console.log(a); // 输出:undefined
function func1() {
console.log("我是函数声明");
}
var func2 = function() {
console.log("我是函数表达式");
}
var a = 10;
因为JS会对函数声明前置,所以func1在函数声明前面执行依旧得到正确答案,而函数表达式func2则报错,为什么?我们先要弄清楚:
JS解释器如何找到我们定义的函数和变量?
通过 变量对象(Variable Object, VO)来获取。VO是一个抽象概念的“对象”,它用于存储执行上下文中的:1. 变量;2. 声明;3. 函数参数。
函数的VO分为两个阶段——变量初始化和代码执行。在变量初始化阶段,VO按照如下顺序填充:
1. 函数参数(若未传入,初始化该参数值为undefined)
2. 函数声明(若发生命名冲突,会覆盖)
3. 变量声明(初始化变量值为undefined,若发生命名冲突,则忽略)
注意:函数表达式与变量初始化无关。
在变量初始化阶段,需要先对arguments变量进行初始化(激活对象,AO),再把函数体内的变量声明与函数声明存储在AO内,VO(functionContext) === AO。
根据VO数据填充顺序看以下例子
function test(a, b) {
var c = 10;
function d() {}
var e = function _e() {}
(function x() {});
b = 20;
}
test(10);
// 变量初始化阶段AO
AO(test) = {
a:10,
b:undefined,
c:undefined,
d:<ref to func "d">,
e:undefined
};
// 代码执行阶段AO
AO(test) = {
a:10,
b:20,
c:10,
d:<ref to func "d">,
e:function _e() {}
};
上述代码说明在变量初始化阶段,函数声明已经被填充至VO中,也就是进行了前置,而函数表达式不影响VO。同时,我们也看到变量在初始化与代码执行阶段的变化,下面测试另一个例子。
alert(x); // function x() {} 注:函数声明前置
var x = 10; // 该声明被忽略
alert(x); // 10 注:在代码执行阶段将VO中的x对应值修改为10
x = 20;
function x() {}
alert(x); // 20 注:在代码执行阶段将VO中的x对应值修改为20
if (true) {
var a = 1;
} else {
var b = true;
}
alert(a); // 1
alert(b); // undefined 注:赋值没被执行,在初始化阶段VO中b的值为undefined