JavaScript中this.property与ClassName.property访问属性的差异疑问

嘿，这个问题其实是刚接触JS类的时候很容易踩的一个小坑——你混淆了类的静态成员和实例对象的成员啦，我来给你掰扯清楚～

首先看你写的代码：在Car类的构造函数里，你用this.type = type这种写法，是把type、year、colour这些值存在每一个新创建的实例对象身上的。比如你用new Car()创建的car1，它自己就带着type: "Audi"、year: "12 Years"这些属性，这些是实例独有的属性。

那为什么Car["type"]和Car.year会返回undefined呢？因为Car是类本身，你直接访问Car.property的时候，是在找类的静态属性——也就是挂载在类这个对象上，而不是挂载在实例上的属性。你压根没给Car类定义过type、year这些静态属性，所以自然拿不到值。

而this.colour能拿到Black，是因为在类的实例方法（比如alerter）里，this指向的是调用这个方法的具体实例，这里就是car1，所以它能拿到car1身上的colour属性。

举个更直白的例子：如果把Car类比作一个汽车工厂，那么每个new Car()出来的实例就是一辆具体的车，每辆车有自己的型号、年份、颜色（实例属性）；而工厂的总生产数量、品牌总部地址这些属于工厂本身的数据，才是类的静态属性，用Car.totalCars这种方式访问。

如果把你的代码改成下面这样，就能正常拿到所有值了：

class Car {
  constructor(type, year, colour) {
    this.type = type;
    this.year = year;
    this.colour = colour;
  }
  alerter() {
    alert(this.type + " " + this.year + " " + this.colour);
  }
}
const car1 = new Car("Audi", "12 Years", "Black");
car1.alerter(); // 弹出 "Audi 12 Years Black"

如果想试试静态属性的用法，可以这么写：

class Car {
  // 定义一个静态属性，所有实例共享
  static factoryName = "AutoFactory";
  
  constructor(type, year, colour) {
    this.type = type;
    this.year = year;
    this.colour = colour;
  }
  
  showFactory() {
    // 实例方法里也能访问类的静态属性
    alert("生产工厂：" + Car.factoryName);
  }
}

const car1 = new Car("Audi", "12 Years", "Black");
car1.showFactory(); // 弹出 "生产工厂：AutoFactory"
console.log(Car.factoryName); // 直接访问类的静态属性，输出 "AutoFactory"

最后总结一下核心区别：

• this.property：访问当前调用方法的实例对象的属性，每个实例都有独立的一份数据；
• ClassName.property：访问类本身的静态属性，所有实例共享这一份数据，和单个实例的状态无关。

备注：内容来源于stack exchange，提问作者ProgramFreak