JavaScript · 原型链与 this

场景 1 · 原型污染漏洞: 递归 merge 被打进 __proto__

经典 CVE 模式: 深合并用户输入, 攻击者传 {"__proto__": {"isAdmin": true}} 改掉所有对象的原型:

function safeMerge(target, src) {
  for (const k of Object.keys(src)) {
    // 关键: 黑名单 + 用 create(null) 承载合并结果
    if (k === '__proto__' || k === 'constructor') continue;
    if (isPlainObject(src[k])) target[k] = safeMerge(target[k] ?? {}, src[k]);
    else target[k] = src[k];
  }
  return target;
}
// 或直接用无原型对象接收外部输入: Object.create(null)

上线前用 safeMerge({}, JSON.parse('{"__proto__":{"x":1}}')) 做回归用例锁死。

场景 2 · 纯字典: 配置表用 create(null) 防撞车

以用户输入做 key 的缓存被 "constructor" 撞出 bug, 换无原型字典:

const cache = Object.create(null);
cache['constructor'] = { data: 1 };   // 普通 key, 无风险
cache['toString'] = { data: 2 };
Object.keys(cache);   // → ['constructor', 'toString']  语义正确
// 高频写场景换 Map: 任意类型键 + 天然无原型问题

场景 3 · JSON 反序列化恢复类实例

JSON.parse 出来的对象没有方法(原型是 Object), 直接调 user.sayHi() 报错。用原型重建:

const raw = JSON.parse('{"name":"alice","age":18}');
// 错: raw.sayHi()  → TypeError, raw.__proto__ 是 Object.prototype
// 对: 借构造器接上原型链
const user = Object.assign(new User(), raw);
user.sayHi();          // 方法可用
user instanceof User;  // → true

场景 4 · 回调丢 this: setTimeout 与事件转发

日志器方法被解构传递后 this 全丢。绑定上下文是基建级修复:

class Logger {
  constructor(prefix) { this.prefix = prefix;
    this.info = this.info.bind(this);   // 关键: 构造时统一绑定
  }
  info(msg) { console.log(`[${this.prefix}] ${msg}`); }
}
const { info } = new Logger('api');
info('boot');    // → [api] boot  随便解构都不丢

场景 5 · 跨 iframe 的 instanceof 失效

微前端/多 iframe 页面里, 子页面的数组传到主页面, instanceof Array 为 false — 两个 realm 各有一套 Array 构造器:

// 错: 跨 realm 不可靠
data instanceof Array
// 对: 用静态方法做"品牌"检查
Array.isArray(data)          // 跨 realm 可靠
// 自定义类跨 realm: 检查标记属性而非 instanceof
if (obj?.$type === 'Money') reviveMoney(obj);

场景 6 · mixin 插件机制: 组合优于继承

表格组件要日志/缓存/校验三个可选能力, 单继承装不下, 用类工厂 mixin 按需叠加:

const WithLog = C => class extends C {
  log(...a) { console.log(`[${this.id}]`, ...a); }
};
const WithCache = C => class extends C {
  #c = new Map();
  memo(k, fn) { if (!this.#c.has(k)) this.#c.set(k, fn()); return this.#c.get(k); }
};
class Table { id = 'tbl'; }
class SmartTable extends WithCache(WithLog(Table)) {}
new SmartTable().log('ready');

能力可插拔, 顺序即优先级; 比多层级继承扁平得多。

场景 7 · 私有字段 + 原型方法封装领域对象

金额计算不想让业务侧直接改内部分值, 用 #field 锁死写入路径:

class Money {
  #cents;                       // 真私有, 外部无法碰
  constructor(yuan) { this.#cents = Math.round(yuan * 100); }
  add(other) { return new Money((this.#cents + other.#cents) / 100); }
  get yuan() { return this.#cents / 100; }
  valueOf() { return this.yuan; }   // 参与算术/比较时的转换钩子
}
new Money(0.1).add(new Money(0.2)).yuan;  // → 0.3 无浮点误差

场景 8 · getter/setter 做兼容层: 字段改名不破调用方

老字段 user.name 要废弃成 fullName, 用原型上的存取器平滑过渡并打点:

class User {
  #fullName = '';
  get name() {                       // 兼容旧读法
    console.warn('name 已废弃, 用 fullName');
    return this.#fullName;
  }
  set name(v) { this.#fullName = v; }
}
new User().name;   // 老代码继续跑 + 上报迁移进度

场景 9 · for...in 的原型链问题

遍历配置对象把库注入的原型方法也遍历了出来, 业务键多了 toString 一项:

const cfg = { a: 1, b: 2 };
Object.prototype.extra = 1;          // 假设被某个老库污染了
// 错: for (const k in cfg)  → k 含 'extra'
// 对 1: 只遍历自有可枚举
for (const k of Object.keys(cfg)) {}    // → a b
// 对 2: 保留 for...in 时过滤
for (const k in cfg) if (Object.hasOwn(cfg, k)) {}

场景 10 · polyfill 安全注入原型

给老浏览器补 Array.prototype.at, 必须特性检测 + 用 defineProperty 设为不可枚举, 避免重复注入与污染 for...in:

if (!Array.prototype.at) {           // 关键: 先检测再注入
  Object.defineProperty(Array.prototype, 'at', {
    value: function (i) {
      i = Math.trunc(i) || 0;
      if (i < 0) i += this.length;
      if (i < 0 || i >= this.length) return undefined;
      return this[i];
    },
    writable: true, configurable: true, enumerable: false,
  });
}