循环中的闭包

最新推荐文章于 2022-12-22 13:54:03 发布
最新推荐文章于 2022-12-22 13:54:03 发布
阅读量867 收藏 2
点赞数
分类专栏： JS/TS 文章标签： javascript 闭包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lyrelion/article/details/128060695
版权

目录

1. 什么是闭包？闭包的作用？ 

1.1 可以访问 外部作用域 中变量的内部函数

1.2 闭包可以访问外部作用域中的变量及传参

2. 异步操作中 变量 的生命周期，取决于 闭包 的生命周期

2.1 Timer 定时器（保留到 定时器回调执行完毕、定时器被清空）

2.2 Event 事件处理函数（保留到 事件处理函数 被移除）

2.3 Ajax 请求数据（保留到 接收到接口返回数据，执行回调函数）

2.4 其他异步 API 使用闭包

3. 循环中的闭包

3.1 利用闭包（利用立即执行函数）

3.2 在 for 循环中使用 let 声明变量

3.3 利用 setTimeout 第三个参数

4. 闭包的垃圾回收机制

5. 推荐一篇很值得学习的面试题分析文章

5.1 文章

5.2 文章题目概述

5.2.1 基础题目 / 初步及格标准

5.2.2 如果期望代码的输出变成：5 -> 0,1,2,3,4，该怎么改造代码

5.2.3 如果期望代码的输出变成：0 -> 1 -> 2 -> 3 -> 4 -> 5，该怎么改造代码

1. 什么是闭包？闭包的作用？ 

1.1 可以访问 外部作用域 中变量的内部函数

可以访问 外部作用域 中变量的内部函数（在 函数内部 或者 {} 块内部 定义一个函数，就创建了闭包）

举个栗子~~

// log()、simple() 是嵌套在 autorun() 函数里面的函数

(function autorun() {
    let x = 1;

    // 闭包示例
    function log() {
       // 在 log() 内部，可以访问到 外部作用域 中的变量 x，此时 log() 就是闭包
       console.log(x); 
    }

    // 纯函数示例
    function simple() {
       return 2 === Number(2);
    }

    log();
})();

关于内部函数，内部函数有两种（闭包、纯函数）：

  • 闭包 —— 引用了外部作用域中变量的函数
  • 纯函数 —— 没有引用外部作用域中变量的函数，它们通常返回一个值，并且没有副作用

也可以这么理解，随着函数得执行完毕，某个变量因为被引用着（内部函数/闭包引用着）导致不能够被垃圾回收

1.2 闭包可以访问外部作用域中的变量及传参

即使 外部函数 / 外部块 已经执行完毕，内部函数仍然可以访问 外部函数 / 外部块 中定义的变量、接收的传参；让 局部变量 的值，始终保留在 内存 中

举个栗子~~

// 外部函数
(function autorun(p) {
    // 即使外部函数已经执行完毕
    let x = 1;
    setTimeout(function log() {
      // 内部函数仍然可以访问 外部函数 中定义的变量
      console.log(x); // 1
      // 内部函数仍然可以访问 外部函数 中J接收的参数
      console.log(p); // 10
    }, 10000);
})(10);

// 外部块 
{
    let x = 1;
    setTimeout(function log() {
      // 内部函数仍然可以访问 外部块 中定义的变量
      console.log(x);
    }, 10000);
}

 

闭包的外部作用域，在闭包定义的时候已决定，而不是执行的时候；闭包可以访问其外部(父)作用域中的定义的所有变量；

举个栗子~~

let x0 = 0;
(function autorun1() {
 let x1 = 1;
 (function autorun2() {
   let x2 = 2;
   (function autorun3() {
     let x3 = 3;
     // 闭包可以访问其外部(父)作用域中的定义的所有变量
     console.log(x0 + " " + x1 + " " + x2 + " " + x3); // 0 1 2 3
    })();
  })();
})();

2. 异步操作中 变量 的生命周期，取决于 闭包 的生命周期

