骨干箭头功能和这个

Question

所以我只是将我的功能切换为使用箭头功能，现在this仅引用了我的视图的Object。

原始视图

var filterBar = Backbone.View.extend({
  initialize: () => {
    this.state = {
      teams: document.querySelectorAll('[data-team-default]')[0].innerHTML,
      comp: document.querySelectorAll('[data-comp-default]')[0].innerHTML,
      season: document.querySelectorAll('[data-season-default]')[0].innerHTML,
    };
  },
    el: '.filter-bar',
    templates: {
        home: require('../../../app/jade/games/index.jade')
    },
    events: {
        'click .filter-bar--filter-button': 'showFilter',
        'click .filter-bar--filter-list': 'changeFilter',
    },
  changeFilter: function (e) {
    const currentSelection = e.target.getAttribute('data-url');
    return false;
    },
  showFilter: function (e)  {
    console.info(this);
    e.stopImmediatePropagation();
    var t = $(e.currentTarget);
    this.closeFilters();
    t.siblings('ul').addClass('is-open');
    return false;
   },
  closeFilters: function (e) {
    var e = this.$el.find(".is-open");
    e.length && e.removeClass("is-open"),
     this.$el.hasClass("show-filters") && this.$el.removeClass("show-filters")
    }
});

控制台输出：

更新了视图

var filterBar = Backbone.View.extend({
  changeFilter: (e) => {
      ......
    },
  showFilter: (e) => {
      console.info(this);
      ......
    },
  closeFilters: (e) => {
      ......
    }
});

控制台输出：对象{}

为什么现在这只是引用视图的Object而不是视图本身。此外，如何在使用箭头功能时将其恢复为参考视图？

实际上我转向箭头功能的原因是在我的初始化中访问this.state。

我正在使用1.3.3

的主干版Babel 2015

Answer 1

我很困惑你为什么要在这里使用箭头功能。来自fine manual：

  

箭头函数表达式的语法短于函数表达式，并且不绑定自己的this，arguments，super或{{1 }}。箭头功能始终是匿名的。这些函数表达式最适合非方法函数，不能用作构造函数。

and：

  

箭头函数用作方法

     

如前所述，箭头函数表达式最适合非方法函数。 [...]

     

箭头函数没有定义（“绑定”）他们自己的new.target。

箭头函数的重点是具有一个没有所有OO内容的短格式函数（如this），它们真的适用于你不关心this的情况。如：

this

鉴于此：

some_array.map(e => e * 2)

（b）的// (a) var filterBar = Backbone.View.extend({ initialize: () => { // (b) } }); 值与（a）的值完全相同。你的一个视图方法中的this将永远不会是没有重要的kludgery和体操的视图实例（即便如此，甚至可能无法使this成为箭头函数。）

摘要：不要这样做，这不是箭头功能的用途。