JavaScript 静态方法

静态方法的概念

静态方法是定义在类本身上的方法，而不是实例上的方法。在 JavaScript 中，使用 static 关键字定义静态方法。静态方法通常用于与类本身相关的操作，而不是与实例相关的操作。

静态方法的定义

1. 基本语法

使用 static 关键字定义静态方法：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  static createAdult(name) {
    return new Person(name, 18);
  }

  static compareAge(person1, person2) {
    return person1.age - person2.age;
  }
}

// 调用静态方法
const adult = Person.createAdult("John");
console.log(adult.name); // 输出: John
console.log(adult.age); // 输出: 18

const person1 = new Person("John", 30);
const person2 = new Person("Jane", 25);
console.log(Person.compareAge(person1, person2)); // 输出: 5

// 实例不能访问静态方法
// console.log(person1.createAdult); // 输出: undefined

2. 静态方法与实例方法的区别

特性	静态方法	实例方法
定义方式	使用 static 关键字	直接定义
调用方式	通过类名调用	通过实例调用
this 指向	指向类本身	指向实例
继承	可以被子类继承	可以被子类继承和重写

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

  // 实例方法
  greet() {
    return `Hello, ${this.name}!`;
  }

  // 静态方法
  static create(name) {
    return new Person(name);
  }
}

// 调用实例方法
const person = new Person("John");
console.log(person.greet()); // 输出: Hello, John!

// 调用静态方法
const person2 = Person.create("Jane");
console.log(person2.name); // 输出: Jane

静态方法的应用

1. 工厂方法

静态方法可以用作工厂方法，创建类的实例：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  static createAdult(name) {
    return new Person(name, 18);
  }

  static createChild(name) {
    return new Person(name, 10);
  }
}

const adult = Person.createAdult("John");
console.log(adult.name); // 输出: John
console.log(adult.age); // 输出: 18

const child = Person.createChild("Jane");
console.log(child.name); // 输出: Jane
console.log(child.age); // 输出: 10

2. 工具方法

静态方法可以用作工具方法，提供与类相关的功能：

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

  static subtract(a, b) {
    return a - b;
  }

  static multiply(a, b) {
    return a * b;
  }

  static divide(a, b) {
    if (b === 0) {
      throw new Error("Division by zero");
    }
    return a / b;
  }
}

console.log(MathUtil.add(5, 10)); // 输出: 15
console.log(MathUtil.subtract(10, 5)); // 输出: 5
console.log(MathUtil.multiply(5, 10)); // 输出: 50
console.log(MathUtil.divide(10, 2)); // 输出: 5

3. 单例模式

静态方法可以用于实现单例模式：

class Singleton {
  static instance;

  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }

    this.value = Math.random();
    Singleton.instance = this;
  }

  static getInstance() {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }

  getValue() {
    return this.value;
  }
}

// 使用静态方法获取单例
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // 输出: true
console.log(instance1.getValue()); // 输出: 随机值
console.log(instance2.getValue()); // 输出: 与上面相同的随机值

4. 验证方法

静态方法可以用于验证数据：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  static validate(person) {
    if (!person.name || typeof person.name !== "string") {
      return false;
    }
    if (!person.age || typeof person.age !== "number" || person.age < 0) {
      return false;
    }
    return true;
  }
}

const person1 = new Person("John", 30);
console.log(Person.validate(person1)); // 输出: true

const person2 = new Person("", -5);
console.log(Person.validate(person2)); // 输出: false

5. 常量定义

虽然 JavaScript 没有真正的静态常量，但可以使用静态属性模拟：

class Constants {
  static PI = Math.PI;
  static E = Math.E;
  static GRAVITY = 9.81;
}

console.log(Constants.PI); // 输出: 3.1415926535897696
console.log(Constants.E); // 输出: 2.718281828459045
console.log(Constants.GRAVITY); // 输出: 9.81

静态方法的继承

1. 子类继承父类的静态方法

子类可以继承父类的静态方法：

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

  static create(name) {
    return new Animal(name);
  }

  static getSpecies() {
    return "Animal";
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  static createWithBreed(name, breed) {
    return new Dog(name, breed);
  }
}

// 调用从父类继承的静态方法
const animal = Animal.create("Generic");
console.log(animal.name); // 输出: Generic

const dog = Dog.create("Rex"); // 继承自 Animal 的 create 方法
console.log(dog.name); // 输出: Rex

// 调用子类自己的静态方法
const dogWithBreed = Dog.createWithBreed("Rex", "German Shepherd");
console.log(dogWithBreed.name); // 输出: Rex
console.log(dogWithBreed.breed); // 输出: German Shepherd

// 调用从父类继承的静态方法
console.log(Animal.getSpecies()); // 输出: Animal
console.log(Dog.getSpecies()); // 输出: Animal（继承自父类）

2. 子类重写父类的静态方法

子类可以重写父类的静态方法：

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

  static getSpecies() {
    return "Animal";
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  static getSpecies() {
    return "Canis lupus familiaris";
  }
}

