Es6 Fetch/Promise 语境

Question

在浏览器中，我试图通过 Reflux.js 操作使用 ES6 promise 和 ES6 fetch，但我无法在匿名箭头函数中绑定 '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 
  })
});

所以我想我弄错了箭头函数的工作原理？我以为他们限制了这个的上下文？

None 以下示例有效。

例子。

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" context/meaning。您的结果可能更多地与您的环境（或 CrewActions.fetchCrew.listenAndPromise 绑定 "this" 的对象）有关，而不是内部函数本身。

Es6 Fetch/Promise 语境

Es6 Fetch/Promise Context

javascript

ecmascript-6

arrow-functions