Es6的let实现原理——代码解析

本质利用的是JS闭包

原始es6代码:

js 复制代码
var funcs = []; 
for (let i = 0; i < 10; i++) { 
  funcs[i] = function () { 
    console.log(i); 
  };
}
funcs[0](); // 0 

babel 编译之后的 es5 代码(polyfill):

js 复制代码
var funcs = [];

var _loop = function _loop(i) {
  funcs[i] = function () {
    console.log(i);
  };
};

for (var i = 0; i < 10; i++) {
  _loop(i);
}
funcs[0](); // 0

其实我们根据 babel编译之后的结果可以看得出来let是借助闭包和函数作用域来实现块级作用域的效果的 在不同的情况下 let 的编译结果是不一样的

相关推荐
WZF-Sang1 小时前
Linux权限理解【Shell的理解】【linux权限的概念、管理、切换】【粘滞位理解】
linux·运维·服务器·开发语言·学习
_Power_Y1 小时前
JavaSE:11、内部类
java·开发语言
你可以自己看1 小时前
python的基础语法
开发语言·python
爱编程的小新☆1 小时前
C语言内存函数
c语言·开发语言·学习
正小安1 小时前
URL.createObjectURL 与 FileReader:Web 文件处理两大法宝的对比
前端·javascript
赵广陆2 小时前
SprinBoot+Vue宠物寄养系统的设计与实现
前端·vue.js·宠物
尘浮生2 小时前
Java项目实战II基于Spring Boot的宠物商城网站设计与实现
java·开发语言·spring boot·后端·spring·maven·intellij-idea
A黄俊辉A2 小时前
vue3中把封装svg图标为全局组件
前端·javascript·vue.js
老贾爱编程2 小时前
VUE实现刻度尺进度条
前端·javascript·vue.js
勤奋的小王同学~2 小时前
怎么修改mvn的java版本
java·开发语言