console.log(Animal.getSpecies()); // 输出: Animal
console.log(Dog.getSpecies()); // 输出: Canis lupus familiaris（重写后的方法）

3. 在子类静态方法中调用父类静态方法

在子类静态方法中，可以使用 super 关键字调用父类的静态方法：

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

  static getSpecies() {
    return "Animal";
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  static getSpecies() {
    const parentSpecies = super.getSpecies(); // 调用父类的静态方法
    return `${parentSpecies}: Canis lupus familiaris`;
  }
}

console.log(Animal.getSpecies()); // 输出: Animal
console.log(Dog.getSpecies()); // 输出: Animal: Canis lupus familiaris

静态方法的最佳实践

1. 命名规范

静态方法名应该使用驼峰命名法（camelCase），与实例方法相同：

// 好的做法
class MathUtil {
  static add(a, b) {
    return a + b;
  }
}

// 不好的做法
class MathUtil {
  static ADD(a, b) {
    return a + b;
  }
}

2. 合理使用静态方法

只在方法与类本身相关，而不是与实例相关时使用静态方法：

// 好的做法：与类相关的操作
class Person {
  static create(name) {
    return new Person(name);
  }
}

// 不好的做法：与实例相关的操作
class Person {
  constructor(name) {
    this.name = name;
  }

  static greet(person) {
    return `Hello, ${person.name}!`;
  }
}

// 更好的做法：使用实例方法
class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}!`;
  }
}

3. 避免在静态方法中使用 this

在静态方法中，this 指向类本身，而不是实例，因此应该避免在静态方法中使用 this 来访问实例属性：

class Person {
  static name = "Person";

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

  static getClassName() {
    return this.name; // 正确：this 指向类本身
  }

  // 不好的做法：静态方法中使用 this 访问实例属性
  static greet() {
    return `Hello, ${this.name}!`; // 这里的 this.name 是类的静态属性，不是实例的 name
  }
}

console.log(Person.getClassName()); // 输出: Person
console.log(Person.greet()); // 输出: Hello, Person!

4. 使用静态方法组织代码

使用静态方法可以将相关的工具函数组织在类中：

class StringUtil {
  static capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
  }

  static truncate(str, length) {
    if (str.length <= length) {
      return str;
    }
    return str.slice(0, length) + "...";
  }

  static isEmpty(str) {
    return !str || str.trim() === "";
  }
}

console.log(StringUtil.capitalize("hello")); // 输出: Hello
console.log(StringUtil.truncate("Hello, world!", 5)); // 输出: Hello...
console.log(StringUtil.isEmpty("")); // 输出: true

5. 静态方法与模块化

静态方法可以与模块化结合，提供命名空间：

// math.js
class MathUtil {
  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
}

export default MathUtil;

// 使用
import MathUtil from "./math.js";

console.log(MathUtil.add(5, 10)); // 输出: 15

静态方法的常见错误

1. 尝试通过实例访问静态方法

静态方法只能通过类名调用，不能通过实例调用：

class Person {
  static create(name) {
    return new Person(name);
  }
}

const person = new Person("John");
// 错误：尝试通过实例访问静态方法
// console.log(person.create('Jane')); // 错误：person.create is not a function

// 正确：通过类名调用静态方法
const person2 = Person.create("Jane");

2. 在静态方法中使用实例属性

静态方法不能直接访问实例属性，因为它不绑定到特定实例：

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

  // 错误：静态方法中使用实例属性
  static greet() {
    return `Hello, ${this.name}!`; // this 指向类本身，不是实例
  }
}

// 正确：将实例作为参数传递
class Person {
  constructor(name) {
    this.name = name;
  }

  static greet(person) {
    return `Hello, ${person.name}!`;
  }
}

const person = new Person("John");
console.log(Person.greet(person)); // 输出: Hello, John!

3. 混淆静态方法和实例方法

静态方法和实例方法的用途不同，应该根据需要选择合适的方法类型：

// 不好的做法：使用静态方法处理实例相关的操作
class Person {
  constructor(name) {
    this.name = name;
  }

  static greet(person) {
    return `Hello, ${person.name}!`;
  }
}

// 好的做法：使用实例方法处理实例相关的操作
class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}!`;
  }
}

4. 过度使用静态方法

不要过度使用静态方法，只在合适的场景下使用：

// 不好的做法：过度使用静态方法
class Person {
  static name = "Person";

  static setName(name) {
    this.name = name;
  }

  static getName() {
    return this.name;
  }
}

// 好的做法：使用类的实例
class Person {
  constructor(name) {
    this.name = name;
  }

  setName(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

小结

静态方法是定义在类本身上的方法，使用 static 关键字定义。静态方法通常用于与类本身相关的操作，如创建实例、验证数据、提供工具函数等。静态方法可以被继承和重写，在子类中可以使用 super 关键字调用父类的静态方法。在使用静态方法时，应该遵循命名规范，合理选择使用场景，避免常见错误，以提高代码的可读性和可维护性。