静态属性和方法

静态方法

1. 定义静态方法

class MathUtils {
    static add(x, y) {
        return x + y;
    }

    static multiply(x, y) {
        return x * y;
    }

    static square(x) {
        return x * x;
    }
}

console.log(MathUtils.add(5, 3)); // 8
console.log(MathUtils.multiply(5, 3)); // 15
console.log(MathUtils.square(5)); // 25

2. 静态方法调用其他静态方法

class MathUtils {
    static add(x, y) {
        return x + y;
    }

    static addThree(x, y, z) {
        // 使用 this 调用其他静态方法
        return this.add(this.add(x, y), z);
    }
}

console.log(MathUtils.addThree(1, 2, 3)); // 6

3. 静态方法使用场景

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

    // 工厂方法
    static createAdult(name) {
        return new Person(name, 18);
    }

    // 工具方法
    static isAdult(person) {
        return person.age >= 18;
    }

    // 转换方法
    static fromJSON(json) {
        const data = JSON.parse(json);
        return new Person(data.name, data.age);
    }
}

const john = Person.createAdult('John');
console.log(john.age); // 18
console.log(Person.isAdult(john)); // true

const jsonString = '{"name":"Alice","age":25}';
const alice = Person.fromJSON(jsonString);
console.log(alice.name, alice.age); // 'Alice', 25

静态属性

1. 定义静态属性

class Circle {
    // 静态属性
    static PI = 3.14159;

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

    getArea() {
        // 使用静态属性
        return Circle.PI * this.radius * this.radius;
    }
}

const circle = new Circle(5);
console.log(circle.getArea()); // ~78.54
console.log(Circle.PI); // 3.14159

2. 静态常量

class HttpStatus {
    static OK = 200;
    static NOT_FOUND = 404;
    static INTERNAL_SERVER_ERROR = 500;
}

function handleResponse(response) {
    if (response.status === HttpStatus.OK) {
        console.log('Request successful');
    } else if (response.status === HttpStatus.NOT_FOUND) {
        console.log('Resource not found');
    }
}

3. 静态属性作为默认配置

class Config {
    static DEFAULT_SETTINGS = {
        theme: 'light',
        language: 'en',
        notifications: true
    };

    constructor(userSettings = {}) {
        this.settings = { ...Config.DEFAULT_SETTINGS, ...userSettings };
    }
}

const config1 = new Config();
console.log(config1.settings.theme); // 'light'

const config2 = new Config({ theme: 'dark' });
console.log(config2.settings.theme); // 'dark'
console.log(config2.settings.language); // 'en'

静态代码块

1. 静态初始化块 (ES2022)

class Database {
    static cache = new Map();

    // 静态初始化块
    static {
        this.cache.set('config', { host: 'localhost', port: 3306 });
        this.cache.set('credentials', { username: 'admin' });
        
        // 可以包含复杂的初始化逻辑
        const defaultSettings = this.loadDefaultSettings();
        this.cache.set('settings', defaultSettings);
    }

    static loadDefaultSettings() {
        // 复杂的初始化逻辑
        return { timeout: 5000, retries: 3 };
    }
}

console.log(Database.cache.get('config')); // { host: 'localhost', port: 3306 }

继承静态成员

1. 继承静态方法和属性

class Parent {
    static parentMethod() {
        return 'parentMethod';
    }

    static parentProperty = 'parent';
}

class Child extends Parent {
    static childMethod() {
        return 'childMethod';
    }

    static childProperty = 'child';
}

console.log(Child.parentMethod()); // 'parentMethod'
console.log(Child.parentProperty); // 'parent'
console.log(Child.childMethod()); // 'childMethod'
console.log(Child.childProperty); // 'child'

2. 重写静态方法

class Parent {
    static getClassName() {
        return 'Parent';
    }
}

class Child extends Parent {
    static getClassName() {
        return 'Child';
    }

    static getParentClassName() {
        return super.getClassName();
    }
}

console.log(Child.getClassName()); // 'Child'
console.log(Child.getParentClassName()); // 'Parent'

最佳实践

1. 使用静态方法实现工具函数
2. 使用静态方法创建工厂函数
3. 使用静态属性存储常量和配置
4. 使用静态初始化块执行复杂初始化
5. 避免在静态方法中使用 this 指向实例
6. 了解静态成员只能通过类名访问，不能通过实例访问
7. 静态方法适合不依赖实例状态的操作
8. 使用静态方法代替全局函数，提高模块化