《深入理解ES6》第一章块级绑定

以你之姓@ 2022-10-07 15:50 249阅读 0赞

# 第一章 块级绑定 #

> 《深入理解ES6》—— Nicholas C. Zakas

在大多数类C语言中，变量（或绑定）总是在它被声明的地方创建；  
然而JS的变量实际创建的位置取决于你如何声明它。  
ES6能让你更轻易地控制变量的作用域。

## 1. var声明与变量提升 ##

**变量提升（hoisting）**：使用`var`关键字声明的变量，无论实际声明位置在何处，  
都被视为在所在函数的顶部声明。

因为 这种特有行为可能导致bug，  
所以 ES6引入了块级作用域，让变量的生命周期更加可控，以及与其他语言保持一致。

## 2. 块级声明 ##

**块级声明**：在声明变量的语句块之外无法被访问。

**块级作用域（词法作用域）** 在如下情况被创建：

1.  在一个函数体内部
2.  在一个代码块（“\{ \}”）内部

### 2.1. let 变量声明 ###

可用 `let` 来代替 `var`，但会将变量的作用域限制在当前代码块中。

### 2.2. const 常量声明 ###

在声明时要求初始化，无法再次赋值。

`const` 声明的对象 不会阻止其成员的修改。

### 2.3. 禁止重复声明 ###

使用 `let`、`const` 在统一作用域内定义一个已有的变量时会抛出错误。

var message = "hello";
    
    // 错。同级作用域不能重复声明
    let message = "world";
    
    // 对。嵌套作用域内会屏蔽外部同名变量
    if ( true ) {
        
        let message = "haha";
    }

### 2.4. 暂时性死区 ###

if( condition ) {
        
        console.info( typeof value ); // 引用错误（运行时错误）
        let value = "blue";
    }

当JS引擎检视接下来的代码块 并发现变量声明时，如果是：

*  `var` 声明，则进行声明提升
 *  `let`/`const` 声明，则将声明放在暂时性死区内

访问暂时性死区内的变量会导致运行时错误。

### 2.5. 全局块级绑定 ###

在全局作用域里用`var`声明变量时，  
会创建一个新的全局变量，并成为全局对象`window`的一个属性。

在全局作用域里用`let`/`const`声明变量时，  
会在全局作用域上创建新的绑定，但不会添加到`window`且会屏蔽掉`window`的同名属性。

### 2.6. 最佳实践 ###

默认情况下使用 `const` 声明变量，在知道变量需要被更改的情况下才使用 `let`。

理论依据：大部分变量在初始化后都不应当被修改，因为预期外的改动是bug的源头之一。

## 3. 总结 ##

`let`和`const`块级绑定将词法作用域引入了JS。

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关《深入理解ES6》第五章解构

第五章解构 > 《深入理解ES6》—— Nicholas C. Zakas 1. 析构的用处在ES6之前，从对象或数组中获取信息，并将特定数据存入本地变量，

￡神魔★判官ぃ/ 2022年10月09日 00:48/ 0 赞/ 300 阅读

相关《深入理解ES6》第三章函数

函数 > 《深入理解ES6》—— Nicholas C. Zakas 在ES5函数之上，进行增量改进。 1. 参数默认值参数默认值让函数在接收到的参数数量不

曾经终败给现在/ 2022年10月08日 05:53/ 0 赞/ 363 阅读

相关《深入理解ES6》第一章块级绑定

第一章块级绑定 > 《深入理解ES6》—— Nicholas C. Zakas 在大多数类C语言中，变量（或绑定）总是在它被声明的地方创建；然而JS的变量实际创

以你之姓@/ 2022年10月07日 15:50/ 0 赞/ 250 阅读

相关深入理解C++的静态绑定和动态绑定

深入理解C++的静态绑定和动态绑定理解静态绑定和动态绑定，需要先理解四个名词： 1、对象的静态类型：对象在声明时采用的类型，是在编译期确定的。 2、对象的动态类型：

拼搏现实的明天。/ 2022年06月13日 09:29/ 0 赞/ 441 阅读

相关 ES6块级作用域

块级作用域 ① 全局作用域和函数作用域在ES6之前只有全局作用域和函数作用域，由于变量提升带来了一些不便。 1. 第一种场景，内层变量可能会覆盖外层变

男娘i/ 2022年05月13日 09:28/ 0 赞/ 397 阅读

相关《深入理解ES6》——块级作用域绑定

一、var声明及变量提升（Hoisting）机制在函数作用域或全局作用域中通过关键字var声明的变量，无论实际上是在哪里声明的，都会被当成在当前作用域顶部声明的

痛定思痛。/ 2022年05月10日 03:10/ 0 赞/ 343 阅读

相关块级作用域(ES6)

> 一、为什么需要块级作用域 ES5只有全局作用域和函数作用域，没有块级作用域，这导致很多场景不合理。 1、第一种场景：内层变量可能会覆盖外层变量： var

我不是女神ヾ/ 2022年03月21日 07:58/ 0 赞/ 378 阅读

相关 Understanding ES6 -- 深入理解ES6书籍

[understanding es6][] \-- Nicholas C. Zakas [块级绑定][Link 1] [function][] [拓展对

太过爱你忘了你带给我的痛/ 2022年03月07日 10:24/ 0 赞/ 387 阅读

相关 react+ES6(事件绑定)

最近一直在看react。之前看react的时候很多都是旧的写法（es5），这几天因项目要求把es6和react一起结合看了一下，自己也写了几个demo，想把这些demo拿出来分

以你之姓@/ 2022年01月07日 23:27/ 0 赞/ 423 阅读

相关 ES6——块级作用域

javascript缺乏块级[作用域][Link 1]，var声明时的[声明提升][Link 2]、[属性变量][Link 3]等行为让人困惑。ES6的新语法可以帮助我们更好地

矫情吗；*/ 2021年09月20日 10:12/ 0 赞/ 448 阅读