父类封装通用逻辑（如数据管理、请求封装），子类继承并扩展功能，需在constructor中调用super()；静态成员属类本身，适合工具逻辑；instanceof可可靠验证继承关系。
定义父类并封装通用逻辑
父类通常承载项目中可复用的状态和行为，比如基础的数据管理、事件绑定或请求封装。构造函数接收必要参数，初始化实例属性；方法写在类体内，自动挂载到原型上。
- 类名首字母大写，符合约定（如 User、ApiService）
- 构造函数中用 this 绑定实例属性，避免引用类型共享问题（如数组、对象）
- 方法不加 function 关键字，也不用逗号分隔
示例：
class ApiClient {
constructor(baseURL) {
this.baseURL = baseURL;
this.headers = { 'Content-Type': 'application/json' };
}
async request(url, options = {}) {
const res = await fetch(this.baseURL + url, {
headers: this.headers,
...options
});
return res.json();
}
}
子类继承并扩展特定功能
使用 extends 声明继承关系，子类获得父类所有实例属性、原型方法和静态成员。关键是在子类 constructor 中第一行调用 super()，传入父类所需参数。
- super() 必须在访问 this 前调用，否则报 ReferenceError
- 子类可添加专属属性（如 token、timeout），也可重写父类方法实现定制逻辑
- 重写方法时用 super.methodName() 复用父类逻辑，再叠加处理
示例：
class AuthApiClient extends ApiClient {
constructor(baseURL, token) {
super(baseURL); // 先完成父类 this 初始化
this.token = token;
}
async request(url, options = {}) {
const authHeaders = { ...this.headers, Authorization: `Bearer ${this.token}` };
return super.request(url, { ...options, headers: authHeaders });
}
}
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
合理使用静态方法与属性
静态成员属于类本身，不依赖实例，适合放工具型逻辑（如配置常量、工厂函数、通用校验）。子类会自动继承父类的静态方法，也可定义自己的静态方法，内部可用 super 调用父类静态方法。
- 用 static 关键字声明，直接通过类名调用（如 AuthApiClient.create()）
- 静态方法中不能访问 this（指实例），但可用 super 访问父类静态成员
- ES2022+ 支持静态属性语法（static VERSION = '1.0'），旧环境可用赋值方式
示例：
class AuthApiClient extends ApiClient {
static DEFAULT_TIMEOUT = 5000;
static create(config) {
return new this(config.baseURL, config.token);
}
// ... 其他代码
}
验证继承关系与实例类型
实际项目中常需判断对象来源，比如统一错误处理或权限校验。ES6 继承保留了原型链语义，因此 instanceof 和 isPrototypeOf 依然可靠。
- instanceof 可同时返回 true 对父类和子类（authClient instanceof AuthApiClient 和 authClient instanceof ApiClient 都为真）
- 检查 constructor.name 可快速识别具体类名，适合日志或调试
- 避免仅靠属性存在性判断类型，易被伪造；优先用语言原生机制
示例：
const client = new AuthApiClient('/api', 'abc123');
console.log(client instanceof AuthApiClient); // true
console.log(client instanceof ApiClient); // true
console.log(client.constructor.name); // "AuthApiClient"
