ES6箭头函数内this指向问题

本文深入探讨了ES6箭头函数内的this指向问题,对比ES5函数中的this行为,解释了箭头函数如何继承外部函数的this,以及这一特性在事件回调函数封装中的应用。

ES6箭头函数内this指向问题

    function foo(){
        console.log(this);
        return function(){
            console.log(this);
        }
    }
    var fn=foo.call({name:'zx'});//Obj
    fn();//window

以上代码为ES5写法,我们再foo函数执行时将其this执行修改为对象{name:'zx'},而后将执行结果保存到变量fn中,由于执行结果返回的是一个函数,所以我们将fn再执行一下就可以得到完整的函数执行结果了
从结果来看,函数foo的this指向了我们设置的对象,而其内部函数由于没有调用者(或者说调用者是window),所以它的this指向了window。

那么下面我们再看一下ES6中的写法

  function foo(){
        console.log(this);
        return ()=>{
            console.log(this);
        }
    }

    var fn = foo.call({name:'zx'})();//Obj
	fn();//Obj

和上面一样,我们将函数foo的this指向修改为{name:'zx'},然后依次执行函数,但这时我们发现了由函数foo执行后所返回的函数,即使没有调用者,它的this依然指向了{name:'zx};

结论: 箭头函数是没有自己的this的,他们的this其实都是最外层函数的this;所以以下代码的执行结果全为1

function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id);
      };
    };
  };
}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1

箭头函数可以让this指向固定化,这种特性很有利于封装回调函数。下面是一个例子,DOM 事件的回调函数封装在一个对象里面。

var handler = {
  id: '123456',

  init: function() {
    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值