ES6父类静态方法返回子类设置值时出现undefined问题求助

嘿，这个问题我之前也踩过坑，咱们来一步步搞清楚问题出在哪，以及怎么解决～

首先看你的代码：

class Component{ 
  constructor(name){ 
    this.__name = name; 
  } 
  static getName() { 
    return this.__name; 
  } 
} 
class ComponentChild extends Component{ 
  constructor(){ 
    super("myName"); 
  } 
}

当你调用console.log(ComponentChild.getName());（哦对了，你原代码里少了调用的括号，不过就算加上括号，结果还是undefined），问题的核心是你混淆了静态方法里this的指向，以及实例属性和类静态属性的区别：

问题根源 #

• 构造函数里的this.__name = name：这里的this是Component的实例对象，所以__name是每个实例独有的属性，和Component类本身没有关系。
• 静态方法getName里的this：当通过ComponentChild.getName()调用时，this指向的是ComponentChild这个类本身，而不是它的实例。类本身并没有__name这个属性，所以自然返回undefined。

解决方案 #

根据你的需求（通过子类的静态方法获取指定名称），有两种常用的处理方式：

方案1：直接给子类定义静态属性

这是最直接的方式，把__name定义为子类的静态属性，这样静态方法就能直接获取到：

class Component{ 
  static getName() { 
    return this.__name; 
  } 
} 
class ComponentChild extends Component{ 
  // 定义子类的静态属性
  static __name = "myName"; 
}

console.log(ComponentChild.getName()); // 输出 "myName"

方案2：同时支持实例和类获取名称

如果你既需要实例能访问名称，又需要静态方法返回名称，可以同时定义静态属性和实例属性：

class Component{ 
  constructor(name){ 
    this.__name = name; 
  } 
  // 静态方法：返回类的静态属性
  static getName() { 
    return this.__name; 
  } 
  // 实例方法：返回实例的属性
  getName() { 
    return this.__name; 
  } 
} 
class ComponentChild extends Component{ 
  static __name = "myName";
  constructor(){ 
    // 用子类的静态属性给实例初始化
    super(ComponentChild.__name); 
  } 
}

console.log(ComponentChild.getName()); // 输出 "myName"
const childInstance = new ComponentChild();
console.log(childInstance.getName()); // 输出 "myName"

总结 #

记住一个关键点：静态方法的this指向类本身，实例方法的this指向实例对象，两者的属性空间是完全分开的，不要搞混啦～

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