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

前言

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

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

类继承模式的局限性

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

1. 冗长的语法（.prototype随处可见）
2. 意外的.constructor解析
3. 丑陋的伪多态语法
4. 需要各种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风格的关键特点

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

行为委托的优势

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

实践对比：类继承 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() + ".");
};

两种方式都建立了三个对象的链接关系，但OLOO方式更加简洁明了。

注意事项

1. 禁止相互委托：不能创建两个对象互相委托的循环
2. 调试工具差异：不同浏览器对对象构造的表示可能不同
3. 委托作为内部实现：通常不直接暴露委托关系在API中

结论

JavaScript的[[Prototype]]机制本质上是对象间的委托链接，而非类继承。行为委托模式(OLOO)提供了一种更简单、更符合JavaScript本质的方式来组织代码。

通过拥抱对象链接而不是模仿类继承，我们可以：

• 减少代码复杂性
• 获得更清晰的架构
• 更好地利用JavaScript的语言特性
• 降低心智负担

当你下次设计JavaScript代码时，不妨尝试使用行为委托模式，体验更自然的JavaScript编程方式。