JavaScript Class 奇怪的范围

JavaScript Class Weird Scoping

假设我有两个文件。一个带有 class 的文件,其中方法 hello 只是 console.logs this:

// Class.js
class Test {
  constructor() {
    this.inside = true;
  }

  hello() {
    console.log('inside hello')
    console.log(this);
  }
}

module.exports = new Test();

和另一个执行此 class 方法 hello 的文件:

// index.js
const Test = require('./Class.js');

Test.hello();
// -> 'inside hello'
// -> { inside: true } 

一切都按预期工作,hello() 方法中的 this 具有正确的范围。 但是,当我创建 class 的新实例并导出 just hello 这个新实例时:

// Class.js
class Test {
  constructor() {
    this.inside = true;
  }

  hello() {
    console.log('inside hello')
    console.log(this);
  }
}

module.exports = (new Test()).hello; // <- just hello is exported

然后 hello() 的范围发生了变化,它似乎不再是 class 的一部分:

// index.js
const hello = require('./index.js');

hello();
// -> 'inside hello'
// -> undefined

为什么这个单一的导出函数表现如此不同,这是有原因的吗?


我在 Python 中尝试过,它有效(也许在其他语言中也有效):

# Class.py
class Class:
  def __init__(self):
    self.test = 'hello'

  def hello(self):
    print('inside hello')
    print(self)

hello = Class().hello


# index.py
from Class import hello

hello()
# -> 'inside hello'
# -> <Class.Class instance at 0x10e26e488>

当您独立调用 hello() 时,它没有调用上下文 - 它不是从对象调用的,而该对象通常是其调用上下文。 (例如 Test.hello(); - 调用上下文在该行中为 Test

如果你想绑定它的调用上下文以便它可以作为一个独立的函数使用,你应该导出 bound 函数,例如:

const test = new Test();
module.exports = test.hello.bind(test);

他们有不同的上下文:
在第一种情况下,"hello" 绑定到 "Test" 对象。
在第二个中,"hello" 绑定到 "global scope" 即 "undefined".
如果你在网络浏览器中 运行 第二个,你将得到 "window" 对象,它是浏览器中的全局上下文。