ES6 let语法实现闭包

最新推荐文章于 2025-06-09 09:31:09 发布

原创最新推荐文章于 2025-06-09 09:31:09 发布 · 1.3w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ES6 #闭包 #Babel

前端同时被 2 个专栏收录

10 篇文章

订阅专栏

ES6

2 篇文章

订阅专栏

本文探讨了在ES6中如何利用let关键字来创建闭包，对比了ES5时代的函数嵌套方式，并通过一个例子展示了如何将ES6代码转换为ES5，解释了在没有返回函数的情况下如何实现闭包效果。还提到了JavaScript中对象的地址传递特性在闭包中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在ES5时代，通常使用函数 return 嵌套函数实现闭包，这里我就不细说了，可参考《Javascript闭包——懂不懂由你，反正我是懂了》，《什么是闭包，我的理解》。
在ES6时代，我们可以利用let 来很方便的实现闭包，先来看两段代码：

var arr=[];
for(var i=0;i<10;i++){
  arr.push(()=>i)
}
console.log(arr[2]())   //10

var arr=[];
for(let i=0;i<10;i++){
  arr.push(()=>i)
}
console.log(arr[2]())   //2

这两段代码相差了一个let，但后者就实现的闭包。网上有很多关于let的暂时性死区的解释，我在这里就不细说了，我们今天来看看let在ES5里面的等效转换吧
先来看看第二段代码转化成ES5的写法，可以利用Babel的在线版：

"use strict";

var arr = [];

var _loop = function _loop(i) {
  arr.push(function () {
    return i;
  });
};

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

外面的函数无法访问_loop函数内部变量i，但可以访问arr,并没有使用return，但事实上这就实现了闭包。
我们知道，js在处理对象时，其实是地址传递，我们是将function () {return i;}的内存地址push到arr里，因此，该函数的运行环境还是在loop函数里。