JavaScript中setTimeout的作用域以及this指向问题

setTimeout是window对象下的一个方法，常见用法就是让某个方法延迟执行，伴随着此方法的使用会带来一个this指向的问题，以前都是听说，今天终于实际遇到了。还是老规矩一般的先上一句JavaScript高级程序设计中的一句话：超时调用的代码都是在全局作用域中执行的，因此函数中的this的值在非严格模式下指向window对象，在严格模式下是undefined。接下来针对非严格模式下写一下测试情况。

问题引出：

 

那么问题来了，要输出正确的myName的值要如何修改程序？

 

下面就伴随着测试结果一步一步的解决掉这个问题。首先，setTimeout方法接受两个参数，第一个是要执行的代码或者函数，第二个是延迟的时间。经过四种情况下的测试，setTimeout中所执行的函数中的this，永远指向window，注意，此处说的是延迟执行函数中this永远指向window。下面是四种不同代码的测试结果

 

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

 应该可以得出结论了：setTimeout中的延迟执行函数中的this指向了window，必须要强调，是延迟执行函数中的this，因为，一般情况下是存在两个this的，一个是setTimeout调用环境中的this，一个就是延迟执行函数中的this，这两个this有时候是不同的，所以，继续测试。

还是先上结论，setTimeout调用环境中的this指向是需要根据上下文来确定的，默认为window，延迟执行函数中的this就是指向window。至于前者，根据上下文确定this指向应该还是很清楚的，这里只测试一下函数作为方法调用和作为构造函数调用时候this的情况，上图：

 

-------------------------------------------------------------------------------------------------------

 上了代码后就可以发现，构造函数调用之后this的指向就是新new出来的实例对象，而作为方法调用之后this的指向其外层对象，一般为window；搞清楚这些之后就应该进入正题了，应该解决开篇的问题啦。还是继续上代码：

 

 上图中的结果应该是想象之中的，上下文环境都是window，所以打印出来的都是in the window

 

这个图中的结果不晓得是不是想象之中的，但是确实就是这样的，因为第二个里边有一个匿名函数，这就是两段代码最大铜的不同，只要是函数，就会有它的作用域，把上述代码写成下边这样也许就很清楚了。

 

 到此应该开篇的问题已经有了一些解决的思路了，想要输出myName应该不是什么难事了，最主要的问题根源就是在setTimeout执行过程中this的指向问题，直接上代码和测试结果了。

 

更多内容可以微信扫描二维码，一起学习前端知识