当外部作用域执行完毕后，内部函数还存活（仍在其他地方被引用）时，闭包才真正发挥其作用

  • 在异步任务例如 timer 定时器，事件处理，Ajax 请求中被作为回调
  • 被外部函数作为返回结果返回，或者返回结果对象中引用该内部函数

2.1 Timer 定时器（保留到 定时器回调执行完毕、定时器被清空）

变量 x 将一直保留，直到以下两种情况出现：

  • 定时器的回调执行
  • clearTimeout() 被调用
(function autorun() {
    let x = 1;
    setTimeout(function log() {
      // 变量 x 将一直存活着直到定时器的回调执行或者 clearTimeout() 被调用
      // 如果用 setInterval() ，那么变量 x 将存活到 clearInterval() 被调用。
      console.log(x);
    }, 10000);
})();

 

2.2 Event 事件处理函数（保留到 事件处理函数 被移除）

变量 x 将一直保留，直到 事件处理函数 被移除

(function autorun() {
    let x = 1;
    // 当变量 x 在事件处理函数中被使用时，它将一直存活直到该事件处理函数被移除。
    $("#btn").on("click", function log() {
      console.log(x);
    });
})();

 

2.3 Ajax 请求数据（保留到 接收到接口返回数据，执行回调函数）

变量 x 将一直保留，直到 接收到接口返回数据，执行回调函数

(function autorun() {
    let x = 1;
    fetch("http://").then(function log() {
      // 变量 x 将一直存活到接收到后端返回结果，回调函数被执行。
      console.log(x);
    });
})();

 

2.4 其他异步 API 使用闭包

除了 Timer 定时器，Event 事件处理，Ajax 请求等常见的异步任务，还有其他的异步 API（比如 HTML5 Geolocation，WebSockets , requestAnimationFrame()）

他们都使用到闭包的这一特性 ——  变量的生命周期取决于闭包的生命周期，被闭包引用的外部作用域中的变量，将一直存活直到闭包函数被销毁。

如果一个变量被多个闭包所引用，那么直到所有的闭包被垃圾回收后，该变量才会被销毁

3. 循环中的闭包

// 原始题目
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 1s 后，打印出 5，5，5，5，5
  }, 1000);
}

如何 将上述题目改成 1s 后，打印 0,1,2,3,4 呢？

3.1 利用闭包（利用立即执行函数）

立即执行函数，就是个闭包，它可以让局部变量的值，始终保持在内存中，对内部变量进行保护，外部访问不到

for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function timer() {
      console.log(j);
    }, 1000);
  })(i);
}

 

3.2 在 for 循环中使用 let 声明变量

function initEvents() {
  for(let i = 1; i <= 3; i++){
    setTimeout(function timer() {
      console.log(i);
    }, 1000);
  }
}

 

3.3 利用 setTimeout 第三个参数

第三个参数将作为 setTimeout 第一个参数 fn 的参数

// 利用 setTimeout 的第三个参数，第三个参数将作为 setTimeout 第一个参数 fn 的参数
for (var i = 0; i < 5; i++) {
  setTimeout(function fn(i) {
    console.log(i);
  }, 1000, i); // 第三个参数i, 将作为 fn 的参数
}


// 将上述题目改成每间隔 1s 后，依次打印 0,1,2,3,4
for (var i = 0; i < 5; i++) {
  setTimeout(function fn(i) {
    console.log(i);
  }, 1000 * i, i);
}

 

4. 闭包的垃圾回收机制

在 Javascript 中，局部变量会随着 “函数的执行完毕” 而被销毁，除非还有指向他们的引用；

当闭包本身也被垃圾回收之后，闭包中的 私有状态 也会被垃圾回收；

不合理的使用闭包，会造成内存泄露（就是该内存空间使用完毕之后，未被回收）
 

[译]发现 JavaScript 中闭包的强大威力 - 掘金闭包是一个可以访问外部作用域的内部函数，即使这个外部作用域已经执行结束。 作用域决定这个变量的生命周期及其可见性。 当我们创建了一个函数或者 {} 块，就会生成一个新的作用域。需要注意的是，通过 var 创建的变量只有函数作用域，而通过 let 和 const 创建的变量既有函…https://juejin.cn/post/6844903769646317576

