资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/《深入理解ES6》笔记——块级作用域绑定（1）

《深入理解ES6》笔记——块级作用域绑定（1）

2bdenny / 2721人阅读

摘要：没有声明的情况和都能够声明块级作用域，用法和是类似的，的特点是不会变量提升，而是被锁在当前块中。声明常量，一旦声明，不可更改，而且常量必须初始化赋值。临时死区的意思是在当前作用域的块内，在声明变量前的区域叫做临时死区。

本章涉及3个知识点，var、let、const，现在让我们了解3个关键字的特性和使用方法。

var

JavaScript中，我们通常说的作用域是函数作用域，使用var声明的变量，无论是在代码的哪个地方声明的，都会提升到当前作用域的最顶部，这种行为叫做变量提升（Hoisting）

也就是说，如果在函数内部声明的变量，都会被提升到该函数开头，而在全局声明的变量，就会提升到全局作用域的顶部。

</>复制代码 
  1. function test() {
  2.     console.log("1: ", a) //undefined
  3.     if (false) {
  4.       var a = 1
  5.     }
  6.     console.log("3: ", a) //undefined
  7. }
  8. test()

实际执行时，上面的代码中的变量a会提升到函数顶部声明，即使if语句的条件是false，也一样不影响a变量提升。

</>复制代码 
  1. function test() {
  2.     var a
  3.     //a声明没有赋值
  4.     console.log("1: ", a) //undefined
  5.     if (false) {
  6.       a = 1
  7.     }
  8.     //a声明没有赋值
  9.     console.log("3: ", a) //undefined
  10. }

在函数嵌套函数的场景下，变量只会提升到最近的一个函数顶部，而不会。

</>复制代码 
  1. //b提升到函数a顶部，但不会提升到函数test。
  2. function test() {
  3.     function a() {
  4.       if (false) {
  5.         var b = 2
  6.       }
  7.     }
  8.     console.log("b: ", b)
  9. }
  10. test() //b is not defined

如果a没有声明，那么就会报错，没有声明和声明后没有赋值是不一样的，这点一定要区分开，有助于我们找bug。

</>复制代码 
  1. //a没有声明的情况
  2. a is not defined
let

let和const都能够声明块级作用域，用法和var是类似的，let的特点是不会变量提升，而是被锁在当前块中。

一个非常简单的例子：

</>复制代码 
  1. function test() {
  2.     if(true) {
  3.       console.log(a)//TDZ，俗称临时死区，用来描述变量不提升的现象
  4.       let a = 1
  5.     }
  6. }
  7. test()  // a is not defined
  8. function test() {
  9.     if(true) {
  10.       let a = 1
  11.     }
  12.     console.log(a)
  13. }    
  14. test() // a is not defined

唯一正确的使用方法：先声明，再访问。

</>复制代码 
  1. function test() {
  2.     if(true) {
  3.       let a = 1
  4.       console.log(a)
  5.     }
  6. }
  7. test() // 1
const

声明常量，一旦声明，不可更改，而且常量必须初始化赋值。

</>复制代码 
  1. const type = "ACTION"

我们试试重新声明type，看看会报什么错：

</>复制代码 
  1. const type = "ACTION"
  2. type = 1
  3. console.log(type) //"type" is read-only
  4. const type = "ACTION"
  5. let type = 1
  6. console.log(type) //Duplicate declaration "type"

const虽然是常量，不允许修改默认赋值，但如果定义的是对象Object，那么可以修改对象内部的属性值。

</>复制代码 
  1. const type = {
  2.   a: 1
  3. }
  4. type.a = 2 //没有直接修改type的值，而是修改type.a的属性值，这是允许的。
  5. console.log(type) // {a: 2}
const和let的异同点

相同点：const和let都是在当前块内有效，执行到块外会被销毁，也不存在变量提升（TDZ），不能重复声明。

不同点：const不能再赋值，let声明的变量可以重复赋值。

临时死区(TDZ)

上面我们也提到了TDZ的场景，那么，有什么用呢？答案就是没什么用。

临时死区的意思是在当前作用域的块内，在声明变量前的区域叫做临时死区。

