在ES6中新加了快作用域的概念(C语言就有,作为类c语言的js,当然应该加上),算是很好理解。

{
let i;
}
console.log(i);// i is not defined

在代码块当中使用新的作用域。

问题在于for语句

let arr=[];
for(let i=0;i<5;i++){
arr[i]=function(){
console.log(i);
};
}

许多的讲解并没有特别说明它的作用域是怎么看的,似乎是自然而然的事情。

然而对于以前c没专心学,真正会的也就类似PHP,javascript的无块作用域的孩子就觉得疑惑了。

我的错误理解1:

let arr = [];
(function(){//作用域直接包含整个for循环?wrong
for (var i = 0; i < 5; i++) {
arr[i] = function () {
console.log(i);
};
}
})();

我的错误理解2:

let arr = [];
for (var i = 0; i < 5; i++) {
(function () {//作用域包含单次循环?wrong
arr[i] = function () {
console.log(i);
};
})();
}

测试结果都说明自己的理解是有误的,找资料的时候,这里都一笔被带过了(可能因为各位作者都用过块作用域的吧)。

于是想到babel既然是ES6转ES5,理解是正确的,那么可以找它帮忙。

方法,使用babel转码加深特性的理解,

直接在线转码

转码前:

let arr=[];
for(let i=0;i<5;i++){
arr[i]=function(){
console.log(i);
};
i++;
}
console.log(i);//i is undefined
arr[0]();

转码后:

"use strict";

var arr = [];

var _loop = function _loop(_i2) {
arr[_i2] = function () {
console.log(_i2);
};
_i2++;
_i = _i2;
}; for (var _i = 0; _i < 5; _i++) {
_loop(_i);
}
console.log(i); //i is undefined
arr[0]();

通过babel转码后就可以清晰的看出来了:

1、作用域是分成两部分的,在整个for循环外层相当于有一个作用域,这里babel使用变量  _i  来区别   i  变量,等价于一个作用域,在理解上可以这样理解,

let arr = [];
for (let i = 0, len = 5; i < 5; i++) {
arr[i] = function () {
console.log(i);
};
}
console.log(i);
arr[0](); "use strict"; var arr = []; var _loop = function _loop(_i) {
arr[_i] = function () {
console.log(_i);
};
};
(function () {
for (var i = 0; i < 5; i++) {
_loop(i);
}
})();
console.log(i); //i is undefined
arr[0](); "use strict"; var arr = []; (function () {//等价于for循环外层作用域,babel中使用变量别名来优化
var _loop = function _loop(_i2) {
arr[_i2] = function () {
console.log(_i2);
};
_i2++;
i = _i2;
}; for (var i = 0; i < 5; i++) {
_loop(i);
}
})();
console.log(i); //i is undefined
arr[0]();

2、每个单次循环也是一个作用域,代码中的_loop,即是用函数作用域来模拟块作用域。

3、在单次循环中注入了for语句中声明的i变量,并且在一次循环后,将i变量赋值回来(_loop代码中i=_i2)。

运行结果是一样,但是却觉得我的理解很有问题,通常越强大的规则通常是越简单的,是否有更准确的解释呢?求不吝相告

