ES6学习笔记之块级作用域
Posted BennuCTech
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6学习笔记之块级作用域相关的知识,希望对你有一定的参考价值。
块级作用域
ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。
第一种场景,内层变量可能会覆盖外层变量。
var tmp = new Date();
function f()
console.log(tmp);
if (false)
var tmp = 'hello world';
f(); // undefined
由于变量提升,内层的tmp变量覆盖了外层的tmp变量,但是执行到log函数时,内层的tmp还未声明。
第二种场景,用来计数的循环变量泄露为全局变量。
var s = 'hello';
for (var i = 0; i < s.length; i++)
console.log(s[i]);
console.log(i); // 5
let的出现就增加了块级作用域,改善了以上情况。
块级作用域的出现,同时替代了之前广泛应用的匿名立即执行函数表达式(匿名 IIFE)。如:
// IIFE 写法
(function ()
var tmp = ...;
...
());
// 块级作用域写法
let tmp = ...;
...
块级作用域与函数声明
ES5 规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。
// 情况一
if (true)
function f()
// 情况二
try
function f()
catch(e)
// ...
上面两种函数声明,根据 ES5 的规定都是非法的。
但是,浏览器没有遵守这个规定,为了兼容以前的旧代码,还是支持在块级作用域之中声明函数,因此上面两种情况实际都能运行,不会报错。
ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。
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 就完全不一样了,理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于let,对作用域之外没有影响。但是,如果你真的在 ES6 浏览器中运行一下上面的代码,是会报错的,这是为什么呢?
原因是如果改变了块级作用域内声明的函数的处理规则,显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题,ES6 在附录 B里面规定,浏览器的实现可以不遵守上面的规定,有自己的行为方式。
- 允许在块级作用域内声明函数。
- 函数声明类似于var,即会提升到全局作用域或函数作用域的头部。
- 同时,函数声明还会提升到所在的块级作用域的头部。
注意,上面三条规则只对 ES6 的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作let处理。
根据这三条规则,浏览器的 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只能出现在当前作用域的顶层,所以报错。第二种写法有大括号,所以块级作用域成立。
函数声明也是如此,严格模式下,函数只能声明在当前作用域的顶层。
// 不报错
if (true)
function f()
// 报错
if (true)
function f()
关注公众号:BennuCTech,获取更多干货!
以上是关于ES6学习笔记之块级作用域的主要内容,如果未能解决你的问题,请参考以下文章