php7的 let 块级变量,闭包和let块级作用域

还是先从一个题目开始：

写一个隔1s输出数组的一项的函数。

如果可以用ES6语法，则可以这么写：

function print (arr) {

for (let i = 0; i < arr.length; i++) {

setTimeout(() => {

console.log(arr[i])

}, 1000 * i);

}

}

但是如果把这里的let改成var，则输出就会变成一连串的undefined。

有同学很快想到了这是闭包啊，因为setTimeout把函数加入到microqueue中，所以等到setTimeout的函数体执行时，i已经走完了for循环，变成了arr.length。arr[arr.length]显然是undefined。

简单修改一下，变成ES5的语法。

function print (arr) {

for (var i = 0; i < arr.length; i++) {

(function (index) {

setTimeout(() => {

console.log(arr[index])

}, 1000 * index);

})(i);

}

}

其实就是利用闭包是向父级作用域寻找值的特性，给i包装一层作用域，把i存起来。

到这里闭包的理解应该差不多了，而今天的关键点在于——

let做了什么？

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

他提到了let的几个特性：

只存在于块级作用域中

不存在变量提升

暂时性死区

不允许重复声明

这里我不再赘述，大家可以仔细阅读一下阮一峰老师的书。

我更感兴趣的是，在ES5的语法中，如何模拟let这种块级作用域的效果。这个时候，应该让babel出场了。

打开这个链接：可以看到转换后的代码。

"use strict";

function print(arr) {

var _loop = function _loop(i) {

setTimeout(function () {

console.log(arr[i]);

}, 1000 * i);

};

for (var i = 0; i < arr.length; i++) {

_loop(i);

}

}

其实可以对比发现，babel转换后的代码和我们上面写的ES5实现其实是一样的。

大概就是通过对let绑定的块级作用域加一个函数，把let声明的参数，通过函数传入，达到块级作用域的效果。

大家可以在babel试一下let的其他特性，转移出的ES5语法并不能实现有的特性，比如暂时性死区。

完，感谢阅读。

JavaScript函数表达式、闭包、模仿块级作用域、私有变量

函数表达式是一种非常有用的技术,使用函数表达式可以无需对函数命名,从而实现动态编程.匿名函数,是一种强大的方式,一下总结了函数表达式的特点: 1.函数表达式不同于函数声明,函数声明要求有名字,但函数表 ...

JS 模仿块级作用域

function outputNumbers(count) { for (var i=0; i

js中的块级作用域

概述 函数是js中最常见的作用域单元, 声明在一个函数内部的变量或函数会在所处的作用域中隐藏起来, 这是有意为之的非常好的设计原则. 但是随着js的发展, 我们有了某个代码块(通常指{..}内部)隐藏 ...

你不知道的JS之作用域和闭包(三)函数 vs&period; 块级作用域

原文:你不知道的js系列 在第(二)节中提到的,标识符在作用域中声明,这些作用域就像是一个容器,一个嵌套一个,这个嵌套关系是在代码编写时定义的. 那么到底是什么产生了一个新的作用域,只有函数能做到 ...

ES6 浅谈let与const 块级作用域之封闭空间(闭包)

ES6新增了 let const 命令,用来声明变量.它的用法类似于 var  ,但是所声明的变量,只在 let const 命令所在的代码块内有效.  var const 不允许重复声明 用处: 可 ...

JavaScript模仿块级作用域

avaScript 没有块级作用域的概念.这意味着在块语句中定义的变量,实际上是在包含函数中而非语句中创建的,来看下面的例子: function outputNumbers(count){ for ( ...

ES6之块级作用域

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

ES6 - Note1：块级作用域与常量

在ES6以前,ES不支持块级作用域,只有全局作用域和函数作用域,所有变量的声明都存在变量声明提升. 1.let 关键字 声明一个块级变量,只在一个代码块中有效,如果在块外面访问便会报错,如下所示: { ...

JavaScript的作用域和块级作用域概念理解

作用域 作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期.说到这里我们需要理解两个概念:块级作用域与函数作用域. 函数作用域 这个应该好理解,函数作用域就是说定义在 ...

随机推荐

queen8

八皇后问题 八皇后问题的数学模型:如何能够在 8×8 的国际象棋棋盘上放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一条横行.纵行或斜线上.八皇后问题可 ...

null

期末考备考最后三天. 加油,把这学期学的知识给它搞透了.

html 复习

通过几次修改网页的经历,发现相关基础知识之薄弱,不得不再次花时间复习一遍.希望这是最后一次. 一 通用声明 HTML5 HTML 4.01

python——周边

Pythonic的禅意 import this python是用c语言写的.传说python不止有C语言实现,还有java实现,还有python实现的python,甚至还有js实现的python. p ...

《c程序设计语言》读书笔记--每行一个单词打印输入的字符，除去空符

#include int main() { int c; while((c = getchar()) != EOF) { if(c != '\n' && ...

LeetCode&colon; Sqrt

Title: Implement int sqrt(int x). Compute and return the square root of x. 思路:这个平方根肯定是在[1,x]之间,所以在这个 ...

Java GC 专家系列3：GC调优实践

本篇是”GC专家系列“的第三篇.在第一篇理解Java垃圾回收中我们学习了几种不同的GC算法的处理过程,GC的工作方式,新生代与老年代的区别.所以,你应该已经了解了JDK 7中的5种GC类型,以及每种G ...

Struts2 文件的上传与下载

1. Struts2的文件上传需要Apache的commons-io-Version.jar和commons-fileupload-Version.jar两个jar包.2. 页面中的

javascript事件及事件传输

函数必须调用才能执行,可a()加下面的函数调用 JS事件 1.js事件通常和函数结合来使用,这样可以通过发生的事件来驱动函数的执行,从而引起html出现不同的效果. 2.属性(当这些事件的属性发生时, ...

CS&colon;APP3e 深入理解计算机系统&lowbar;3e ShellLab&lpar;tsh&rpar;实验

详细的题目要求和资源可以到 http://csapp.cs.cmu.edu/3e/labs.html 或者 http://www.cs.cmu.edu/~./213/schedule.html 获取. ...