5. 推荐一篇很值得学习的面试题分析文章

5.1 文章

由浅入深，一步步讲解，受益很多，点赞👍

破解前端面试（80% 应聘者不及格系列）：从闭包说起 - 掘金修订说明：发布《80% 应聘者都不及格的 JS 面试题》之后，全网阅读量超过 6W，在知乎、掘金、cnodejs 都引发了很多讨论，还被多个前端微信公号和技术媒体转载。酝酿许久之后，笔者准备接下来撰写前端面试题系列文章，内容涵盖 DOM、HTTP、浏览器、框架、编码、工程化等方…https://juejin.cn/post/6844903474212143117

5.2 文章题目概述

5.2.1 基础题目 / 初步及格标准

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
}

console.log(new Date, i); // 5,5,5,5,5,5

用 箭头 表示其前后的两次输出之间有 1 秒的时间间隔，逗号 表示前后的两次输出之间的时间间隔可以忽略，则打印结果 —— 5 -> 5,5,5,5,5

如果上面的可以理解，就战胜了80%的人，及格了

 

5.2.2 如果期望代码的输出变成：5 -> 0,1,2,3,4，该怎么改造代码

法一 —— 立即执行函数

for (var i = 0; i < 5; i++) {
    (function(j) { // j = i
        setTimeout(function() {
            console.log(new Date, j);
        }, 1000);
    })(i);
}

console.log(new Date, i);

 

法二 —— setTimeout 第三个参数

for (var i = 0; i < 5; i++) {
    setTimeout(function(j) {
        console.log(new Date, j);
    }, 1000, i);
}

console.log(new Date, i);

法三 —— 利用 JavaScript 中基本类型（Primitive Type）的参数传递是按值传递

var output = function (i) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
};

for (var i = 0; i < 5; i++) {
    output(i);  // 这里传过去的 i 值被复制了
}

console.log(new Date, i);

法四 —— 使用 es6 的 let

这个题目里不能用 let，因为会报错，最后一行执行时无法访问到 let

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
}

// 下面这行报错，访问不到 i
console.log(new Date, i);

 

5.2.3 如果期望代码的输出变成：0 -> 1 -> 2 -> 3 -> 4 -> 5，该怎么改造代码

代码执行时，立即输出 0，之后每隔 1 秒依次输出 1,2,3,4，循环结束后在大概第 5 秒的时候输出 5（这里使用大概，因为 JS 中的定时器触发时机有可能是不确定的，具体可参见 How Javascript Timers Work）

比较简单粗暴的写法（木有加分效果）：

  • 把最后一行的 console.log 设置定时器，放到最后执行；
  • 循环中的 console.log 定时器时间分别增加 1s
for (var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(function() {
            console.log(new Date, j);
        }, 1000 * j);  // 这里修改 0~4 的定时器时间
    })(i);
}

setTimeout(function() { // 这里增加定时器，超时设置为 5 秒
    console.log(new Date, i);
}, 1000 * i);

如果把这次的需求抽象为：在系列异步操作完成（每次循环都产生了 1 个异步操作）之后，再做其他事情，代码该怎么组织？聪明的你是不是想起了什么？ —— Promise 【ES6 中的新特性】

// 这里存放异步操作的 Promise
const tasks = [];

const output = (i) => new Promise((resolve) => {
    setTimeout(() => {
        console.log(new Date, i);
        resolve(); // 这里一定要 resolve，否则代码不会按预期 work
    }, 1000 * i); // 定时器的超时时间逐步增加
});

// 生成全部的异步操作
for (var i = 0; i < 5; i++) {
    tasks.push(output(i));
}

// 异步操作完成之后，输出最后的 i
Promise.all(tasks).then(() => {
    setTimeout(() => {
        console.log(new Date, i); // 注意这里只需要把超时设置为 1 秒
    }, 1000);
});

如何使用 ES7 中的 async/await 特性来让上面的代码变的更简洁？

