javascript - Es6 获取/ promise 上下文

Question

在浏览器中，我尝试将 ES6 promise 和 ES6 fetch 与 Reflux.js 操作一起使用，但我无法在匿名箭头函数中绑定(bind)“this”的上下文。我究竟做错了什么？

* 更新 *我正在使用 Reflux.js ListenAndPromise，我可能应该在我的原始问题中添加它

* 更新 *

当我删除外部箭头功能时，上下文工作正常这有效:

CrewActions.fetchCrew.listenAndPromise(function() {
  fetch('crew.json')
  .then(function() {
    console.log(this);  // This is bound as expected 
  }.bind(this))
});

但这行不通

CrewActions.fetchCrew.listenAndPromise(function() {
  fetch('crew.json')
  .then(() => {
    console.log(this);  // undefined 
  })
});

所以我想我对箭头函数的工作方式有误？我以为他们限制了这个的上下文？

以下示例均无效。

例子。

CrewActions.fetchCrew.listenAndPromise(() => {

  console.log(this)
    // functor() {
    //    var triggerType = functor.sync ? "trigger" : "triggerAsync";
    //    return functor[triggerType].apply(functor, arguments);
    // }

  fetch('crew.json')
    .then(_.bind(() => {
      console.log(this) // undefined 
    }, this))


  fetch('crew.json')
    .then(() => console.log(this)); // undefined 

  fetch('crew.json')
    .then(function() {
      console.log(this) // undefined
    });


  fetch('crew.json')
    .then(function() {
      console.log(this) // undefined
    }.bind(this));
});

Answer 1

当我尝试简化版本的箭头函数版本时:

function listenAndPromise() {
 console.log('outer fn',this);
  return fetch('crew.json')
  .then(() => {
    console.log('arrowfn',this);  // undefined
  })
}
listenAndPromise.bind({test:4})();

它记录，外层 fn 对象 {test: 4} 然后是 arrowfn 对象 {test: 4}

这就是我所期望的。外部函数被赋予 this 上下文，箭头函数不添加新的“this”上下文/含义。您的结果可能与您的环境(或 CrewActions.fetchCrew.listenAndPromise 将“this”绑定(bind)到的对象)有关，而不是内部函数本身。