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.

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

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

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

es6箭头函数中this的问题

开门见山 直接上代码 var test1=()=>{ console.log(this.name,this); } window.name = "ob...
  • hiaia
  • hiaia
  • 2016年12月03日 22:24
  • 2320

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

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

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

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

es6 学习笔记(一)箭头函数

由于es6的新增语法很多,就想着写点东西,方便自己记下来,也可以把学习过程中遇到的一些问题跟大家分享。 参考链接:http://es6.ruanyifeng.com/#docs/let...
  • Sherlbon
  • Sherlbon
  • 2017年03月23日 14:44
  • 202

UML图箭头关系简介

前言:有时随着项目开发业务不断的复杂化,脑海中无法对项目有个清晰的认识,抑或是当你处于架构师级别需要向下属程序员讲解项目中使用的整体架构的时候,它就显得尤为重要,特别是web端复杂业务的开发.鉴于此,...
  • u012233285
  • u012233285
  • 2016年10月13日 14:58
  • 848

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

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

this指向 最简单的两种!

原文地址:http://www.zhangyunling.com/?p=251     在我们刚刚使用JS时,不知道您是否因为一些东西而思路直接混乱的情况,反正我是有过,曾经有段...
  • qq_34986769
  • qq_34986769
  • 2016年08月07日 18:12
  • 792

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
  • 1246

iOS_21团购_顶部菜单和弹出菜单联动

最终效果图: 各控件关系图1: \ 各控件关系图2: 点击Dock上面的按钮DockItem, 创建经导航控制器包装的DealListController, 并且添...
  • u012576807
  • u012576807
  • 2014年08月17日 17:52
  • 1209
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:setTimeout中this的指向,使用箭头函数后this的指向
举报原因:
原因补充:

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