</>复制代码 
  1. if (true) {
  2.   //这块区域是TDZ
  3.   let a = 1
  4. }
块级作用域的使用场景

除了上面提到的常用声明方式，我们还可以在循环中使用，最出名的一道面试题：循环中定时器闭包的考题

在for循环中使用var声明的循环变量，会跳出循环体污染当前的函数。

</>复制代码 
  1. for(var i = 0; i < 5; i++) {
  2.   setTimeout(() => {
  3.     console.log(i) //5, 5, 5, 5, 5
  4.   }, 0)
  5. }
  6. console.log(i) //5 i跳出循环体污染外部函数
  7. //将var改成let之后
  8. for(let i = 0; i < 5; i++) {
  9.   setTimeout(() => {
  10.     console.log(i) // 0,1,2,3,4
  11.   }, 0)
  12. }
  13. console.log(i)//i is not defined i无法污染外部函数

关于这个使用场景的具体分析可以查看我写的另外一篇文章：JavaScript同步、异步、回调执行顺序之经典闭包setTimeout面试题分析

在全局作用域声明

如果在全局作用域使用let或者const声明，当声明的变量本身就是全局属性，比如closed。只会覆盖该全局变量，而不会替换它。

</>复制代码 
  1. window.closed = false
  2. let closed = true
  3. closed // true
  4. window.closed // false
最佳实践

在实际开发中，我们选择使用var、let还是const，取决于我们的变量是不是需要更新，通常我们希望变量保证不被恶意修改，而使用大量的const，在react中，props传递的对象是不可更改的，所以使用const声明，声明一个对象的时候，也推荐使用const，当你需要修改声明的变量值时，使用let，var能用的场景都可以使用let替代。

=> 返回文章目录

云服务器 GPU云服务器 深入理解系列 深入理解linux 深入理解webrtc 深入理解python

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84008.html

相关文章

  • 深入理解ES6笔记（一）块级作用域绑定

    摘要：和都能够声明块级作用域，用法和是类似的，的特点是不会变量提升，而是被锁在当前块中。声明常量，一旦声明，不可更改，而且常量必须初始化赋值。临时死区临时死区的意思是在当前作用域的块内，在声明变量前的区域叫做临时死区。 主要知识点有：var变量提升、let声明、const声明、let和const的比较、块级绑定的应用场景showImg(https://segmentfault.com/img...

    马忠志 评论0 收藏0

  • 深入理解ES6 (一) 块级绑定

    摘要：声明声明的语法与的语法一致。总结文章都是以深入理解读书笔记形式，大部分引用书中的定义，加上作者的理解，样例也做了调整，所有样例都可以放到里运行亲自尝试。 1.变量提升 使用 var 关键字声明的变量，无论其实际声明位置在何处，都会被视为声明于所在函数的 顶部（如果声明不在任意函数内，则视为在全局作用域的顶部）。这句话从字面上不难理解。 但是他是怎样一个过程，为什么会这样。当你代...

    KunMinX 评论0 收藏0

  • 【进阶2-3期】JavaScript深入之闭包面试题解

    摘要：闭包面试题解由于作用域链机制的影响，闭包只能取得内部函数的最后一个值，这引起的一个副作用就是如果内部函数在一个循环中，那么变量的值始终为最后一个值。 （关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导） 本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第8天。 本计划一共28期，每期重点攻克一个面试重难点，如果你还不了...

    alanoddsoff 评论0 收藏0

  • 《深入理解ES6》笔记——函数（3）

    摘要：错误的写法错误的写法中的构造函数新增了支持默认参数和不定参数。箭头函数的简单理解箭头函数的左边表示输入的参数，右边表示输出的结果。但是有了尾调用优化之后，递归函数的性能有了提升。 作为前端切图仔，越发觉得自己离不开函数了。 说到JavaScript函数，脑子里都是匿名函数、普通函数、闭包函数、构造函数......然后还能说出一大堆函数的概念。如果你达到这个水平，那么函数对你来说没有难度...

    DoINsiSt 评论0 收藏0

发表评论

登陆后可评论

0条评论

2bdenny

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<