javascript - 如何在同一个文件中调用Javascript方法？

Question

我有这样的代码:

mycode.js:

export default {
  foo() {
    return "foo";
  },
  bar() {
    return "bar" + this.foo();
  }
}

其他代码.js:

import mycode from "mycode.js";

mycode.bar();  // usually works fine, returns "barfoo"

不过，我在箭头函数内调用 mycode.bar() 时遇到了困难。问题是 bar() 中的“this”不再引用 mycode 中的对象，它引用调用者的上下文。

如果我想继续使用这种代码风格来定义函数并导出它们，我如何在 bar() 中调用 foo() ？

我尝试将 mycode 中的方法绑定(bind)到导出的对象，但据我所知，您必须为每个方法单独执行此操作。

我也尝试在我的代码顶部执行此操作:

let self = this;

然后引用“self.foo()”，但在我将其分配给 self 时“this”尚未定义。

我可以完全改变代码风格。我可以这样定义每个函数:

mycode.js

function foo() {
  return "foo";
}

export default {
  foo, bar, ...
}

但是我必须单独命名每个函数。

一定有更好的方法。

Answer 1

问题不在于如何导出；而在于如何导出。这就是 this 在 JavaScript 中的工作原理。如果您在方法的上下文之外引用函数，则该方法的主体将不会具有一致的 this 除非您显式绑定(bind)它，并且您将无法绑定(bind)任何内容，除非有要绑定(bind)的标识符。例如，您可以这样做:

const mod = {
  foo() {
    return "foo";
  },
  bar() {
    return "bar" + this.foo();
  }
};

mod.foo = mod.foo.bind(mod);
mod.bar = mod.bar.bind(mod);

export default mod;

...但我敢肯定，这根本达不到您想要的简洁性。如果您使用类和支持类属性的 JS 版本，另一种选择是:

class MyModule {
  foo: () => "foo";
  bar: () => "bar" + this.foo();
}

export default new MyModule();

就我个人而言，虽然我不知道您的整体情况，但我认为命名导出更有意义，并且使用模块闭包而不是 this:

export function foo() {
  return "foo";
}

export function bar() {
  return "bar" + foo();
}