在模块功能上使用绑定后

Question

我遇到一个与绑定有关的奇怪问题

我读过： Bind MDN

无数个SO问题，每个人似乎都忘记了bind 返回绑定函数

这里不是这种情况。

示例

我导出以下对象

const ErrorStore = {
  clearError : () => {
    this.setState({
      // removed for demo purpose
    });
  }
};

export default ErrorStore;

然后我像这样导入该对象：

import error from 'ErrorStore';
class AppStoreProvider extends Component {
  componentDidMount() {

    console.log(this); // AppStoreProvider
    const test = error.clearError.bind(this); 
    test(); // error , cannot read property 'setState' of undefined

  }
}

问题

在调用test时，此代码引发错误，似乎bind没有将AppStoreProvider绑定到clearError函数。

更多详细信息

我展示的这个例子是实际实现的一个非常愚蠢的版本。 但是，它仍然会引发错误

该实现使用以下功能从导入的商店对象创建新对象，但其功能绑定到AppStoreProvider：

bindStore(store) {
    return Object.assign({}, ...Object.keys(store)
      .map(key => (typeof store[key] === 'function' ?
        { [key] : store[key].bind(this) } :
        { [key] : store[key] })));
  }

问题

bind是否可以跨这样的文件工作？ 为什么this未定义

编辑06/11/2018

发布此问题后，我意识到该函数在定义为命名函数时已正确绑定。

export function clearError(){

  this.setState({
    error   : undefined,
    isError : false
  });

}

Answer 1

您不能绑定箭头函数，因为它们的上下文始终是按词法确定的（它们在其中声明的上下文不能更改）。而是使用动态确定其上下文的常规函数​​：

 const ErrorStore = {
  clearError() { // <<<
     this.setState({
       // removed for demo purpose
     });
   }
};