JS 定时器的 this 指向若干问题总结

论坛 期权论坛     
选择匿名的用户   2021-5-22 15:18   183   0
<div id="js_content">
<p style="text-align: center"><strong><strong>点击关注下方卡片关注我<strong><strong><strong><strong>????</strong></strong></strong><strong><strong><strong>????</strong></strong></strong></strong></strong></strong></p>
<p style="text-align: center">回复“JS”查阅 JS精选文章</p>
<p style="text-align: right">原文:https://segmentfault.com/a/1190000007908814</p>
<p style="text-align: left">看到评论里有小伙伴建议我试试箭头函数,真是受宠若惊,本来写文章也只是想记录,写要点给自己日后看的。</p>
<p style="text-align: left">之前看过一篇总结javascript中this的文章,也同样提到了箭头函数中this的指向问题,所以,我今天想对此做一个完善与总结。<br></p>
<h3><strong>一、问题的起源</strong></h3>
<p style="text-align: left">论坛上看到这样一道js编程题:要求用闭包实现每隔5s输出0-9之间的十个数字。这里先给出我写的最终实现方案,如下图:</p>
<p style="text-align: center"><img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-3fb9a536fe9a7f12e1a5661314fce3d6.png"></p>
<p style="text-align: left">毫无疑问,这里必须要用到定时器setTimeout或者setInterval,但是考虑到setInterval存在的两个问题:</p>
<ul><li><p>某些间隔会被跳过</p></li><li><p>多个定时器的代码执行之间的间隔可能会比预期的小</p></li></ul>
<p style="text-align: left">所以,用到setInterval的地方一般都是用递归调用setTimeout的方式来替代,但是关于这两个定时函数中的this我之前的理解有些偏差,我知道这里的this指的是全局对象window,因为setTimeout和setInterval都是作为全局函数,也就是window对象的方法存在的。但是这里有两个this:</p>
<p>第一个this:setTimeout(this.func, times)</p>
<p>第二个this: setTimeout(function(){ alert(this)},times);</p>
<p style="text-align: left">那到底哪一个&#39;this&#39;始终指向的是window呢?</p>
<h3><strong>二、执行环境、活动对象、变量对象、作用域链、this</strong></h3>
<p style="text-align: left">首先澄清一下几个概念。</p>
<h4>执行环境</h4>
<p style="text-align: left">执行环境定义了变量和函数有权访问的其他数据,决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个变量对象中。</p>
<p style="text-align: left">全局执行环境是最外围的一个执行环境。根据ECMAScript实现所在的宿主环境不同,表示全局执行环境的对象也不一样。在web浏览器中,全局执行环境被认为是window对象,因为所有的全局变量和函数都是作为window对象的属性和方法创建的。某个执行环境中的代码执行完毕后,该环境就会被销毁,保存在其中的所有变量和函数也随之销毁(全局执行环境直到应用程序退出时才会销毁)</p>
<p style="text-align: left">每个函数都有自己的执行环境。当执行流进入一个函数时,该函数的执行环境就会被推入一个环境栈中。而在函数执行后,栈将其环境弹出,把控制权返回给之前的执行环境。</p>
<h4>作用域链</h4>
<p style="text-align: left">当代码在一个环境中执行时,会创建变量对象的一个作用域链。<br>作用域链本质上是一个指向变量对象的指针列表,它只引用,但不实际包含变量对象。<br>作用域链的作用,是保证对执行环境有权访问的所有变量和函数的有序性。作用域链的最前端,始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数,则将其活动对象作为变量对象,活动对象在最开始时只包含一个变量,即arguments对象(这个对象在全局环境中是不存在的)。作用域链中的下一个变量对象来自包含(外部)环境,而再下一个变量对象则来自再下一个包含环境。这样一直延续到全局执行环境;全局执行环境的变量对象始终是作用域链中的最后一个对象。<br>标识符解析就是沿着作用域链一级一级地搜索标识符的过程。</p>
<h3>this</h3>
<p style="text-align: left">this是一个对象,this对象是在运行时基于函数的执行环境绑定的。<br>在全局函数中,this等于window;而当函数作为某个对象的方法调用时,this等于那个对象。<br>匿名函数的执行环境具有全局性,其this通常指向window。这是因为,每个函数再被调用时都会自动取得两个特殊变量:this和arguments内部函数在搜索这两个变量时,只会搜索到其活动对象为止,因此永远不可能访问到外部函数中的这两个变量。</p>
<h4>闭包</h4>
<p style="text-align: left">闭包是指有权访问另一个函数作用域中的
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP