关于setTimeout函数中的this指向问题

为什么setTimeout函数的延迟执行函数中this指向window，但是延迟执行函数是箭头函数this指向obj？

根据下面的两点原因解释，foo和foo2中的this都指向obj，但是其中setTimeout，它的第二个this指向应该是window，至于为什么foo2的this也指向obj，原因在于foo2中setTimeout的第一个参数是箭头函数，箭头函数没有自己的this，它的this跟父级的this指向一致，都指向obj。

var obj = {name: 'name',foo: function () {console.log(this); // Object {name: "name"}setTimeout(function () {console.log(this);  // Window}, 1000);},foo2: function () {console.log(this); // Object {name: "name"}setTimeout(() => {console.log(this);  // Object {name: "name"}}, 2000);}
}

原因在于：

setTimeout函数挂载在window对象下，《javascript高级程序设计》中写道：“超时调用的代码都是在全局作用域中执行的，因此函数中的this在非严格模式下指向window对象，在严格模式下是undefined。

将setTimeout调用环境下的this称为第一个this，将延迟执行函数中的this称为第二个this，此时有结论：

 1.第一个this的指向是需要根据上下文来确定的，默认为window；2.第二个this的指向是固定的，就是指向window；

对于结论1的证明：
1.函数作为方法调用还是构造函数调用，this是不同的

function Foo() {this.value = 42;this.method = function() {// this 指向全局对象alert(this)   // 输出window  第二个thisalert(this.value); // 输出：undefined   第二个this};setTimeout(this.method, 500);  // this指向Foo的实例对象  第一个this
}
new Foo();

2.在外层添加一层代码，第二个this可以访问到window上的value

var value=33;
function Foo() {this.value = 42;this.method = function() {// this 指向全局对象alert(this)   // 输出window    第二个thisalert(this.value); // 输出：33   第二个this};setTimeout(this.method, 500);  // 这里的this指向Foo的实例对象  第一个this
}
new Foo();

可以看出method方法中的this指向window，因为可以输出外层value的值。
那么为什么setTimeout中的this指向的就是Foo的实例对象呢？
在setTimeout中的this是可以根据上下文而改变的。
接下来验证一下：

function method() {alert(this.value);  // 输出 42  第二个this
}
function Foo() {this.value = 42;setTimeout(this.method, 500);  // 这里this指向window   第一个this
}
Foo();

Foo()执行的时候，method方法放到外层，此时setTimeout中的this.method中的this指向window，因此可以调用到method方法。method方法中的this仍然指向window，当Foo()执行的时候，对window.value进行了赋值this.value=42，此时输出42.

结论：

setTimeout中的第一个this的指向是根据上下文来确定的，默认指向window。

对于结论2的证明：
1.直接使用

setTimeout('console.log(this)',1); //Window

2.在一个对象中调用

var obj = {say:function(){setTimeout('console.log(this)',1);}
}
obj.say() //Window

3.将执行的代码换成匿名函数

var obj = {say:function(){setTimeout(function(){console.log(this);},1);}
}
obj.say() //Window

4.将执行的代码换成函数引用

function talk(){console.log(this);
}
var obj = {say:function(){setTimeout(talk,1);}
}
obj.say() //Window

结论：

setTimeout中的延迟执行函数中的this指向window；

关于setTimeout函数中的this指向问题相关推荐

关于函数中的this指向问题
关于函数中的this指向问题前言一.普通函数中this指向二.对象里面的this指向三.函数表达式中的this指向四.立即执行函数的this指向五.定时器计时器中this的指向六.箭头函 ...
ES6箭头函数中的this指向
1箭头函数中的this (1)箭头函数中没有this : 这意味着 call() apply() bind() 无法修改箭头函数中的this (2)箭头函数中的this指向 :访问上一个作用域的thi ...
React之函数中的this指向
我们都知道在React中使用函数时,有两种写法,一是回调函数,二是直接调用,但需要在构造函数中绑定this,只有这样,函数中的this才指向本组件总结一下没有绑定this的函数中的this指向不管 ...
深入理解call、apply、bind（改变函数中的this指向）
在JavaScript中call.apply.bind是Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这三个方法进行 ...
JavaScript学习（七十）—函数中this的指向问题
JavaScript学习(七十)-函数中this的指向问题一.这些this的指向,是当我们调用函数的时候确定的,调用方式的不同决定了this的指向不同,一般指向我们的调用者
JS高级——深入剖析函数中的this指向问题
一.this到底指向什么呢? 我们先说一个最简单的,this在全局作用域下指向什么? 这个问题非常容易回答,在浏览器中测试就是指向window 但是,开发中很少直接在全局作用于下去使用this,通常都 ...
普通函数和箭头函数中的this指向
普通函数的this指向Window function a(){console.log(this) } a() //Window Dom元素绑定事件时的this,句柄里的 this 值是该元素的引用 d ...
函数中的this指向
1. 普通函数的this 普通函数的this : this就是谁调用 this就指向谁 this是在调用的时候确定的 function f1(){console.log(this); } f1(); ...
嵌套函数中的this指向的对象
來源:http://www.cnblogs.com/mier/archive/2009/05/07/1452231.html 我们通过一个测试来举出所有的情况,然后用自己的debug方法输出结果来判断 ...

关于setTimeout函数中的this指向问题

关于setTimeout函数中的this指向问题相关推荐

最新文章

热门文章