深入理解ES6中let和闭包


Posted in Javascript onFebruary 22, 2018

本文介绍了深入理解ES6中let和闭包,分享给大家,具体如下:

在开始本文之前我们先来看一段代码

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

显然这段代码输出10,并没有向我们期望的返回3,原因也很简单(js的变量提升)函数在调用时候访问的是一个全局作用域的i,此时for循环已经执行完毕,全局变量i=10;

在ES5标准中,我们要想返回期望的3,通常的做法也很简单,就是让数组中的每个函数有单独的作用域,那么我们只要构造一个立即执行函数即可(js中没有块级作用域,只区分函数作用域和全局作用域)就像下面这样:

var array=[];
for(var i=0;i<10;i++){
  array[i]=(function(i){
  return function(){
    return i;
    }
  })(i);
}
console.log(array[3]());//3

这样一来数组的每个函数就处于一个立即执行函数的函数作用域中,该立即执行函数传入i,其实for循环执行了如下代码:

array[0]=(function(i){
  return function(){
    return i;
    }
  })(0);
  array[1]=(function(i){
  return function(){
    return i;
    }
  })(1);
  array[2]=(function(i){
  return function(){
    return i;
    }
  })(2);
……

这样一来,数字组中每个函数对应一个单独的函数作用域(立即执行函数的)这里共创建了10个函数作用域,这些函数作用域里的i值就是执行时候传入的0……9,当执行

array[3]();时候函数访问的i值是其对应的立即执行函数作用域里的 i,而不是全局的i值,这样我们就得到了预期的效果。

说得到这里我们简单来说一下闭包,闭包可以理解为一个闭包就是一个没有释放资源的栈区,栈区内的变量处于激活状态。上面的例子中for循环在执行时系统分配内存,js执行线程创建执行栈区,执行时候检测到立即执行函数里的变量i被内部函数引用,所以该栈区在内存中没有被释放,函数(数组元素)被调用时候根据作用链首先访问到的是上一级作用域(立即执行函数)的变量。

这里不再详细介绍闭包,如果想详细了解闭包请阅读《javascript高级程序设计》第7章

前面提到js中并没有块级作用域,只区分全局作用域和函数作用域,在ES6中let实际是为js新增了块级作用域,例如下面代码不用创造函数作用域就可以让每个数组里的函数访问各自作用域里的值:

let arr=[];
for(let i=0;i<10;i++){
  arr[i]=function(){
    return i;
  }
}
console.log(arr[3]());//3

可以看到我们并没有像之前那样构造一个函数作用域就能实现我们期望的效果,引入块级作用域之后更方便我们书写和理解代码,上述代码中for循环之后的{}是块级作用域,每次循环时候每个返回的函数引用的是其对应块作用域的变量,稍微改一下代码看着形象些:

let arr=[];
for(let i=0;i<10;i++){
  let k=i;
  arr[k]=function(){
    return k;
  }
}
console.log(arr[3]());//3

可见ES6引入块作用域之后我们构造闭包函数更方便了。

这里不多叙述let和const的相关内容,如果之前没接触ES6的小伙伴建议阅读阮一峰老师的《ES6标准入门》。

在这里再提一点,很多人看完概念之后,第一印象都是:“const 是表示不可变的值,而 let 则是用来替换原来的 var 的。”很多时候把let当做是var的替代品,凡是声明变量就用let,你很可能写出下面代码:

// 定义常量
const REG_GET_INPUT = /^\d{1,3}$/;

// 定义配置项
let config = {
 isDev : false,
 pubDir: './admin/'
}

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');

const 的定义是不可重新赋值的值,与不可变的值(immutable value)不同;const 定义的 Object,在定义之后仍可以修改其属性。

所以其实他的使用场景很广,包括常量、配置项以及引用的组件、定义的 “大部分” 中间变量等,都应该以cosnt做定义。反之就 let 而言,他的使用场景应该是相对较少的,我们只会在 loop(for,while 循环)及少量必须重定义的变量上用到他。

猜想:就执行效率而言,const 由于不可以重新赋值的特性,所以可以做更多语法静态分析方面的优化,从而有更高的执行效率。

所以上面代码中,所有使用 let 的部分,其实都应该是用 const 的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 #Javascript
在vscode中统一vue编码风格的方法
Feb 22 #Javascript
vue webpack打包优化操作技巧
Feb 22 #Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 #Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 #Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 #Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 #Javascript
You might like
php模板原理讲解
2013/11/13 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
Javascript Object.extend
2010/05/18 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
python循环输出三角形图案的例子
2019/11/22 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
质量承诺书格式
2014/05/20 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
教师个人发展总结
2015/02/11 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
spring 项目实现限流方法示例
2022/07/15 Java/Android