需要记住的:
ES5
不允许在块级作用域声明函数
ES6
引入了块级作用域,明确允许块级作用域中声明函数
如果改变了块级作用域内声明的函数的处理规则,显然会对老代码产生很大影响。为了减轻因此而产生的不兼容问题,ES6附录B里面规定,浏览器在ES6的环境下可以有自己的行为方式,主要有三个特性
特性① 允许在块级作用域内声明函数
特性② 函数声明类似于var
,即会提升到全局作用或函数作用域的头部
特新③ 函数声明还会提升到所在的块级作用域的头部
下面用例子来说明,感受一下三个特性
// 浏览器的 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
}());
可以看到上面的代码,在if语句下的代码块进行函数声明,体现了特性①,但是在符合ES6的浏览器中,都会报错,因为实际运行的是下面的代码
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
var f = undefined;//特性2
if (false) {//不执行
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
}
f();// Uncaught TypeError: f is not a function
}());
按照逻辑来说,浏览器会报f is not defined
,但是块级作用域内声明的函数,行为类似var
声明的变量,所以函数f会进行提升到匿名函数的头部,体现了特性②,相当于var f = undefined
,因为if判断条件为false,所以没有重复声明一次函数f,最后浏览器报f is not a function
, 最后我们感受一下特性③
// 浏览器的 ES6 环境
if (true) {
console.log('打印:'+f)
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
}
根据输出结果,我们可以看出函数缺失提升到了块级作用域的头部
注意
注意—、考虑到环境导致的行为差异太大,应该避免块级作用域内声明函数,如果确实需要,也应写成函数表达式,而不是函数声明语句
// 函数声明语句
{
let a = 'secret';
function f() {
return a;
}
}
// 函数表达式
{
let a = 'secret';
let f = function () {
return a;
};
}
注意二、另外,ES6的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错
// 不报错
'use strict';
if (true) {
function f() {}
}
// 报错
'use strict';
if (true)
function f() {}
注意三、ES5不允许在块级作用域声明函数
function f() { console.log('I am outside!'); }
(function () {
if (false) {
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
}
f();
}());
ES5 环境在代码的执行是下面这样子的,解析过程中进行了函数提升
// ES5 环境
function f() { console.log('I am outside!'); }
(function () {
function f() { console.log('I am inside!'); }
if (false) {
}
f();
}());
总结
在块级作用域声明函数,ES5环境下代码会进行函数提升
,而ES6环境下,特性②和特性③非常相似,JS解析器解析的时候都进行了提升
,不同的是特性②的效果和var变量提升
一样,而特性③的效果是函数提升