在 JavaScript 的 类（Class） 中，静态属性、静态方法、实例属性 和 实例方法 是四种不同的成员，它们的主要区别在于 定义方式 和 调用方式。

---

🌟 1. 对比总结

类别	定义方式	存储位置	访问方式	调用对象
静态属性	static propertyName	类本身	ClassName.propertyName	通过类访问，不属于实例
静态方法	static methodName()	类本身	ClassName.methodName()	通过类访问，不属于实例
实例属性	this.propertyName = value	实例对象	instance.propertyName	通过实例访问，不属于类
实例方法	methodName()	实例对象	instance.methodName()	通过实例访问，不属于类

---

🌟 2. 代码示例

class Person {
  // 静态属性（类属性）
  static species = "Homo sapiens";

  // 实例属性（对象属性）
  constructor(name, age) {
    this.name = name; // 实例属性
    this.age = age;   // 实例属性
  }

  // 静态方法
  static describeSpecies() {
    return `We are ${this.species}`;
  }

  // 实例方法
  introduce() {
    return `Hi, I'm ${this.name}, and I'm ${this.age} years old.`;
  }
}

// 创建实例
const person1 = new Person("Alice", 25);

// 访问静态属性和静态方法（通过类访问）
console.log(Person.species);             // ✅ "Homo sapiens"
console.log(Person.describeSpecies());   // ✅ "We are Homo sapiens"

// 访问实例属性和实例方法（通过实例访问）
console.log(person1.name);               // ✅ "Alice"
console.log(person1.age);                // ✅ 25
console.log(person1.introduce());        // ✅ "Hi, I'm Alice, and I'm 25 years old."

// 不能用实例访问静态成员
console.log(person1.species);            // ❌ undefined
console.log(person1.describeSpecies());  // ❌ TypeError: person1.describeSpecies is not a function

---

🌟 3. 详细区别

🔹 静态属性（Static Property）

• 定义时使用 static 关键字。
• 只属于类本身，不会复制到实例对象上。
• 不能通过实例访问，只能通过类访问。

class Car {
  static brand = "Tesla";
}

console.log(Car.brand);   // ✅ "Tesla"
const myCar = new Car();
console.log(myCar.brand); // ❌ undefined

---

🔹 静态方法（Static Method）

• 定义时使用 static 关键字。
• 只属于类本身，不会复制到实例对象上。
• 不能通过实例访问，只能通过类访问。
• 可用于工具方法（如格式化、计算等）。

class MathUtil {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtil.add(3, 5)); // ✅ 8
const util = new MathUtil();
console.log(util.add(3, 5)); // ❌ TypeError: util.add is not a function

---

🔹 实例属性（Instance Property）

• 定义在 constructor 里，使用 this.propertyName = value 赋值。
• 只属于实例对象，每个实例都有自己的独立副本。
• 不能通过类访问。

class User {
  constructor(name) {
    this.name = name; // 每个实例都有自己的 name
  }
}

const user1 = new User("Alice");
const user2 = new User("Bob");

console.log(user1.name); // ✅ "Alice"
console.log(user2.name); // ✅ "Bob"
console.log(User.name);  // ❌ undefined

---

🔹 实例方法（Instance Method）

• 定义在 class 体内，不加 static 关键字。
• 属于实例对象，可以通过实例访问。
• 不能通过类直接调用。
• 通常用于操作实例数据。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    return `${this.name} makes a noise.`;
  }
}

const dog = new Animal("Dog");
console.log(dog.speak()); // ✅ "Dog makes a noise."
console.log(Animal.speak()); // ❌ TypeError: Animal.speak is not a function

---

🌟 4. 什么时候使用？

类型	使用场景
静态属性	适用于类级别的共享属性，如 species、maxSpeed
静态方法	适用于不依赖实例的工具方法，如 Math.random()
实例属性	适用于每个对象的独立数据，如 name、age
实例方法	适用于需要操作实例数据的方法，如 introduce()

---

🌟 5. 进阶用法

🔹 私有静态属性（#）

• JavaScript 允许定义私有静态属性，只能在类内部访问。

class Bank {
  static #totalBalance = 1000000; // 私有静态属性

  static getBalance() {
    return `Total balance: ${this.#totalBalance}`;
  }
}

console.log(Bank.getBalance()); // ✅ "Total balance: 1000000"
console.log(Bank.#totalBalance); // ❌ SyntaxError: Private field '#totalBalance' must be declared in an enclosing class

---

🔹 私有实例属性（#）

• 只能在类内部访问，外部无法直接访问。

class Account {
  #balance = 500; // 私有属性

  deposit(amount) {
    this.#balance += amount;
    return `New balance: ${this.#balance}`;
  }
}

const myAccount = new Account();
console.log(myAccount.deposit(100)); // ✅ "New balance: 600"
console.log(myAccount.#balance); // ❌ SyntaxError: Private field '#balance' must be declared in an enclosing class

---

🌟 6. 总结

类别	特点	访问方式	存储位置
静态属性	static propertyName	ClassName.propertyName	只存储在类上，不属于实例
静态方法	static methodName()	ClassName.methodName()	只存储在类上，不属于实例
实例属性	this.propertyName = value	instance.propertyName	只存储在实例对象上，不属于类
实例方法	methodName()	instance.methodName()	只存储在实例对象上，不属于类

🚀 💡 结论

• 静态成员（属性 & 方法） 适用于 类级别的数据或行为，不会拷贝到实例上。
• 实例成员（属性 & 方法） 适用于 每个对象的个性化数据或行为，只能通过实例访问。
• 使用 # 定义私有成员，保护数据不被外部访问。

✨ 掌握这四者的区别，有助于更清晰地设计 JavaScript 类！