setTimeout中this的指向,使用箭头函数后this的指向

原创 2017年09月25日 12:13:38

示例1:

function foo(){
    setTimeout(function(){
        console.log(this);
    },100);
}

var obj ={a:1};
foo.call(obj);

示例2:

function foo(){
    setTimeout(()=>{
        console.log(this);
    },100);
}
var obj ={a:1};
foo.call(obj);

结果是:
示例1:Window;
示例2:Object {a: 1};
看似相近的代码,就一个箭头函数的区别,执行结果完全不一样。这是为什么?

示例1可以理解成以下伪代码:

function foo(){
    setTimeout(callback,100);
}
function setTimeout(fn,delaytime)
{
    ...
    fn();
    ...
}
var obj ={a:1};
foo.call(obj);

可以看到是直接执行的fn(),fn()前面没有任何调用的对象。这种情况下,默认绑定的对象就是全局对象Window。所以this是Window。

对于示例2,使用了箭头函数,等价伪代码相当于:

function foo(){
    var that = this;
    setTimeout(callback,100);
}
function setTimeout(fn,delaytime){
    fn();
}
function callback(that){
    console.log(that);
}
var obj ={a:1};
foo.call(obj);

阮一峰es6中说到,箭头函数中没有自己的this的,而箭头函数会默认使用父级的this,也就是从等价代码上看到的那样。所以setTimeout中使用了箭头函数,this就被指向了调用它的对象obj.

如下代码,foo()是被Window调用的,所以执行结果是window.

function foo(){
    setTimeout(()=>{
        console.log(this);
    },100);
}
foo();

直接执行setTimeout,

setTimeout(function(){
    console.log(this);
},100);

相当于是之前示例1等价伪代码中的那样。

setTimeout(fn,100);
function setTimeout(fn,delaytime){
    fn();
    ...
}
function fn(){
    console.log(this);
}

setTimeout中的fn(),没有其它对象调用它。所以它的默认调用对象就是Window.

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JS-箭头函数中的this的指向

一直对于ES6中箭头函数在使用的时候有些疑虑,其中一项就是this的指向问题。跟之前我所熟悉掌握的函数内部this的指向是有些地方不同的,但是在箭头函数中this到底指向谁,我模模糊糊的。所以为了搞清...

关于setInterval和setTImeout中的this指向问题

这几天在看阮一峰的es6入门,看到箭头函数这块,其中提到了定时器this指向问题,以前没注意到,查了下资料,下面这篇博文写不错。mark下 ---------------------------...
  • MrZZhou
  • MrZZhou
  • 2017年04月15日 14:20
  • 122

ES6---箭头函数与function定义函数有什么区别?在箭头函数中,this指向,构造函数,变量提升是如何表现的?

简洁 ///function定义函数 function aaa(a,b){ return a+b; }///箭头函数定义函数 var aaa=(a,b)=>{return a+b;} this...
  • Wbiokr
  • Wbiokr
  • 2017年07月20日 20:27
  • 719

ES6 箭头函数中的 this?(临时性保存)

是否局部(Lexical)?包括我在内的许多人,都会这么描述箭头函数里 this 的行为:局部的 this。什么意思呢? 点我 document.getElementById('demo'...

深入理解ES6箭头函数中的this

简要介绍:箭头函数中的this,指向与一般function定义的函数不同,比较容易绕晕,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。1、何为定义时绑...
  • liwusen
  • liwusen
  • 2017年04月20日 14:05
  • 2260

ES6(ECMAScript 6 ) 箭头函数以及js中的this

箭头函数定义一个箭头函数很简单,基本语法是: JS([param] [, param]) => { statements }param => expression param 是参数,根据参数...

vue-cli快速构建项目>>>>及引入jquery、jquery插件、this的指向 mounted钩子函数应用

1>首先安装nodejs 版本5.0以上 node -v  (测试安装好了没有--安装好了就不用安装了) **可以依赖淘宝镜像(如果需要就安装) npm install cnpm -g --regis...

修改attachEvent中this指向/匿名事件处理函数解绑方法

以下文字摘自:http://www.cnblogs.com/cczw/archive/2012/12/06/2805527.html

js函数作用域及this指向

Title 代码输出结果:

jQuery AJAX回调函数this指向问题

jquery ajax回调函数this指向问题
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:setTimeout中this的指向,使用箭头函数后this的指向
举报原因:
原因补充:

(最多只允许输入30个字)