从 setTimeout 彻底理解闭包

jsyzchen 发布于2019-08-22 18:39 / 3139人阅读

摘要：先看一个常见的例子闭包代码代码段输出打印为每间隔依次递增打印。原理解释，函数，作用为更改指向，其余为预设值。区别函数并不会立即执行，而函数会立即执行。

先看一个常见的例子
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://www.ucloud.cn/yun/96058.html

JavaScript之例题中彻底理解this

摘要：最后重点理解结论箭头函数的，总是指向定义时所在的对象，而不是运行时所在的对象。输出，箭头函数不会绑定所以传入指向无效。原因是，要彻底理解应该是建立在已经大致理解了中的执行上下文，作用域作用域链，闭包，变量对象，函数执行过程的基础上。本文共 2025 字，看完只需 8 分钟概述前面的文章讲解了 JavaScript 中的执行上下文，作用域，变量对象，this 的相关原理，但是我...

Hwg 2019-08-23 12:34 评论0 收藏0
彻底弄懂函数防抖和函数节流

摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。原博客地址，欢迎star 函数防抖和节流函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 评论0 收藏0
前端基础

摘要：谈起闭包，它可是两个核心技术之一异步基于打造前端持续集成开发环境本文将以一个标准的项目为例，完全抛弃传统的前端项目开发部署方式，基于容器技术打造一个精简的前端持续集成的开发环境。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日...

graf 2019-08-21 18:38 评论0 收藏0
初学者彻底理解javascript闭包以及this关键字

摘要：理解了这句话，我们就可以来看闭包了闭包前面说过，函数可以访问函数作用域链中的变量，但如果我们想在函数外访问函数内却不行了。不管是闭包还是this关键字，都是困扰JS初学者的比较难懂的东西，如果你对它们的认识还不足够清晰，那么现在就一起把它们掌握掉。还是那句话，我们从最基本的开始，建立起一个非常清晰的知识结构，好了，开始吧 ? 闭包当然我们今天说的是javascript里的闭包。要学...

魏明 2019-08-21 16:23 评论0 收藏0
先有蛋还是先有鸡？JavaScript 作用域与闭包探析

摘要：而闭包的神奇之处正是可以阻止事情的发生。拜所声明的位置所赐，它拥有涵盖内部作用域的闭包，使得该作用域能够一直存活，以供在之后任何时间进行引用。依然持有对该作用域的引用，而这个引用就叫闭包。引子先看一个问题，下面两个代码片段会输出什么？ // Snippet 1 a = 2; var a; console.log(a); // Snippet 2 console.log(a); v...

elisa.yang 2019-08-21 15:13 评论0 收藏0