ES 6 新增的块级作用域let

Xufc 发布于2019-08-26 10:11 / 2080人阅读

摘要：为什么要添加块级作用域之前，变量只有全局作用域也称全局变量和函数作用域局部变量，所以会导致以下不合理的情况函数的局部变量会覆盖同名的全局变量。这就导致了如果你要在函数内部调用全局变量，那么函数内声明的局部变量就一定不能和全局变量同名。

ES 6 新增的块级作用域let

在2015年之前，JavaScript是没有块级作用域的，之后在ES6版本新增了块级作用域，为了更好的理解ES6这一新特性，我们先提出这几个问题：
1.什么是块级作用域？
2.为什么要添加块级作用域？
3.怎么使用块级作用域？

什么是块级作用域？

块级作用域，就是指在只能在语句块这个范围中起作用，超出这个范围则无效，其中语句块，是指将多个语句放在一对大括号{}里面，通常用于流程控制，比如if,for,while等等。

示例

while (x < 10) {
  if(x>5){
  x++;
  }
}

这里{if(x>5){x++;}}是一个语句块，{x++;}也是一个语句块，巧记：一对大括号就是一个语句块，就代表一个作用域。

为什么要添加块级作用域？

ES6之前，变量只有全局作用域（也称全局变量）和函数作用域（局部变量），所以会导致以下不合理的情况:

1.函数的局部变量会覆盖同名的全局变量。 示例

      var a = 0
      (function() {
        console.log("函数内部调用全局的a：", a) //输出：函数内部调用全局的a： 0
      })()
      console.log("全局变量a：", a) //输出;全局变量a： 0

      var a = 0
      ;(function() {
        console.log("a=", a) //输出：a= undefined，按理说应该输出a=0
        if (false) {
          var a = 1
          console.log(a)
        }
      })()

原因

变量提升导致内层的 a 变量覆盖了外层的 a 变量。
这就导致了如果你要在函数内部调用全局变量，那么函数内声明的局部变量就一定不能和全局变量同名。

2.函数内部中，只要声明了变量，之后在函数结束前，都可以使用。 示例

      (function() {
        console.log(a) //输出：undefined
        if (true) {
          for (var a = 0; a < 10; a++) {
            var b = 0
            console.log(a) //输出：0~9
          }
        }
        console.log("if之外a：", a) //输出：if之外a： 10
        console.log("if之外b：", b) //输出：if之外b： 0
      })()

原因

在for循环中声明的a,b变量，在函数结束前并不会被销毁。
这样就导致了一些不必要的内存消耗。
为了避免这两个不合理的问题，块级作用域就出现了。

怎么使用块级作用域？

使用变量命令 let。

示例

      (function() {
        if (true) {
          for (let a = 0; a < 10; a++) {
            console.log(a) //输出：0~9
          }
        }
        console.log("if之外a：", a) //报错：ReferenceError: a is not defined
      })()

对于let命令的变量：

作用域：变量所在的语句块，即一对大括号{}；

不存在变量提升，而是“暂时性死区”，也就是说从块级作用域开始到声明该变量，这段时间里是不能访问该变量的；

同一语句块中，不能被同一变量名不能重复声明。

经典案例：let命令代替闭包功能

闭包实现：

var arr = [];
for(var i = 0; i < 2; i++){
    arr[i] = (function(i){
        return function(){
            console.log(i);
        };
    }(i));
};
arr[1]();

let 实现：

"use strict";
var arr = [];
for(let i = 0; i < 2; i++){
    arr[i] = function(){
        console.log(i);
    };
};
arr[1]();

参考文章：

ES6中啥是块级作用域？运用在哪些地方？

变量作用域

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

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

ES6新增命令：let

摘要：的介绍是新增的命令。基本语法声明的变量，只在其所在其所在的代码块内有效。不允许在函数的一级作用域内重新声明参数。 let的介绍 let是ES6新增的命令。作用：声明变量。类似于：var。与var的区别：使用let声明的变量，只在其所在的代码块内有效。定义回顾声明变量：可以用var，也可以不用var。是否允许变量提升：允许。是否允许重复声明同一个变量：允许。变量的作用域：全局作用域、...

mist14 2019-08-23 14:12 评论0 收藏0
ES6学习摘要（01）（新人学习）

摘要：入门一前言由于最近本人在学习，做一些笔记能够更好的熟悉，就趁此机会来写一篇关于的新人学习摘要吧。的作用域与命令相同只在声明所在的块级作用域内有效。块级作用域新增方式和实际上为新增了块级作用域。同时，函数声明还会提升到所在的块级作用域的头部。 ECMAScript6/ES6 入门一、前言由于最近本人在学习ES6，做一些笔记能够更好的熟悉，就趁此机会来写一篇关于ES6的新人学习摘要吧。...

dmlllll 2019-08-21 17:59 评论0 收藏0
es6块级作用域

摘要：块级作用域存在于两个地方函数内部。如下例应该返回创建数组的构造函数即这是数组返回这是数组从上例，我们可以知道即使全局作用域中已经定义了变量或者已经存在了属性，但我们之后定义的变量则会覆盖之前已经定义好的或者已经存在的变量属性。一.var 声明与变量提升机制在JavaScript中使用var定义一个变量，无论是定义在全局作用域函数函数的局部作用域中，都会被提升到其作用域的顶部，这也是...

cnTomato 2019-08-23 16:19 评论0 收藏0
ES6简单了解

摘要：报错块级作用域明确允许在块级作用域中声明函数。但其值是固定的，不可更改，只读。一旦声明变量，就必须立即初始化，不能留到以后赋值。调用函数会返回一个内部指针，执行它不会返回结果返回的是指针对象。 ES6初步学习 let和const let 用来声明变量，但是所声明的变量只在let命令所在的代码块内有效 let不像var那样会发生变量提升，所以一定要先声明后使用。 console.log...

K_B_Z 2019-08-20 15:08 评论0 收藏0
深入理解ES6 - var-let-const

摘要：声明变量不存在变量提升。临时死区，而且不能在声明之前访问它。禁止重复声明相同的变量，否则报错。不存在变量提升，一旦执行快外就会立即销毁。声明不允许修改绑定，但允许修改值，也就是说用创建对象后，可以修改该对象的属性值。知识点 var 声明变量： 1、存在变量提升，实际上var无论在哪里声明，都会被当做当前的作用域顶部声明变量。 2、可以重复声明，后声明的变量会覆盖前声明的变量。 let...

alexnevsky 2019-08-22 17:34 评论0 收藏0