ES6类静态函数中如何访问实例this作用域？是否存在认知遗漏？

这个问题其实戳中了JavaScript类里静态方法和实例方法的核心区别，先给你理清楚为什么你原来的代码里拿不到值，再给你可行的解决方案：

为什么你的代码里Example.name和this.name都是undefined？ #

首先要明确：静态方法是属于类本身的，而不是属于类的某个实例。所以在静态方法hello里，this指向的是Example这个类本身，而不是你通过new Example()创建的实例。

• 你访问的Example.name：JavaScript里每个类都有一个内置的name属性，值是类的名称字符串（也就是"Example"），但你并没有给Example类本身定义过name属性，而实例的this.name是属于每个实例的独立属性，和类的name完全不是一回事。
• 你访问的this.name：因为静态方法里的this指向类Example，所以这里等价于Example.name，自然也拿不到实例的'Johan'。

怎么在静态方法里访问实例的this？ #

因为静态方法和实例是完全分离的，默认没法直接访问实例的this，你需要通过以下两种方式来实现：

1. 显式传入实例作为参数

这是最常用的方案——把需要访问的实例直接传给静态方法，然后通过参数来访问实例的属性：

class Example {
  constructor() {
    this.name = 'Johan';
  }
  static hello(instance) {
    console.log(instance.name); // 输出 'Johan'
  }
}

// 使用方式
const myInstance = new Example();
Example.hello(myInstance);

2. 在静态方法内部创建新实例

如果你不需要访问外部已有的实例，也可以在静态方法里直接创建一个新的类实例，然后访问它的属性：

class Example {
  constructor() {
    this.name = 'Johan';
  }
  static hello() {
    const newInstance = new Example();
    console.log(newInstance.name); // 输出 'Johan'
  }
}

// 使用方式
Example.hello();

总结 #

静态方法的设计初衷就是为类提供不依赖实例的工具方法，所以它本身不会绑定到任何实例的this。如果你的逻辑必须访问实例的属性，要么把实例传进去，要么在方法内部创建实例，这两种方式都能解决你的问题。

内容的提问来源于stack exchange，提问作者Nicos