ES6中块作用域之于for语句是怎样的?的更多相关文章

  1. ES6 学习笔记之一 块作用域与let和const

    ---恢复内容开始--- 在学习ES6的块作用域和 let.const 之前,我们先来看看ES5以前的 var 关键字. var 关键字用于定义一个变量,通常我们会将其与变量的赋值合并为一条语句,就像 ...

  2. ES6 学习笔记之二 块作用域与闭包

    "闭包是函数和声明该函数的词法环境的组合." 这是MDN上对闭包的定义. <JavaScript高级程序设计>中则是这样定义的:闭包是指有权访问另一个函数作用域中的变量 ...

  3. ES6 中 let 和 const 总结

    目录 let const 1. let要好好用 1. 基本用法 2. let声明的变量不存在变量提升 3. TDZ(temporal dead zone)暂时性死区 4. 不允许重复声明 2. 块级作 ...

  4. ES6中let和闭包

    在开始本文之前我们先来看一段代码 for(var i=0;i<10;i++){ arr[i]=function(){ return i; } } console.log(arr[3]());// ...

  5. ES6(块级作用域)

    我们都知道在javascript里是没有块级作用域的,而ES6添加了块级作用域,块级作用域能带来什么好处呢?为什么会添加这个功能呢?那就得了解ES5没有块级作用域时出现了哪些问题. ES5在没有块级作 ...

  6. ES6之块级作用域

    一.前言 在ECMAScript6(以下简称ES6)之前,ECMAScript的作用域只有两种: 1.  全局作用域: 2.  函数作用域. 正是因为有这两种作用域,所以在JavaScript中出现一 ...

  7. Javascript中的词法作用域、动态作用域、函数作用域和块作用域(四)

    一.js中的词法作用域和动态作用域      词法作用域也就是在词法阶段定义的作用域,也就是说词法作用域在代码书写时就已经确定了.       js中其实只有词法作用域,并没有动态作用域,this的执 ...

  8. Java 中 try、catch、finally 语句块的执行顺序

    假设代码顺序书写如下:try → catch → finally → 其他代码 则: 1.正常执行顺序:try → catch → finally → 其他代码 2.try,catch和finally ...

  9. 理解JavaScript中的作用域和上下文

    JavaScript对于作用域(Scope)和上下文(Context)的实现是这门语言的一个非常独到的地方,部分归功于其独特的灵活性. 函数可以接收不同的的上下文和作用域.这些概念为JavaScrip ...

随机推荐

  1. 基于东北F4的设计模式情景剧——第一幕 装饰模式(Decorator Pattern)

    第一场 难题未解 布景:铁岭,晴天,午后,风.在一幢还算气派的写字楼的三层外墙上,挂着一条红色横幅,上面用歪歪扭扭的毛笔字写着"东北F4软件外包工作室".大风中,那早已褪色的条幅剧 ...

  2. xib的UIScrollView自适应高度

    1.首先,我们先把这个size classes关了(需要使用的童鞋无视掉,也无视掉我的工程名,这是我弄高德地图创建的工程) 2.添加一个scrollview上去,设置上下左右约束为0 3.然后搞一个v ...

  3. 蚁群算法简介(part2: 蚁群算法之构造路径)

    蚁群算法主要可以分为以下几个步骤:首先,蚁群中的每只蚂蚁都根据地面上信息素浓度的大小找出一条从原点通向终点的遍历所有城市一次的路径(构造路径):然后每只蚂蚁沿着自己刚刚找到的路径回溯,在路径经过的各个 ...

  4. Windows 服务快捷启动命令

    gpedit.msc-----组策略sndrec32-----录音机nslookup----- ip地址侦测器explorer------ 打开资源管理器logoff-------注销命令tsshut ...

  5. 【树莓派】关于tinyproxy问题处理

    一.tinyproxy服务启动问题解决 在配置好树莓派的设备上,发现 tinyproxy 启动时候存在问题,如下图: 经过半天的折腾,后来发现原来是由于异常关机导致临时文件生成错误 解决办法:删除/t ...

  6. 用Charles抓取https接口数据

    由于我之前抓取的某APP接口全面换上了https接口,导致我在抓取过程中遇到了很大的困境 用Charles无法获取到内容,由于现在已经搞定了,无法展示当时的错误信息,我从网站找了一个类似的错误信息 首 ...

  7. Openfire on Centos7

    学习一下linux,装备 1)centos 最小安装.(找抽的节奏) 2)必备 oepnssh yum install openssh-server.x86_64 3)配置网络.打开 /etc/sys ...

  8. appium 常用API

    ''.appium api第二弹 锋利的python,这是初稿,2015/1/5 如有错误的地方,请同学们进行留言,我会及时予以修改,尽量整合一份ok的api 作者:Mads Spiral QQ:79 ...

  9. tcp 之失败重传机制

    1.回退N步协议: 滑动窗口模式,每次传送一批的数据,接收到一个就再放进去一个,如果前面一个没有收到回复,后面的就算收到了后面的数据也丢掉 2选择性重传 区别是收到后,缓存.

  10. java String 的+操作导致的问题

    不说别的先看代码截图: 结果如下: 很好奇为什么String对象的null加上了""就等于"null"字符串了,先给点资料看看: 这个是我找的一个人博客上的截图 ...