01. 静态字段的概念与定义方法
01.1 静态字段与静态方法的区别
在面向对象编程中，静态字段属于类本身，而不是对象实例，这意味着它的值对所有实例是共享的。与之对应，实例字段的值是每个对象独立拥有的。访问静态字段需要通过类名直接访问，例如 ClassName.field。
另外，静态方法同样属于类，通常用于不依赖具体实例即可完成的工具性操作。与实例方法相比，静态方法不能通过实例调用，必须通过 ClassName.staticMethod 的方式调用。静态字段和静态方法共同构成了“类级别的行为和状态”，有利于实现通用的工具库和全局常量。
01.2 公共静态字段的定义方式
ES6 引入了类的静态字段定义能力，最常见的写法是直接在类文本中使用 static 关键字进行字段初始化。公共静态字段可以直接暴露给外部使用，简单直观，便于维护全局常量和跨模块共享的数据。
下面给出一个简单的示例，展示如何定义并通过类名进行访问：
class MathUtil {static PI = 3.14159; // 公共静态字段static areaOfCircle(r) { // 静态方法（正如下方所示，方法也可以是静态的）return MathUtil.PI * r * r;}
}
通过 MathUtil.PI 可以获取圆周率常量，通过 MathUtil.areaOfCircle(2) 调用相关方法。需要注意的是，不同运行环境对静态字段的原生支持程度不同，在老旧浏览器中可能需要通过编译工具链（如 Babel）进行转换。
02. 私有静态字段与静态块的使用
02.1 私有静态字段的语法要点
如果希望对静态字段实现封装，可以使用私有静态字段（以 # 开头）。私有静态字段只能在类的内部被访问，外部无法直接读取或写入，从而保护内部状态不被外部滥用。私有静态字段通常与静态方法搭配使用，提供受控的对外访问入口。这提高了封装性和代码可维护性。
下面是一个私有静态字段的示例，展示如何在类中维护一个计数器：
class Counter {static #count = 0; // 私有静态字段static increment() { Counter.#count++; return Counter.#count; }static getCount() { return Counter.#count; }
}
注意：私有静态字段只能在类的内部被访问，外部不能使用 Counter.#count 的方式访问。使用私有字段可以避免外部直接修改内部状态，提升代码鲁棒性。
02.2 静态块的初始化时机与常用场景
静态块（static block）提供了一种在类加载阶段执行初始化逻辑的方式，它会在类定义完成后执行一次。静态块非常适合进行复杂初始化、缓存预热、或者基于初始静态字段的计算逻辑。通过静态块，可以把初始化逻辑集中放在一个地方，提升代码组织性。
下面的示例演示了如何在静态块中初始化私有缓存，并在外部通过方法访问该缓存的状态：
class Config {static API_BASE = 'https://api.example.com';static #CACHE; // 私有静态缓存static { // 静态块初始化逻辑Config.#CACHE = new Map();Config.#CACHE.set('ready', true);}static isReady() { return Config.#CACHE.get('ready'); }
}
通过 Config.API_BASE 可以访问全局配置，Config.isReady() 则用于判断静态缓存的状态。由于静态块在类加载时执行，确保了 Cache 的初始化时序的确定性，从而避免在运行时出现未初始化的问题。
03. 实战场景：静态字段在前端架构中的应用
03.1 实战：配置与缓存的静态字段设计
在前端应用中，将配置项和可复用的数据缓存化到静态字段中，可以实现跨模块共享、减少重复创建，从而提升性能和代码可维护性。静态字段常用于存放 API 基础地址、全局超时、以及可复用的缓存实例等。下面给出一个实际场景的实现，展示如何通过静态字段实现全局配置和简单缓存：
class ApiConfig {static API_BASE = 'https://api.example.com';static TIMEOUT = 8000;static #CACHE = new Map();static fetchWithCache(url) {if (ApiConfig.#CACHE.has(url)) {return ApiConfig.#CACHE.get(url);}// 模拟请求结果const data = { url, data: 'response' };ApiConfig.#CACHE.set(url, data);return data;}static { ApiConfig.#CACHE.set('init', { ready: true }); }
}
通过 ApiConfig.API_BASE 和 ApiConfig.fetchWithCache，可以实现统一接口地址和简易缓存策略，避免重复网络请求。同时，静态缓存通过私有字段对外部进行受控暴露，提升了代码的安全性与稳定性。
03.2 实战：单例工具类与共享状态
另一个常见场景是使用静态字段实现“单例工具类”或共享状态。通过静态字段保存唯一实例或全局开关，可以确保应用中只有一个共享的状态入口，同时避免全局变量的污染。
class Logger {static level = 'info';static #enabled = true;static log(msg) {if (Logger.shouldLog()) {console.log(f'[{Logger.level}] {msg}');}}static shouldLog() { return Logger.#enabled; }static { // 静态块用于额外初始化Logger.#enabled = true;}
}
在该示例中，Logger.level 控制日志输出级别，而私有静态字段 Logger.#enabled 决定是否实际输出日志。通过静态方法控制访问，避免了直接对全局状态的乱写，使日志系统更加健壮与可控。
