骨干箭头功能和这个

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在我的初始化中访问set.

我使用的骨干版本1.3.3与Babel 2015

Answer 1

我很困惑你为什么要在这里使用箭头功能.从精细手册:

一个箭头函数表达式具有比函数表达式较短的语法,并且不结合其自身的this,arguments,super,或new.target.箭头功能始终是匿名的.这些函数表达式最适合非方法函数,不能用作构造函数.

并且:

箭头函数用作方法

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

箭头函数不定义("绑定")它们自己的this.

箭头函数的重点是具有一个没有所有OO东西的短格式函数(例如this),它们实际上适用于您不关心的情况,this例如:

some_array.map(e => e * 2)

鉴于这种:

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

的值this在(b)中是完全一样的在(a)中.this在你的一个视图方法中,如果没有重要的kludgery和体操,它将永远不会是视图实例(即便如此,它甚至可能无法实现initialize箭头功能).

简介:不要这样做,这不是箭头功能的用途.