JavaScript函数声明前置与变量声明
2016-07-06 17:27
459 查看
先看一个例子
因为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数据填充顺序看以下例子
上述代码说明在变量初始化阶段,函数声明已经被填充至VO中,也就是进行了前置,而函数表达式不影响VO。同时,我们也看到变量在初始化与代码执行阶段的变化,下面测试另一个例子。
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
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享