function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
\
块级作用域的出现,实际上使得获得广泛应用的匿名立即执行函数表达式(匿名 IIFE)不再必要了。
// IIFE 写法
(function () {
var tmp = ...;
...
}());
// 块级作用域写法
{
let tmp = ...;
...
}
\
function f() { console.log('I am outside!'); }
\
(function () {
if (false) {
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
}
\
f();
}());
ES5 中运行,会得到“I am inside!”因为在if内声明的函数f会被提升到函数头部,实际运行的代码如下。
\
// ES5 环境
function f() { console.log('I am outside!'); }
\
(function () {
function f() { console.log('I am inside!'); }
if (false) {
}
f();
}());
\
而在es6环境中:
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
\
(function () {
if (false) {
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
}
\
f();
}());
// Uncaught TypeError: f is not a function
\
浏览器的 ES6 环境中,块级作用域内声明的函数,行为类似于var声明的变量。上面的例子实际运行的代码如下。
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
var f = undefined;
if (false) {
function f() { console.log('I am inside!'); }
}
\
f();
}());
// Uncaught TypeError: f is not a function
\
考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。
\
// 块级作用域内部的函数声明语句,建议不要使用
{
let a = 'secret';
function f() {
return a;
}
}
\
// 块级作用域内部,优先使用函数表达式
{
let a = 'secret';
let f = function () {
return a;
};
}
\
ES6 的块级作用域必须有大括号,如果没有大括号,JavaScript 引擎就认为不存在块级作用域。
\
// 第一种写法,报错
if (true) let x = 1;
\
// 第二种写法,不报错
if (true) {
let x = 1;
}
\
第一种写法没有大括号,所以不存在块级作用域,而let只能出现在当前作用域的顶层,所以报错。第二种写法有大括号,所以块级作用域成立。
\
函数声明也是如此,严格模式下,函数只能声明在当前作用域的顶层。
\
// 不报错
'use strict';
if (true) {
function f() {}
}
\
// 报错
'use strict';
if (true)
function f() {}