javascript - 'this' 在 Reflux.createStore() 中未定义

Question

我尝试通过 Reflux 存储中的 this 设置状态属性，但每当我尝试设置属性时，都会收到以下错误:

未捕获类型错误:无法读取未定义的属性“触发器”

我使用 Babel 来编译我的 JSX，所以不确定这是否是问题所在，但我非常怀疑。

import Reflux from 'reflux';

import BoardActions from '../actions/BoardActions';

const BoardStore = Reflux.createStore({
  listenables: [BoardActions],
  getInitialState: () => {
    return {
      boards: []
    };
  },
  init: (state = undefined) => {
    if (state) {
      this.state = state;
    }

    this.triggers(this.state);        <-----     Getting the error here
    // this.state = { boards: [] };   <-----     This would also fail
  },

  ...

});

这是 BoardActions:

import Reflux from 'reflux';

import BoardSource from '../sources/BoardSource';

const BoardActions = Reflux.createActions({
  'fetch': { children: ['fetching', 'completed', 'failed'] }
});

BoardActions.fetch.listen(() => {
  BoardSource.fetch().then((data) => {
    BoardActions.fetch.completed(data);
  });
});

export default BoardActions;

谢谢!

<小时/>

更新

我可以看到转译器正在将编译后的代码中的 this 转换为 undefined，如下所示:

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _reflux = require('reflux');

var _reflux2 = _interopRequireDefault(_reflux);

var _BoardActions = require('../actions/BoardActions');

var _BoardActions2 = _interopRequireDefault(_BoardActions);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var BoardStore = _reflux2.default.createStore({
  listenables: [_BoardActions2.default],
  init: function init() {
    undefined.test = 'test';
  },
  onFetch: function onFetch() {},
  onFetchFetching: function onFetchFetching() {},
  onFetchCompleted: function onFetchCompleted(boards) {
    undefined.boards = boards;
    undefined.trigger(undefined.boards);
  },
  onFetchFailed: function onFetchFailed() {}
});

exports.default = BoardStore;
//# sourceMappingURL=BoardStore.js.map

但仍然不知道为什么会将 this 转译为 undefined。

Answer 1

因为您使用箭头函数来定义对象的方法(对于传递给 Reflux.createStore 的方法)。

在箭头函数 this 中，它是词法范围的，这意味着，在您的问题的上下文中，它是 未定义，因为它在词法上绑定(bind)到包含模块 (不管那是什么)。

参见 Babel online editor 中的示例.

查看更多 further explanation关于案例。

注意:我假设您熟悉基础知识，否则here是一本有关 ES6 的好书中一篇好文章的链接。