ES6箭头函数内this指向问题

最新推荐文章于 2022-12-30 14:30:27 发布

原创最新推荐文章于 2022-12-30 14:30:27 发布 · 635 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #前端 #JavaScript

本文深入探讨了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);
  }
};