mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2024-04-21 12:32:22 +00:00
docs(let): edit 块级作用域
This commit is contained in:
+30
-20
@@ -268,12 +268,6 @@ function f1() {
|
||||
|
||||
ES6 允许块级作用域的任意嵌套。
|
||||
|
||||
```javascript
|
||||
{{{{{let insane = 'Hello World'}}}}};
|
||||
```
|
||||
|
||||
上面代码使用了一个五层的块级作用域。外层作用域无法读取内层作用域的变量。
|
||||
|
||||
```javascript
|
||||
{{{{
|
||||
{let insane = 'Hello World'}
|
||||
@@ -281,6 +275,8 @@ ES6 允许块级作用域的任意嵌套。
|
||||
}}}};
|
||||
```
|
||||
|
||||
上面代码使用了一个五层的块级作用域,每一层都是一个单独的作用域。第四层作用域无法读取第五层作用域的内部变量。
|
||||
|
||||
内层作用域可以定义外层作用域的同名变量。
|
||||
|
||||
```javascript
|
||||
@@ -361,16 +357,6 @@ function f() { console.log('I am outside!'); }
|
||||
|
||||
ES6 就完全不一样了,理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于`let`,对作用域之外没有影响。但是,如果你真的在 ES6 浏览器中运行一下上面的代码,是会报错的,这是为什么呢?
|
||||
|
||||
原来,如果改变了块级作用域内声明的函数的处理规则,显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题,ES6 在[附录 B](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-block-level-function-declarations-web-legacy-compatibility-semantics)里面规定,浏览器的实现可以不遵守上面的规定,有自己的[行为方式](http://stackoverflow.com/questions/31419897/what-are-the-precise-semantics-of-block-level-functions-in-es6)。
|
||||
|
||||
- 允许在块级作用域内声明函数。
|
||||
- 函数声明类似于`var`,即会提升到全局作用域或函数作用域的头部。
|
||||
- 同时,函数声明还会提升到所在的块级作用域的头部。
|
||||
|
||||
注意,上面三条规则只对 ES6 的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作`let`处理。
|
||||
|
||||
根据这三条规则,在浏览器的 ES6 环境中,块级作用域内声明的函数,行为类似于`var`声明的变量。
|
||||
|
||||
```javascript
|
||||
// 浏览器的 ES6 环境
|
||||
function f() { console.log('I am outside!'); }
|
||||
@@ -386,7 +372,17 @@ function f() { console.log('I am outside!'); }
|
||||
// Uncaught TypeError: f is not a function
|
||||
```
|
||||
|
||||
上面的代码在符合 ES6 的浏览器中,都会报错,因为实际运行的是下面的代码。
|
||||
上面的代码在 ES6 浏览器中,都会报错。
|
||||
|
||||
原来,如果改变了块级作用域内声明的函数的处理规则,显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题,ES6 在[附录 B](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-block-level-function-declarations-web-legacy-compatibility-semantics)里面规定,浏览器的实现可以不遵守上面的规定,有自己的[行为方式](http://stackoverflow.com/questions/31419897/what-are-the-precise-semantics-of-block-level-functions-in-es6)。
|
||||
|
||||
- 允许在块级作用域内声明函数。
|
||||
- 函数声明类似于`var`,即会提升到全局作用域或函数作用域的头部。
|
||||
- 同时,函数声明还会提升到所在的块级作用域的头部。
|
||||
|
||||
注意,上面三条规则只对 ES6 的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作`let`处理。
|
||||
|
||||
根据这三条规则,浏览器的 ES6 环境中,块级作用域内声明的函数,行为类似于`var`声明的变量。上面的例子实际运行的代码如下。
|
||||
|
||||
```javascript
|
||||
// 浏览器的 ES6 环境
|
||||
@@ -405,7 +401,7 @@ function f() { console.log('I am outside!'); }
|
||||
考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。
|
||||
|
||||
```javascript
|
||||
// 函数声明语句
|
||||
// 块级作用域内部的函数声明语句,建议不要使用
|
||||
{
|
||||
let a = 'secret';
|
||||
function f() {
|
||||
@@ -413,7 +409,7 @@ function f() { console.log('I am outside!'); }
|
||||
}
|
||||
}
|
||||
|
||||
// 函数表达式
|
||||
// 块级作用域内部,优先使用函数表达式
|
||||
{
|
||||
let a = 'secret';
|
||||
let f = function () {
|
||||
@@ -422,7 +418,21 @@ function f() { console.log('I am outside!'); }
|
||||
}
|
||||
```
|
||||
|
||||
另外,还有一个需要注意的地方。ES6 的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错。
|
||||
另外,还有一个需要注意的地方。ES6 的块级作用域必须有大括号,如果没有大括号,JavaScript 引擎就认为不存在块级作用域。
|
||||
|
||||
```javascript
|
||||
// 第一种写法,报错
|
||||
if (true) let x = 1;
|
||||
|
||||
// 第二种写法,不报错
|
||||
if (true) {
|
||||
let x = 1;
|
||||
}
|
||||
```
|
||||
|
||||
上面代码中,第一种写法没有大括号,所以不存在块级作用域,而`let`只能出现在当前作用域的顶层,所以报错。第二种写法有大括号,所以块级作用域成立。
|
||||
|
||||
函数声明也是如此,严格模式下,函数只能声明在当前作用域的顶层。
|
||||
|
||||
```javascript
|
||||
// 不报错
|
||||
|
||||
Reference in New Issue
Block a user