ES6-你不知道的箭头函数

一谈到ES6的箭头函数，大家可能想到的优点就是语法更简洁，因为去掉了return、function、{}等输入。

但是设计者果真就是出于简洁的目的推出的箭头函数吗？显然不是。

=> 箭头函数this设计的主要目的，以特定的方式改变this的行为特性，解决this相关编码的一个常见的痛点。

来看一个例子来看看这个痛点：

var utils = {
  getData:function(a,b){
    var self = this;
    builtinModules.addEventListener('click',function(){
      self.getData(12,34);
    },false)
  }
}

在这个例子里面，为了确保this的指向正确，所以我们用了一个变量缓存this：

 var self = this;

然后再通过self去调用 this。。

self.getData(12,34);

this是动态绑定的，在本例子中，getData（）的this 和 btn.click回调函数的this是不同。这种方式在ES5中太常见来

那么ES6推出的箭头函数，应该如何写？是怎么解决这个痛点呢？

  getData:function(a,b){
    // var self = this;
    builtinModules.addEventListener('click',() => {
      this.getData(12,34); // 这里的this 跟 getData{}函数体里面的this 保持一致
    
    },false);
  }

看到没有，也就是说，箭头函数，帮我们解决了 var self = this；self.xxxx（）的痛点。甚至你可以理解为箭头函数就是替代了 var self = this这种词法形式；

那么问题来了。。。这种情况该如何解决呢？？？

var utils = {
  getData:(a,b) => {
    // var self = this;
    builtinModules.addEventListener('click',() => {
      this.getUser（）;// error ！！！ 这里的this并不是指向的utils，所以访问不到getUser
    },false);
  },
  getUser:(a,b) => {
    // ...xxxx
  }
}

切记，箭头函数中的this，指向包围它的作用域，比如，此例中，this.getUser（）这个this，在getData中调用，那么这个this就是指向了getData。

此utils里面，不适用箭头函数来相互调用。

那么何时应该使用this函数呢？从一张图可以看出来：

最后，切记，千万别认为箭头函数就是为了少打字。不管多打字少打字，你得明白你输入的每个字的意义目的所在。

ES6-你不知道的箭头函数

猜你喜欢