You Don't Know JS: 深入理解JavaScript中的行为委托模式

2025-06-04 00:43:09作者：瞿蔚英Wynne

前言

在JavaScript中，[[Prototype]]机制常被误解为"类"或"继承"。本文将通过对比传统类继承模式与行为委托模式，揭示JavaScript对象链接的本质，帮助你建立更准确的JavaScript心智模型。

从类继承到行为委托的思维转变

类继承模式的局限性

传统类继承模式在JavaScript中的实现存在以下问题：

冗长的语法（.prototype随处可见）
意外的.constructor解析
丑陋的伪多态语法
需要各种mixin来弥补不足

这些复杂性导致许多开发者止步于表面，转而依赖类库来处理这些"脏活"。

[[Prototype]]机制的本质

[[Prototype]]是一个对象内部的链接，指向另一个对象。当在一个对象上查找属性/方法未果时，引擎会沿着这个链接继续查找，形成所谓的"原型链"。

关键点：JavaScript的核心机制是关于对象链接到其他对象。

行为委托设计模式

类理论 vs 委托理论

类理论实现

假设我们需要建模多个相似任务("XYZ","ABC"等)：

class Task {
  constructor(ID) { this.id = ID; }
  outputTask() { console.log(this.id); }
}

class XYZ extends Task {
  constructor(ID, Label) {
    super(ID);
    this.label = Label;
  }
  outputTask() {
    super.outputTask();
    console.log(this.label);
  }
}

这种方式鼓励使用方法覆盖和多态，但带来了额外的复杂性。

委托理论实现

使用行为委托模式：

var Task = {
  setID: function(ID) { this.id = ID; },
  outputID: function() { console.log(this.id); }
};

var XYZ = Object.create(Task);

XYZ.prepareTask = function(ID, Label) {
  this.setID(ID);
  this.label = Label;
};

XYZ.outputTaskDetails = function() {
  this.outputID();
  console.log(this.label);
};

这种风格称为OLOO(Objects Linked to Other Objects)，只关心对象间的委托关系。

OLOO风格的关键特点

状态应保存在委托者上：数据属性直接放在XYZ上，而非Task
避免命名冲突：不同层级的方法使用更具描述性的名称
自然的this绑定：方法调用时this自动绑定到发起调用的对象

行为委托的优势

更简单的代码结构：不需要构造函数、原型和new调用
更直观的关系：对象作为对等实体相互委托
更少的心智负担：不需要模拟类的机制
更灵活的代码组织：可以按需委托，不受类层次限制

实践对比：类继承 vs OLOO

类继承实现

function Foo(who) {
  this.me = who;
}
Foo.prototype.identify = function() {
  return "I am " + this.me;
};

function Bar(who) {
  Foo.call(this, who);
}
Bar.prototype = Object.create(Foo.prototype);

Bar.prototype.speak = function() {
  alert("Hello, " + this.identify() + ".");
};

OLOO实现

var Foo = {
  init: function(who) {
    this.me = who;
  },
  identify: function() {
    return "I am " + this.me;
  }
};

var Bar = Object.create(Foo);

Bar.speak = function() {
  alert("Hello, " + this.identify() + ".");
};