脚本宝典收集整理的这篇文章主要介绍了JavaScript 变量声明提升,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
JavaScript 变量声明提升
一个小例子
先来看个例子:
console.LOG(a); // undefined
VAR a = 2;
console.log(a); // 2
为什么是这样的结果呢?这是因为 JavaScript 代码在执行之前会有一个 预解析
阶段,在这个阶段,解释器会将所有 变量声明
和 函数声明
提升到他们各自的作用域顶部。
注:变量声明提升只是预解析阶段的一部分行为!
继续上面的例子,因为这个预解析阶段,上面的代码会被解释器预解析成下面的代码:
var a;
console.log(a); // undefined
a = 2;
console.log(a); // 2
变量的声明
在 ES6 之前,通常通过 var
来声明一个变量,但是 ES6 发布后,又新添了2个关键字来声明一个变量:let
和 const
。
{ // 代码块
var a = 1;
let b = 2;
const c = 3;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
}
console.log(a); // 1
console.log(b); // 报错,ReferenceError: b is not defined(…)
console.log(c); // 未执行, 因为上面语句出错,所以这条语句不再执行,如果上面的语句不报错,那么这里就会报错
(function (){
var a = 1;
let b = 2;
const c = 3;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
})(); // 为了方便,这里使用了自执行函数
console.log(a); // 报错,ReferenceError: a is not defined(…)
console.log(b); // 未执行
console.log(c); // 未执行
console.log(a); // 报错,ReferenceError: a is not defined
let a = 2;
console.log(a); // 待执行
console.log(a); // 报错,ReferenceError: a is not defined
const a = 2;
console.log(a); // 待执行
ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
变量声明提升(Variable hoisting)
提升(hoisting)影响了变量的生命周期,一个变量的生命周期包含3个阶段:
声明 - 创建一个新变量,例如 var myValue
初始化 - 用一个值初始化变量 例如 myValue = 150
使用 - 使用变量的值 例如 alert(myValue)
当代码按照这三个步骤的顺序执行的时候,一切看起来都很简单,自然。
变量提升的部分只是变量的声明,赋值语句和可执行的代码逻辑还保持在原地不动
console.log(a); // undefined
var a = 111;
function fun(){
console.log(a); // undefined
var a = 222;
console.log(a); // 222
}
fun();
console.log(a); // 111
// --------------
//变量提升后
function fun(){
var a;
console.log(a); // undefined
a = 222;
console.log(a); // 222
}
var a;
console.log(a); // undefined
a = 111;
fun();
console.log(a); // 111
var a = "aaa";
{
console.log(a); // aaa
var a = "bbb";
}
console.log(a); // bbb
//---------------
var a = "aaa";
if (true) {
console.log(a); // aaa
var a = "bbb";
}
console.log(a); // bbb
//---------------
var a = "aaa";
for(let x in window){
console.log(a); // aaa
var a = "bbb";
break;
}
console.log(a); // bbb
函数声明提升(Function Hoisting)
函数声明(function declarations) 和 函数表达式(function exPressions)在语法上其实是等价的,但是有一点不同,就是 JavaScript 引擎 加载他们的方式不一样。简单讲,就是函数声明会被提升到其作用域顶部,而函数表达式不会。
函数声明会提升,但是函数表达式的函数体就不会提升了
fun(); // hello
function fun(){
console.log("hello");
}
// --------------
// 提升后
function fun(){
console.log("hello");
}
fun(); // hello
fun(); // 报错,TypeError: fun is not a function
var fun = function(){
console.log("hello");
};
// --------------
// 提升后
var fun;
fun(); // 报错,TypeError: fun is not a function
fun = function(){
console.log("hello");
};
当函数表达式的函数不再是匿名函数,而是一个有函数名的函数时,会发生什么?
foo(); // 报错,TypeError "foo is not a function"
bar(); // 有效的
baz(); // 报错,TypeError "baz is not a function"
sPAM(); // 报错,ReferenceError "spam is not defined"
// anonymous function exPRession ('foo' gets hoisted)
var foo = function () {};
// function declaration ('bar' and the function body get hoisted)
function bar() {};
// named function expression (only 'baz' gets hoisted)
var baz = function spam() {};
foo(); // 有效的
bar(); // 有效的
baz(); // 有效的
spam(); // 报错,ReferenceError "spam is not defined"
如果一个变量和函数同名,函数声明优先于变量声明(毕竟函数是 JavaScript 的第一等公民),并且与函数名同名的变量声明将会被忽略。
fun(); // 输出的结果为111
function fun(){
console.log(111);
}
var fun = function(){
console.log(222);
}
fun(); // 输出的结果为222
// --------------
// 提升后
function fun(){
console.log(111);
}
fun(); // 输出的结果为111
fun = function(){ // 重新定义了变量 fun
console.log(222);
}
fun(); // 输出的结果为222
如果定义了相同的函数变量声明,后定义的声明会覆盖掉先前的声明,看如下代码:
foo(); //输出3
function foo(){
console.log(1);
}
var foo = function(){
console.log(2);
}
function foo(){
console.log(3);
}
练习
alert(foo) 的值是多少?
var foo = 1;
function bar() {
if (!foo) {
var foo = 10;
}
alert(foo); // ?
}
bar();
alert(a) 的值是多少?
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a); // ?
第二题的解析请看 这里
参考资料
以上是脚本宝典为你收集整理的JavaScript 变量声明提升全部内容,希望文章能够帮你解决JavaScript 变量声明提升所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。