JavaScript—变量提升、函数提升

变量的作用域

在所有函数之外声明的变量&＃xff0c;叫做全局变量&＃xff0c;因为它可被当前文档中的任何其他代码所访问。在函数内部声明的变量&＃xff0c;叫做局部变量&＃xff0c;因为它只能在该函数内部访问。

ECMAScript 6 之前的Javascript没有 语句块 作用域&＃xff1b;相反&＃xff0c;语句块中声明的变量将成为语句块所在代码段的局部变量。例如&＃xff0c;如下的代码将在控制台输出 5&＃xff0c;因为 x 的作用域是声明了 x 的那个函数&＃xff08;或全局范围&＃xff09;&＃xff0c;而不是 if 语句块。

if (true) {var x &＃61; 5;
}
console.log(x); // 5

如果使用 ECMAScript 6 中的 let 声明&＃xff0c;上述行为将发生变化。

if (true) {let y &＃61; 5;
}
console.log(y); // ReferenceError: y is not defined

变量声明提升(Variable hoisting)

Javascript 变量的另一特别之处是&＃xff0c;你可以引用稍后声明的变量而不会引发异常。这一概念称为变量声明提升(hoisting)&＃xff1b;Javascript 变量感觉上是被“提升”或移到了所有函数和语句之前。然而提升后的变量将返回 undefined 值。所以在使用或引用某个变量之后进行声明和初始化操作&＃xff0c;这个被提升的引用仍将得到 undefined 值。

/*** Example 1*/
console.log(x &＃61;&＃61;&＃61; undefined); // logs "true"
var x &＃61; 3;/*** Example 2*/
// will return a value of undefined
var myvar &＃61; "my value";(function() {console.log(myvar); // undefinedvar myvar &＃61; "local value";
})();

上面的例子&＃xff0c;也可写作&＃xff1a;

/*** Example 1*/
var x;
console.log(x &＃61;&＃61;&＃61; undefined); // logs "true"
x &＃61; 3;/*** Example 2*/
var myvar &＃61; "my value";(function() {var myvar;console.log(myvar); // undefinedmyvar &＃61; "local value";
})();

由于存在变量声明提升&＃xff0c;一个函数中所有的var语句应尽可能地放在接近函数顶部的地方。这将大大提升程序代码的清晰度。

在 ECMAScript 2015 中&＃xff0c;let&＃xff08;const&＃xff09;将不会提升变量到代码块的顶部。因此&＃xff0c;在变量声明之前引用这个变量&＃xff0c;将抛出错误ReferenceError。这个变量将从代码块一开始的时候就处在一个“暂时性死区”&＃xff0c;直到这个变量被声明为止。

console.log(x); // ReferenceError
let x &＃61; 3;

函数提升&＃xff08;Function hoisting&＃xff09;

对于函数&＃xff0c;只有函数声明会被提升到顶部&＃xff0c;而不包括函数表达式。

/* 函数声明 */foo(); // "bar"function foo() {console.log("bar");
}/* 函数表达式 表达式定义的函数&＃xff0c;称为匿名函数。匿名函数没有函数提升。*/baz(); // TypeError: baz is not a function
//此时的"baz"相当于一个声明的变量&＃xff0c;类型为undefined。
//由于baz只是相当于一个变量&＃xff0c;因此浏览器认为"baz()"不是一个函数。
var baz &＃61; function() {console.log("bar2");
};