为什么从组件调用JavaScript类的静态方法时，类内定义的数据是undefined？

问题原因 #

static 修饰的方法是类本身的静态方法，和类的实例互相独立：

• 构造函数中的this指向类的实例对象，this.text是挂载在实例上的属性
• 静态方法内部的this指向类本身，而非实例，因此无法访问到实例上的text属性，返回undefined

解决方案 #

方案1：使用实例属性+实例方法（推荐，满足属性在类方法中复用的需求） #

去掉方法的static修饰符，使用时先实例化Sun类再调用方法，此时方法内部的this指向实例，可以正常访问构造函数定义的属性。

修改sun.js代码：

export default class Sun {
  constructor(){
    this.text = 'I\'m shining!';
  }
    
  // 去掉static修饰，改为实例方法
  testIfShining() {
    console.log("is the sun shining?");
    console.log(this.text);
  }
}

组件内调用代码：

import Sun from '../sun.js'

// ...
mounted() {
  // 先创建类实例
  const sunInstance = new Sun()
  // 调用实例方法
  sunInstance.testIfShining();
}

运行后控制台输出：

is the sun shining?
I'm shining!

该方案支持创建多个独立的Sun实例，各自的属性修改互不干扰，适合大多数业务场景。

方案2：保留静态方法，将属性改为静态属性 #

如果不需要创建实例，希望直接通过类调用方法，可以把text也定义为类的静态属性，挂载到类本身。

修改sun.js代码：

export default class Sun {
  // 定义静态属性，属于类本身
  static text = 'I\'m shining!';
    
  static testIfShining() {
    console.log("is the sun shining?");
    console.log(this.text);
  }
}

组件内的调用逻辑无需修改，直接调用Sun.testIfShining()即可正常输出结果。该方案所有调用方共用同一份静态属性，修改后全局生效。

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