// 模拟其他语言中的 sleep，实际上可以是任何异步操作
const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
});

// 声明即执行的 async 函数表达式
(async () => {
    for (var i = 0; i < 5; i++) {
        if (i > 0) {
            await sleep(1000);
        }
        console.log(new Date, i);
    }

    await sleep(1000);
    console.log(new Date, i);
})();

Lyrelion
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
采用自执行的匿名函数解决for循环使用闭包的问题
09-04
主要介绍了采用自执行的匿名函数解决for循环使用闭包的问题,很简单，但比较实用，需要的朋友可以参考下
for 循环中使用函数导致的闭包问题——两种方式解决
qq_37833745的博客
08-31 2166
1:for循环中，如果给每个元素都使用函数进行处理的话，很可能出现闭包问题 var arr = [0,1,2,3,4,5]; function fn(){ for(var i = 0;i<arr.length-1;i++){ console.log("索引",i); } } 控制台输出结果： 2:for循环中加入setTimeout函数 var arr = [0,1,2,3,4,5]; function fn2(){ for(var i = 0;i<arr.l...
循环内的 JavaScript 闭包——简单实用的示例
kalman2019的博客
12-22 898
变量函数 = []; // 让我们创建 3 个函数 for (var i = 0; i < 3; i++) { // 并将它们存储在 funcs funcs[i] = function() { // 每个都应该记录它的值。 console.log("我的值：" + i); }; } for (var j = 0; j < 3; j++) { // 现在让我们运行每一个来查看 funcs[j](); }它输出这个：我的价值：3 我的价值：3 我的价值：3而我希望它输出：我的价值：0 我的价值：1
【解决方案】闭包函数在for循环中的使用案例——for循环绑定监听事件索引值总是最后一个...
weixin_30861797的博客
07-24 174
请看以下两段代码，思考一下运行的结果是否一致呢？ 代码一： for (var i = 0; i < as.length; i++) { (function () { var j = i; as[j].tt = tt; as[j].onclick = function () { this.tt.slide(j); ...
for循环中的闭包问题及解决方案
学无止境
08-07 5430
说到闭包，我们首先来看一个最最简单的例子，也是最最基础的例子：为多个相同的元素，绑定事件，在点击每一个元素时，提示被点击元素的排列位置。 栏目1 栏目2 栏目3 栏目4 拿到手的第一反应就是for循环添加点击事件了（添加索引值也可以！） 这里讨论闭包解决！（i=4   ，一直弹4，好烦！） function b
for循环中的闭包问题
长歌的博客
09-11 4091
先看一段代码 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> var li=document.getElementsByTagName('li'); var len=li.length; for(v...
浅谈JavaScript for循环 闭包
10-22
下面小编就为大家带来一篇浅谈JavaScript for循环 闭包。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解Python循环作用域与闭包
09-19
主要介绍了Python循环作用域与闭包，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
浅谈JS闭包中的循环绑定处理程序
10-25
初学者经常碰到的,即获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。原因是初学者并未理解JavaScript的闭包特性。
在循环内使用闭包（Closures）
frontend_frank的博客
10-06 282
闭包的本质是一个内部函数访问其作用域之外的变量。闭包可以用于实现诸如 私有变量 和 创建工厂函数之类的东西。我们可能经常会见到一段这样的代码：for (var i = 0...
C#与lua闭包使用for循环时的不同点
Cloud Flower的博客-专注unity
03-15 461
我看过大多数csdn把c#和lua的闭包一概而谈，我在使用C#时，检测到C#的闭包和lua还是有些区别的。 C#的闭包来一个例子（unity中使用）： publicclassClosuerContent:MonoBehaviour { delegatevoidPrint(); voidClosuerTest2() { Pri...
在循环中使用闭包
Nice_Nice_Nice的博客
10-30 271
问题如下 编写一个函数，该函数将遍历整数列表，并在延迟3秒后打印每个元素的索引 常见的写法如下： const arr = [10, 12, 15, 21]; for (var i = 0; i < arr.length; i++) { setTimeout(function() { console.log('The index of this number is: ' + i);...
闭包和循环
追风筝的人
06-20 786
/** *循环和闭包 */ for (var i = 0; i <= 5; i++) { setTimeout(function timer(){ console.log(i);//输出6个6 },i*1000) } /** *上面的代码每一秒输出一个6，为什么呢？ * 延迟的回调函数会在循环结束时才执行，所以会每...
web前端高级JavaScript - 闭包的应用及循环事件绑定的N中解决办法
lixiaosenlin的专栏
10-27 5558
闭包在循环事件绑定中的应用 场景描述： 在页面上有3个button按钮，当点击每个按钮时输出当前按钮的索引值，要求用循环来绑定每个按钮的事件，看下面的代码。 <button>button1</button> <button>button2</button> <button>button3</button> var buttons = document.querySelectorAll('button'); for(var i
for循环闭包问题
weixin_43540912的博客
12-04 947
记录我学JavaScript踩的第一个坑 在实现一个输入数量算商品总价的表格，可事件函数内部的i值总获取不对，还好问了群里的大神，太感谢了。 说是一个for循环内部嵌套事件函数引起的闭包问题i获取不到的原因是因为，事件函数内部没有i这个值，就会到外部函数查找，而外部函数的值是每次循环后的结果，所以一直都是获取到7，下面的赋值自然就会报错。 解决方案： 解决方法一： 将for循环的var改成let，...
for循环中的闭包应用
qingliuFu的博客
06-14 1805
1、下面代码的输出为什么？使下面代码的输出结果为0 1 2 3 4，应如何修改下面的代码？请使用多种方式来实现for(var i=0;i&lt;5;i++){ setTimeout(function(){ alert(i); },100) } 上述代码会输出5个5。因为setTimeout是一个异步任务，它会在循环完成后才进行，此时i=5.若要实现输出结果为0 1 2 3 4，也可...
循环和闭包
weixin_34062469的博客
06-08 94
2019独角兽企业重金招聘Python工程师标准>>> ...
c#闭包以及foreach中的闭包；
最新发布
05-28
C#中的闭包是指一个函数能够访问它外部的变量，即使这些变量在函数外部定义。闭包可以在函数内部创建，也可以作为函数的返回值返回。 下面是一个简单的闭包示例： ``` public Func<int, int> Add(int a) { return b => a + b; } // 调用 Func<int, int> add5 = Add(5); int result = add5(3); // result = 8 ``` 在上面的代码中，Add方法返回一个匿名函数，这个匿名函数能够访问Add方法中的变量a。当我们调用Add(5)时，会返回一个函数，这个函数会将传入的参数b加上a，然后返回结果。 关于foreach中的闭包，需要注意的是，foreach循环变量会在每次迭代中重新赋值，因此如果在循环体内部使用匿名函数访问循环变量，可能会导致意外的结果。例如： ``` List<Func<int>> funcs = new List<Func<int>>(); int[] nums = { 1, 2, 3 }; foreach (int num in nums) { funcs.Add(() => num); } foreach (Func<int> func in funcs) { Console.WriteLine(func()); } ``` 上面的代码中，我们在第一个foreach循环中向一个List中添加了三个匿名函数，这些匿名函数都返回循环变量num。在第二个foreach循环中，我们依次调用了这三个函数，期望的结果是输出1、2、3。但实际上，输出的结果都是3，这是因为在第一个foreach循环中，循环变量num在每次迭代中都被重新赋值，而匿名函数中访问的是循环变量的引用，最终所有的函数都返回了最后一次迭代中的值3。 为了避免这种问题，我们可以在循环体内部创建一个局部变量来保存循环变量的值，然后在匿名函数中访问这个局部变量，例如： ``` List<Func<int>> funcs = new List<Func<int>>(); int[] nums = { 1, 2, 3 }; foreach (int num in nums) { int temp = num; funcs.Add(() => temp); } foreach (Func<int> func in funcs) { Console.WriteLine(func()); } ``` 这样就可以输出期望的结果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lyrelion

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值