骨干箭头功能和这个 [英] Backbone arrow function and this

问题描述

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

So I just switched my functions over to use arrow functions and now this only references the Object of my view.

原始视图

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

控制台输出:对象{}

Console output: Object {}

为什么现在只引用视图的对象而不引用视图本身.此外，如何在使用箭头功能时重新获得它以引用视图?

Why is it that now, this only references the Object of the view and not the view itselfs. Furthermore, how can I get it back to reference the view whilst using arrow functions?

实际上，我使用箭头功能的原因是访问初始化中设置的this.state.

Actually the reason I moved to arrow functions was to access this.state set in my initialise.

我正在将主干版本1.3.3与Babel 2015

推荐答案

我很困惑，为什么根本不想在这里使用箭头功能.摘自精细手册:

I'm puzzled why you want to use arrow functions here at all. From the fine manual:

箭头函数表达式的语法比函数表达式短，并且不绑定自己的this，arguments，super或new.target.箭头函数始终是匿名的.这些函数表达式最适合非方法函数，因此不能用作构造函数.

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.

和:

用作方法的箭头功能

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

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

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

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

箭头函数的重点是拥有一个简短的函数，而没有所有的OO东西(例如this)，它们的确意味着您不关心this的情况，例如:

The whole point of arrow functions is to have a short-form function without all the OO stuff (like this), they're really meant for cases where you don't care about this such as:

some_array.map(e => e * 2)

为此:

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

(b)处的this值与(a)处的完全相同.您的其中一种视图方法中的this绝不会是没有大量操练和体操的视图实例(即使那样，甚至可能无法使initialize成为箭头功能).

the value of this at (b) is exactly the same as at (a). this inside one of your view methods will never be the view instance without significant kludgery and gymnastics (and even then it might not even be possible to make initialize an arrow function).

摘要:请勿这样做，这不是箭头功能的作用.

Summary: Don't do that, that's not what arrow functions are for.

这篇关于骨干箭头功能和这个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！