深入解析ES6中let和闭包
本篇文章主要介绍了深入理解ES6中let和闭包,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。
本文介绍了深入理解ES6中let和闭包,分享给大家,具体如下: 在开始本文之前我们先来看一段代码
for(var i=0;i<10;i++){ arr[i]=function(){ return i; } } console.log(arr[3]());//10 //欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
显然这段代码输出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 //欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
这样一来数组的每个函数就处于一个立即执行函数的函数作用域中,该立即执行函数传入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); //欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
这样一来,数字组中每个函数对应一个单独的函数作用域(立即执行函数的)这里共创建了10个函数作用域,这些函数作用域里的i值就是执行时候传入的0……9,当执行 array3;时候函数访问的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 //欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
可以看到我们并没有像之前那样构造一个函数作用域就能实现我们期望的效果,引入块级作用域之后更方便我们书写和理解代码,上述代码中for循环之后的{}是块级作用域,每次循环时候每个返回的函数引用的是其对应块作用域的变量,稍微改一下代码看着形象些:
let arr=[]; for(let i=0;i<10;i++){ let k=i; arr[k]=function(){ return k; } } console.log(arr[3]());//3 //欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
可见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'); //欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
const 的定义是不可重新赋值的值,与不可变的值(immutable value)不同;const 定义的 Object,在定义之后仍可以修改其属性。 所以其实他的使用场景很广,包括常量、配置项以及引用的组件、定义的 “大部分” 中间变量等,都应该以cosnt做定义。反之就 let 而言,他的使用场景应该是相对较少的,我们只会在 loop(for,while 循环)及少量必须重定义的变量上用到他。 猜想:就执行效率而言,const 由于不可以重新赋值的特性,所以可以做更多语法静态分析方面的优化,从而有更高的执行效率。
结语
感谢您的观看,如有不足之处,欢迎批评指正。

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
玩转vue的slot内容分发
vue的内容分发非常适合“固定部分+动态部分”的组件的场景,固定部分可以是结构固定,也可以是逻辑固定,比如下拉loading,下拉loading只是中间内容是动态的,而拉到底部都会触发拉取更多内容的操作,因此我们可以把下拉loading做成一个有slot的插件。 单个Slot 在children这个标签里面放Dom,Vue不会理你,也就是不会显示,类似React:this.props.children。 //父 <children> <span>12345</span>//这边不会显示 </children> //子 components: { children: { template: "<button>为了明确作用范围,所以使用button标签</button>" } } 你需要写成这样 children: { template: "<button><slot></slot>为了明确作用范围,所以使用button标签</button>" } 注意这边 slot 相...
- 下一篇
Pytext简介:facebook的基于PyTorch的NLP框架
自然语言处理(NLP)在现代深度学习生态中越来越常见。从流行的深度学习框架到云端API的支持,例如Google云、Azure、AWS或Bluemix,NLP是深度学习平台不可或缺的部分。尽管已经取得了令人难以置信的进步,但构建大规模的NLP应用依然还有极大的挑战,在学习研究和生产部署之间还存在很多摩擦。作为当前市场上最大的会话环境之一,Facebook已经面对构建大规模NLP应用的挑战有一些年头了,最近,Facebook的工程团队开源了第一个版本的Pytext,一个基于PyTorch的NLP框架,可以用来构建高效的NLP解决方案。 PyText的最终目标是简化端对端的NLP工作流实现。为了实现这一目标,PyText需要解决当前NLP流程中的一些问题,其中最令人头疼的就是NLP应用在实验环境和生产环境的不匹配问题。 更好地平衡NLP实验和生产部署 现代NLP解决方案通常包含非常重的实验环节,在这个阶段数据科学家们将借鉴研究文件快速测试新的想法和模型,以便达成一定的性能指标。在实验阶段,数据科学家倾向于使用容易上手、界面简单的框架,以便快速实现高级、动态的模型,例如PyTorch或Tens...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7安装Docker,走上虚拟化容器引擎之路
- SpringBoot2全家桶,快速入门学习开发网站教程
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- MySQL8.0.19开启GTID主从同步CentOS8
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题