Backbone 箭头函数和这个

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) => {
      ......
    }
});

控制台输出：对象{}

为什么现在 this 只引用视图的对象而不是视图本身。此外，如何在使用箭头函数时让它返回以引用视图？

实际上，我转向箭头函数的原因是为了访问 this.state 在我的初始化中设置的。

我正在使用 backbone 版本 1.3.3 和 Babel 2015

Answer 1

我不明白你为什么要在这里使用箭头函数。来自 fine manual:

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. Arrow functions are always anonymous. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

and:

Arrow functions used as methods

As stated previously, arrow function expressions are best suited for non-method functions. [...]

Arrow functions do not define ("bind") their own this.

箭头函数的全部意义在于拥有一个没有所有 OO 东西的短函数（比如 this），它们真正适用于您不关心 [=12] 的情况=] 例如：

some_array.map(e => e * 2)

鉴于此：

// (a)
var filterBar = Backbone.View.extend({
  initialize: () => {
    // (b)
  }
});

this 在 (b) 的值与在 (a) 的值完全相同。 this 在你的一个视图方法中永远不会是视图实例，如果没有明显的笨拙和体操（即使那样，它甚至可能无法使 initialize 成为箭头函数）。

总结：不要那样做，那不是箭头函数的用途。

Backbone 箭头函数和这个

Backbone arrow function and this

javascript

backbone.js