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.

示例三:

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

如下代码,foo()是被Window调用的,foo()函数作用域中的this也是windows。箭头函数跟父级函数共享this。所以,执行结果是window.

示例四:

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

直接执行setTimeout,相当于是之前示例1等价伪代码中的那样,等价代码如下:

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ForMyQianDuan/article/details/78083786

es6 的箭头函数 =>

1  基本用法ES6 允许使用 “ 箭头 ” (=>)定义函数。var f = v => v; //上面的箭头函数等同于: var f = function(v) { re...
  • qq_30100043
  • qq_30100043
  • 2016-11-29 18:29:13
  • 4574

ES6中setTimeout函数的执行上下文

简介:setTimeout,延迟执行函数里的执行上下文(1)ES5中,setTimeout里面的函数的执行上下文为全局上下文,举例来说:function log(){ setTimeout(fun...
  • liwusen
  • liwusen
  • 2017-02-21 11:33:28
  • 4825

初步探究ES6之箭头函数

今天要介绍的是ES6中的箭头函数。语法我们先来看看箭头函数的语法:([param] [, param]) => { statements }param => expression param 是...
  • mevicky
  • mevicky
  • 2015-11-20 09:16:58
  • 20756

深入理解ES6箭头函数的this以及各类this面试题总结

ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,俘获了大批粉丝儿它也可能是面试中的宠儿, 我们关键要搞清楚 箭头函数和普通函数中的this一针见血式总结:普通函数中的thi...
  • yangbingbinga
  • yangbingbinga
  • 2017-03-11 19:16:05
  • 24493

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

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

setInterval遇到的问题

关于setInterval的作用以及它和setTimeout的区别就不多说了,这里只提醒两点: 1:setInterval参数中的那个函数的写法,加引号和不加引号不仅仅是写法有区别,作用也是有所区别...
  • duxingzhe0311
  • duxingzhe0311
  • 2012-01-10 09:52:58
  • 754

ES6箭头函数中的this绑定问题

关于this指向问题的讨论一直是学习js不可忽视的重要部分,那些一个又一个围绕this挖的笔试坑,仿佛永远也填不完 var obj={ fn:function(){ console.log(th...
  • u013344815
  • u013344815
  • 2017-06-13 16:15:40
  • 5894

箭头函数中的this

ES6中为我们提供了箭头函数,使用起来非常方便: const sum = (a,b) => a+b; sum(2,3);//5在箭头函数使用中,this和其他地方的使用是不同的。 箭头函...
  • u011455192
  • u011455192
  • 2017-03-16 16:49:05
  • 743

掌握JS中的“this” (二)

在上一篇文章 掌握JS中的“this” (一) 里面, 我们学会了如何正确使用JavaScript中的 this 关键字及其基本原理。我们也知道决定 this 指向哪个对象的关键因素, 是找出...
  • heLove
  • heLove
  • 2015-10-29 15:33:01
  • 241

深入理解React中的上下文this

写在前面JavaScript中的作用域scope 和上下文 context 是这门语言的独到之处,每个函数有不同的变量上下文和作用域。这些概念是JavaScript中一些强大的设计模式的后盾。在ES5...
  • u011413061
  • u011413061
  • 2016-07-19 14:04:31
  • 7800
收藏助手
不良信息举报
您举报文章:setTimeout中this的指向,使用箭头函数后this的指向
举报原因:
原因补充:

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