从 setTimeout 彻底理解闭包

2018-07-12 admin

先看一个常见的例子 setTimeout 闭包代码

//代码段(1)

for(var i=0;i<5;i++){
    setTimeout(console.log.bind(null,i),i*1000);
}

输出: 打印为每间隔1s依次递增打印i。

疑问: 如果把bind改成call将会是什么效果呢?

 //代码段(2)内部打印函数立即自执行

for(var i=0;i<5;i++){
    setTimeout(console.log.call(null,i),i*1000);
}

输出: 一次性全部打印递增i,并未达到计时器效果。

原理解释: bind(arg1,arg2,arg3…),call(arg1,arg2,arg3…)函数,arg1作用未更改this指向,其余arguments为预设值。 区别: bind函数并不会立即执行,而call函数会立即执行。这就是为什么call函数会一次性打印的原因。

 //代码段(3)
 //代码段 (3) == 代码段(1)
for(var i=0;i<5;i++){
    setTimeout(function(index){
      console.log(index);
    }.bind(null,i),i*1000);
}
//代码段 (4)内部打印函数立即自执行
//代码段 (4)== 代码段(2)
for(var i=0;i<5;i++){
    setTimeout((function(index){
      console.log(index);
    }.bind(null,i))(i),i*1000);
}

如果想用call函数,但是阻止自执行肿么办捏?很简单,内部再加个function

for(var i=0;i<10;i++){
    setTimeout(function(index){
      return function(){ 
        console.log(index); 
      }
    }.call(null,i),i*1000);
}

原文链接:https://segmentfault.com/a/1190000015611355

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35815.html

文章标题:从 setTimeout 彻底理解闭包

相关文章
JS实现从网页顶部掉下弹出层效果的方法
本文实例讲述了JS实现从网页顶部掉下弹出层效果的方法。分享给大家供大家参考。具体如下: 这里介绍的JavaScript动画背景出层,实现从网页顶部掉下来的感觉,停止时还带有缓冲弹跳的意思,从上到下显示的动画弹出层,带关闭功能,没有怎么美化,...
2017-03-27
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
JS使用ajax从xml文件动态获取数据显示的方法
本文实例讲述了JS使用ajax从xml文件动态获取数据显示的方法。分享给大家供大家参考。具体分析如下: 下面的JS代码通过ajax检索xml文件的内容动态展示到网页,真个页面无刷新 &lt;!DOCTYPE html&gt; &lt;htm...
2017-03-21
关于js里的this关键字的理解
this关键字在c++,java中都提供了这个关键字,在刚开始学习时觉得有难度,但是只要理解了,用起来就方便多了,下面通过本篇文章给大家详解js里this关键字的理解。 关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己...
2017-03-29
JS实现带缓冲效果打开、关闭、移动一个层的方法
本文实例讲述了JS带缓冲效果打开、关闭、移动一个层的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1...
2017-03-23
深入理解JavaScript编程中的原型概念
JavaScript 的原型对象总是让人纠结。即使是经验丰富的JavaScript专家甚至其作者,经常对这一概念给出很有限的解释。我相信问题来自于我们对原型最早的认识。原型总是与new, constructor 以及令人困惑的prototy...
2017-03-25
JavaScript基于setTimeout实现计数的方法
本文实例讲述了JavaScript基于setTimeout实现计数的方法。分享给大家供大家参考。具体实现方法如下: var count = 0; var timer; var timerOn = false; function timedC...
2017-03-23
JavaScript 闭包深入理解(closure)
一、什么是闭包? “官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。 相信很少有人能直接看懂这句话,因为他描述的太学术。其实这句话通俗的来说就是:JavaScript...
2017-03-23
javascript 闭包详解
看了一下网上闭包的概念及文章,对于这个问题,自己做一个梳理吧。 问:闭包是什么? 答:闭包是指在 JavaScript 中,内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。 这个是我自身第一...
2017-03-26
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
回到顶部