Question

如果我通过这个＆＃39;测试＆＃39;从模块A到模块B的功能：

 //A.js
import B from './B'
export default {
    self: this,
    test: ()=> {
        console.log(self === this)  // this should return true but doesn't because when B calls it, "this" is B
    },
    initA:function() {
        B.initB(this.test); // b is undefined here
    }
};

//B.js
export default {
  callback: null,
  initB: function (func) {
    callback = func;
  },
  startTest: function () {
    this.callback();
  }
};

当我在B.js中运行callback（）时，this的范围仍然是B？如果我将此功能设为箭头功能，也无法工作。

我创建了一个展示此问题的回购：

https://github.com/es6Test/babel-test

希望有经验的人能够提供快速简便的解决方案。

Answer 1

您在ES6模块的顶层有一个静态声明的lambda，其中没有要绑定的this周围。您永远不会明确bind该函数，因此this的值应该是未定义的。它看起来像Babel，在进行转换时，没有提供强制未定义的绑定，你最终得到了之前的this。

对于具有箭头功能的对象文字，似乎存在一些混淆。箭头函数在声明时采用周围范围的this值;对象文字不计为作用域，因此箭头函数不会绑定到对象。

如果要绑定回调，只需将A模块更改为：

即可

export default {
  self: this,
  makeTest: function () {
    return () => {
      console.log(self === this)
    };
  },
  initA: ()=> {
    B.initB(this.makeTest());
  }
};

它应该开始工作了。如您所见，箭头函数现在位于对象上调用的实际方法中。

您还有一个切线问题，即import 'B'行要导入./B.js文件，但实际上是在寻找node_modules/B/[entrypoint].js（即使涉及到网络包）。

将模块A的回调传递给B并绑定它，仍然具有B的范围。使用babel

1 个答案: