JavaScript 访问者模式：打造高扩展性的对象结构

一. 前言

在面向对象编程中，访问者模式（Visitor Pattern）是一种行为设计模式，它允许我们向现有的类结构添加新的操作，而无需修改这些类。这对于需要对类层次结构中的元素进行复杂算法处理的场景非常有用。

本文将详细介绍访问者模式的概念、实现方式及其在 JavaScript 中的一个应用小案例，让我们更加快速的了解它。

二. 什么是访问者模式

1. 定义

访问者模式定义了一个访问者的接口，该接口可以处理一个对象结构中的各个元素，而无需改变各元素的类。使用访问者模式可以让用户在不修改现有对象结构的情况下定义新的操作。

2. 核心角色

Object Structure（对象结构）：是一个包含一个或多个 Element 对象的集合，同时提供一个接受操作 accept()，以接收一个访问者对象。
Element（元素）：是对象结构中每个对象的类，它提供一个 accept()方法以接收访问者。
Visitor（访问者）：是一个接口，为 Element 类中的每一个具体类声明一个 Visit 方法。
Concrete Visitor（具体访问者）：实现了 Visitor 接口中声明的各个 Visit 方法，每个方法实现了对应 Element 类型的业务逻辑。

3. UML

三. 实现方式

访问者模式的实现方式依赖于具体的应用场景和技术栈。在 JavaScript 中，实现访问者模式可以通过多种方式，其中最常见的方法是使用对象组合和多态来完成。

假设我们有一个简单的表达式树，其中包含两种节点类型：加法节点和数字节点。我们将使用访问者模式来计算表达式的值。

定义元素接口：首先，需要定义一个抽象的元素接口，该接口至少包含一个 accept 方法，此方法接受一个访问者作为参数。

// 元素接口
class Element {
  accept(visitor) {
    throw new Error('Method not implemented.')
  }
}

具体元素实现：为每种具体的元素类型实现该接口。每个具体元素类都必须实现 accept 方法，并调用访问者对应的访问方法。

// 具体元素 - 加法节点
class AddNode extends Element {
  constructor(left, right) {
    super()
    this.left = left
    this.right = right
  }

  accept(visitor) {
    return visitor.visitAddNode(this)
  }
}

// 具体元素 - 数字节点
class NumberNode extends Element {
  constructor(value) {
    super()
    this.value = value
  }

  accept(visitor) {
    return visitor.visitNumberNode(this)
  }
}

定义访问者接口：定义一个访问者接口，该接口为每一种具体的元素类型声明一个访问方法。

// 访问者接口
class Visitor {
  visitAddNode(node) {
    throw new Error('Method not implemented.')
  }

  visitNumberNode(node) {
    throw new Error('Method not implemented.')
  }
}

具体访问者实现：为每种访问者类型实现具体的访问逻辑，每个具体访问者类都要实现所有访问方法。

// 具体访问者 - 表达式求值
class Evaluator extends Visitor {
  visitAddNode(node) {
    return this.visit(node.left) + this.visit(node.right)
  }

  visitNumberNode(node) {
    return node.value
  }

  visit(node) {
    return node.accept(this)
  }
}

对象结构：定义一个对象结构，它包含元素的集合，并提供方法来迭代这些元素，允许访问者访问它们。

// 对象结构
class ExpressionTree {
  constructor(root) {
    this.root = root
  }

  evaluate() {
    const evaluator = new Evaluator()
    return evaluator.visit(this.root)
  }
}

具体使用：最后，编写相应代码，实例化具体元素和访问者，并通过对象结构让访问者访问所有的元素。

// 使用
const tree = new ExpressionTree(new AddNode(new NumberNode(1), new AddNode(new NumberNode(2), new NumberNode(3))))

console.log(tree.evaluate()) // 输出: 6

解释一下，在以上这几个步骤中：

AddNode 和 NumberNode 是具体元素，它们都实现了 accept 方法，调用访问者对应的 visitAddNode 或 visitNumberNode 方法。
Evaluator 是一个具体访问者，它实现了访问者接口中定义的 visitAddNode 和 visitNumberNode 方法，用于计算表达式的值。
ExpressionTree 是对象结构，它持有表达式的根节点，并提供 evaluate 方法来遍历树结构，执行计算。

这种方法的优点在于它允许我们在不修改现有元素类的情况下引入新的访问者类（例如，添加一个新的访问者来打印表达式的字符串表示形式）。这样就可以很容易地扩展系统的功能。

四. 实战应用

通过以上我们已经学习到的实现方式，接下来我们基于访问者模式来设计一个对象类型校验的方式。主要原理是：借用对象的 toString 方法。

我们使用访问者模式来创建一个类型检查器，它可以检查给定对象的类型，并根据对象的类型执行特定的操作。这样可以方便地扩展类型检查逻辑，而无需修改现有代码。

1. 定义元素接口

首先，我们需要定义一个抽象的元素基类，该类包含一个 accept 方法，用于接收访问者。

class Element {
  accept(visitor) {
    throw new Error('Method not implemented.')
  }
}

2. 具体元素

然后，我们定义具体的元素类，每个类都实现 accept 方法，并调用访问者对应的访问方法。

class StringElement extends Element {
  constructor(value) {
    super()
    this.value = value
  }

  accept(visitor) {
    visitor.visit(this)
  }
}

class NumberElement extends Element {
  constructor(value) {
    super()
    this.value = value
  }

  accept(visitor) {
    visitor.visit(this)
  }
}

class BooleanElement extends Element {
  constructor(value) {
    super()
    this.value = value
  }

  accept(visitor) {
    visitor.visit(this)
  }
}

class ArrayElement extends Element {
  constructor(value) {
    super()
    this.value = value
  }

  accept(visitor) {
    visitor.visit(this)
  }
}

class ObjectElement extends Element {
  constructor(value) {
    super()
    this.value = value
  }

  accept(visitor) {
    visitor.visit(this)
  }
}

// 可以继续添加其他类型的元素

3. 定义访问者接口

接着，我们定义一个访问者接口，它为每一种具体的元素类型声明一个访问方法。

class Visitor {
  visit(element) {
    throw new Error('Method not implemented.')
  }
}

4. 具体访问者

然后，我们实现具体的访问者类，每个类都会实现访问者接口中的方法，并提供具体的功能实现。

class TypeChecker extends Visitor {
  visit(element) {
    const type = this.getType(element)
    console.log(`Type of '${element.value}' is ${type}.`)
  }

  getType(element) {
    const toString = Object.prototype.toString.call(element.value)
    switch (toString) {
      case '[object String]':
        return 'String'
      case '[object Number]':
        return 'Number'
      case '[object Boolean]':
        return 'Boolean'
      case '[object Array]':
        return 'Array'
      case '[object Object]':
        return 'Object'
      default:
        return 'Unknown'
    }
  }
}

5. 客户端代码

最后，编写客户端代码来实例化具体元素和访问者，并通过元素的 accept 方法让访问者访问所有元素。

// 创建具体元素
const stringElement = new StringElement('Hello')
const numberElement = new NumberElement(123)
const booleanElement = new BooleanElement(true)
const arrayElement = new ArrayElement([1, 2, 3])
const objectElement = new ObjectElement({ key: 'value' })

// 创建访问者
const typeChecker = new TypeChecker()

// 使用访问者检查所有元素的类型
stringElement.accept(typeChecker) // 输出: "Type of 'Hello' is String."
numberElement.accept(typeChecker) // 输出: "Type of '123' is Number."
booleanElement.accept(typeChecker) // 输出: "Type of 'true' is Boolean."
arrayElement.accept(typeChecker) // 输出: "Type of '1,2,3' is Array."
objectElement.accept(typeChecker) // 输出: "Type of '{ key: 'value' }' is Object."

**元素基类 Element**：定义了一个 accept 方法，该方法用于接收访问者。
具体元素：如 StringElement、NumberElement 等，它们都继承自 Element 并实现了 accept 方法，该方法会调用访问者中对应的方法。
**访问者接口 Visitor**：定义了一个通用的 visit 方法，具体访问者需要实现这个方法。
**具体访问者 TypeChecker**：实现了访问者接口中的方法，并根据元素类型执行特定的操作。getType 方法使用 Object.prototype.toString.call() 方法来确定对象的确切类型，并返回相应的类型名称。