计算属性名本身不能实现动态多态性，因其仅在定义时求值一次；真正动态分发需结合方法映射、策略模式或Proxy实现在运行时按类型查表调用。
计算属性名本身不能直接作为类的方法名来实现“动态多态性”，因为 JavaScript 中类的方法名在定义时是静态的（即使使用计算属性名语法，也只是在声明时求值一次），而多态性依赖的是运行时根据对象类型或状态选择不同行为的能力。但你可以通过计算属性名 + 方法映射 + 动态调用的方式，在模块层面模拟出类似动态多态的效果。
用计算属性名定义方法键，配合策略映射
在类中使用计算属性名定义方法，本质是把方法挂载到一个动态生成的 key 上；但它仍是一个固定方法，不等于“运行时决定调用哪个方法”。真正实现动态分发，需要额外一层映射逻辑：
- 预先定义一组行为函数，按类型/状态命名（如 handleText、handleImage）
- 用计算属性名在类中创建一个统一入口方法（如 [`on${type}`]），但该方法内部不做具体实现，只转发
- 实际调用时，根据当前 type 拼出方法名，再用 this[`on${type}`] 动态访问并执行
示例：
class Handler {
constructor(type) {
this.type = type;
}
// 计算属性名：定义一个可被动态拼接调用的入口
['on' + 'Text']() {
return 'handled as text';
}
['on' + 'Image']() {
return 'handled as image';
}
// 统一调度方法
dispatch() {
const methodName = `on${this.type}`;
if (typeof this[methodName] === 'function') {
return this[methodName]();
}
throw new Error(`No handler for type: ${this.type}`);
}
}
const h1 = new Handler('Text');
const h2 = new Handler('Image');
console.log(h1.dispatch()); // "handled as text"
console.log(h2.dispatch()); // "handled as image"
结合 Map 或对象字面量实现更灵活的运行时绑定
比起在类体中硬编码计算属性方法，更推荐将行为策略外置为独立函数，并用 Map 或 plain object 管理。这样可在运行时增删/替换策略，真正体现“动态”：
- 把不同类型的处理逻辑抽成纯函数，存入 handlers 对象
- 类中只保留一个 handle(type, ...args) 方法，内部查表调用
- 支持热插拔：外部可随时修改 Handler.handlers[type] = newFn
示例：
class Handler {
static handlers = {
Text: () => 'default text logic',
Image: () => 'default image logic'
};
constructor(type) {
this.type = type;
}
handle(...args) {
const fn = Handler.handlers[this.type];
if (fn) return fn(...args);
throw new Error(`No handler registered for ${this.type}`);
}
}
// 运行时扩展
Handler.handlers.Video = () => 'play video';
const h = new Handler('Video');
console.log(h.handle()); // "play video"
搭配 Proxy 实现更透明的动态方法代理
若希望调用形式像原生方法（如 h.onText()），但背后是动态查找，可用 Proxy 拦截方法访问：
- 用 Proxy 包装实例，拦截 get 操作
- 当访问形如 onXXX 的属性时，自动匹配 handlers.XXX 并返回包装后的函数
- 调用时才解析、才执行，完全延迟且可定制
示例：
const createHandler = (type, handlers) => {
const instance = { type };
return new Proxy(instance, {
get(target, prop) {
if (prop.startsWith('on') && handlers[prop.slice(2)]) {
return (...args) => handlers[prop.slice(2)](...args);
}
return target[prop];
}
});
};
const handlers = {
Text: () => 'via proxy: text',
Json: () => 'via proxy: json'
};
const h = createHandler('Text', handlers);
console.log(h.onText()); // "via proxy: text"
console.log(h.onJson()); // "via proxy: json"
注意边界：这不是传统 OOP 多态，而是行为委托
JavaScript 没有 Java/C++ 那样的虚函数表和继承时的 vtable 动态绑定。所谓“动态多态性”在这里实质是：
- 基于字符串的方法名拼接与反射调用（this[methodName]）
- 策略模式 + 运行时查表（Map / Object / Proxy）
- 关键不在“计算属性名”，而在于如何把类型信息映射到行为上
- 计算属性名只是让代码看起来更贴近“声明式”，但不可替代调度逻辑
真正需要动态多态时，优先考虑组合优于继承、函数即值、运行时注册等 JS 原生优势，而非强行模拟 class-based 多态语法。
