ES 6 新增的块级作用域let

2019-07-17 admin

在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命令的变量:

  1. 作用域:变量所在的语句块,即一对大括号{};
  2. 不存在变量提升,而是“暂时性死区”,也就是说从块级作用域开始到声明该变量,这段时间里是不能访问该变量的;
  3. 同一语句块中,不能被同一变量名不能重复声明。
  4. 经典案例: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]();

参考文章:

  1. ES6中啥是块级作用域?运用在哪些地方?
  2. 变量作用域

[转载]原文链接:https://segmentfault.com/a/1190000019792247

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-70000.html

文章标题:ES 6 新增的块级作用域let

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
回到顶部