想像你有一棵資料樹：節點長相固定，但你老闆今天要匯出 CSV，明天要轉 Markdown，後天又想跑稽核規則。

硬把所有動作塞回節點，不但醜，還會越改越黏。Visitor 的做法就聰明很多：把「要做什麼」獨立成訪問者，讓每個節點只做一件事——被拜訪。

於是加新功能時，你寫個新的 Visitor，走訪同一棵樹就能得到新結果。本文不講玄學，只用原生 JavaScript 帶你從入門到上手：先看圖形面積與 SVG，接著玩一顆簡單語法樹，再落地到訂單與報表。中途會提醒常見雷點，讓你少踩幾次坑。希望本篇文章可以幫助到需要的您。

// ===== Element 介面（以慣例示意） =====
class Shape {
  accept(visitor) { throw new Error('Must implement accept'); }
}

// ===== ConcreteElements =====
class Circle extends Shape {
  constructor(r) { super(); this.r = r; }
  accept(visitor) { return visitor.visitCircle(this); }
}

class Rectangle extends Shape {
  constructor(w, h) { super(); this.w = w; this.h = h; }
  accept(visitor) { return visitor.visitRectangle(this); }
}

// ===== Visitor 介面（以慣例示意） =====
class ShapeVisitor {
  visitCircle(circle)  { throw new Error('Must implement visitCircle'); }
  visitRectangle(rect) { throw new Error('Must implement visitRectangle'); }
}

// ===== ConcreteVisitors =====
class AreaVisitor extends ShapeVisitor {
  visitCircle(c)  { return Math.PI * c.r * c.r; }
  visitRectangle(r) { return r.w * r.h; }
}

class SvgVisitor extends ShapeVisitor {
  visitCircle(c)  { return `<circle cx="0" cy="0" r="${c.r}"></circle>`; }
  visitRectangle(r) { return `<rect x="0" y="0" width="${r.w}" height="${r.h}"></rect>`; }
}

// ===== 使用 =====
const shapes = [new Circle(10), new Rectangle(20, 5)];
const areaV = new AreaVisitor();
const svgV  = new SvgVisitor();

const areas = shapes.map(s => s.accept(areaV));
const svgs  = shapes.map(s => s.accept(svgV));

console.log(areas); // [314.159..., 100]
console.log(svgs);  // ['<circle ...>', '<rect ...>']

要點：

新增操作：加新訪問者（例如 ExportToJSONVisitor）即可，原先 Circle/Rectangle 無需更動。

新增元素型別（例如 Triangle）則要調整所有訪問者：這是 Visitor 的交換條件（trade-off）。

進階版實作：AST（語法樹）的多種處理

對於 AST 這類結構，Visitor 幾乎是標配。下面以簡單「算術運算式」樹為例，展示三個訪問者：

EvalVisitor：計算值

PrintVisitor：輸出中序字串（加上括號）

SimplifyVisitor：做簡單代數化簡（例：x+0 → x、1*x → x）

1. AST 節點定義

// 抽象節點
class Expr {
  accept(v) { throw new Error('Must implement accept'); }
}

// 具體節點
class Num extends Expr {
  constructor(value) { super(); this.value = value; }
  accept(v) { return v.visitNum(this); }
}

class Add extends Expr {
  constructor(left, right) { super(); this.left = left; this.right = right; }
  accept(v) { return v.visitAdd(this); }
}

class Mul extends Expr {
  constructor(left, right) { super(); this.left = left; this.right = right; }
  accept(v) { return v.visitMul(this); }
}

2. 訪問者介面與具體訪問者

class ExprVisitor {
  visitNum(n) { throw new Error('Must implement'); }
  visitAdd(a) { throw new Error('Must implement'); }
  visitMul(m) { throw new Error('Must implement'); }
}

// 1) 求值
class EvalVisitor extends ExprVisitor {
  visitNum(n) { return n.value; }
  visitAdd(a) { return a.left.accept(this) + a.right.accept(this); }
  visitMul(m) { return a = m.left.accept(this), b = m.right.accept(this), a * b; }
}

// 2) 輸出 (x + y) / (x * y)
class PrintVisitor extends ExprVisitor {
  visitNum(n) { return String(n.value); }
  visitAdd(a) { return `(${a.left.accept(this)} + ${a.right.accept(this)})`; }
  visitMul(m) { return `(${m.left.accept(this)} * ${m.right.accept(this)})`; }
}

// 3) 簡化：回傳新樹（不就地修改，避免副作用）
class SimplifyVisitor extends ExprVisitor {
  visitNum(n) { return new Num(n.value); }

  visitAdd(a) {
    const L = a.left.accept(this);
    const R = a.right.accept(this);
    // 0 + x => x, x + 0 => x
    if (L instanceof Num && L.value === 0) return R;
    if (R instanceof Num && R.value === 0) return L;
    return new Add(L, R);
  }

  visitMul(m) {
    const L = m.left.accept(this);
    const R = m.right.accept(this);
    // 0 * x => 0, 1 * x => x, x * 1 => x
    if ((L instanceof Num && L.value === 0) || (R instanceof Num && R.value === 0)) return new Num(0);
    if (L instanceof Num && L.value === 1) return R;
    if (R instanceof Num && R.value === 1) return L;
    return new Mul(L, R);
  }
}

3. 使用示例

// 表示 (2 + 0) * (3 * 1)
const expr = new Mul(
  new Add(new Num(2), new Num(0)),
  new Mul(new Num(3), new Num(1))
);

const evalV = new EvalVisitor();
const printV = new PrintVisitor();
const simpV = new SimplifyVisitor();

console.log('原始：', expr.accept(printV));        // ((2 + 0) * (3 * 1))
const simplified = expr.accept(simpV);
console.log('簡化：', simplified.accept(printV));  // (2 * 3)
console.log('值：', simplified.accept(evalV));     // 6

重點：

同一棵樹，可以套用多個訪問者得到不同結果（求值／轉字串／簡化）。

擴充操作時，只新增訪問者；不動 AST 節點定義。

更貼近實務：訂單報表的擴充計算

假設你有一個訂單（Order）樹，內含不同的行項（LineItem）與優惠券（Coupon）。你可能想做：

小計／稅額／總額計算

匯率轉換（USD/TWD/JPY）

輸出報表（CSV／HTML／PDF）

實作各國稅制或行銷規則

當結構固定（Order → LineItem／Coupon），而需要常加新報表或計算方式時，Visitor 能讓你用「新增一個訪問者」就完成新能力。

1. 結構與訪問者

class OrderElement {
  accept(v) { throw new Error('Must implement'); }
}

class Order extends OrderElement {
  constructor(lines = [], coupons = []) { super(); this.lines = lines; this.coupons = coupons; }
  accept(v) { return v.visitOrder(this); }
}

class LineItem extends OrderElement {
  constructor(name, unitPrice, qty) { super(); this.name = name; this.unitPrice = unitPrice; this.qty = qty; }
  accept(v) { return v.visitLineItem(this); }
}

class Coupon extends OrderElement {
  constructor(code, type, value) { super(); this.code = code; this.type = type; this.value = value; } // type: 'percent' | 'fixed'
  accept(v) { return v.visitCoupon(this); }
}

class OrderVisitor {
  visitOrder(o) { throw new Error('Must implement'); }
  visitLineItem(l) { throw new Error('Must implement'); }
  visitCoupon(c) { throw new Error('Must implement'); }
}

// 計算小計／折扣／總額（不考慮稅收，示範用）
class SummaryVisitor extends OrderVisitor {
  constructor() { super(); this.subtotal = 0; this.discount = 0; }
  visitOrder(o) {
    this.subtotal = o.lines.reduce((acc, line) => acc + line.accept(this), 0);
    this.discount = o.coupons.reduce((acc, c) => acc + c.accept(this), 0);
    return { subtotal: this.subtotal, discount: this.discount, total: Math.max(0, this.subtotal - this.discount) };
  }
  visitLineItem(l) { return l.unitPrice * l.qty; }
  visitCoupon(c) {
    if (c.type === 'percent') return this.subtotal * (c.value / 100);
    if (c.type === 'fixed')   return c.value;
    return 0;
  }
}

// 匯率轉換（示範固定匯率）
class CurrencyVisitor extends OrderVisitor {
  constructor(rate, symbol) { super(); this.rate = rate; this.symbol = symbol; }
  visitOrder(o) {
    const sumV = new SummaryVisitor();
    const { subtotal, discount, total } = o.accept(sumV);
    return {
      subtotal: this.symbol + (subtotal * this.rate).toFixed(2),
      discount: this.symbol + (discount * this.rate).toFixed(2),
      total:    this.symbol + (total    * this.rate).toFixed(2),
    };
  }
  visitLineItem() { /* 不使用，借 SummaryVisitor 即可 */ }
  visitCoupon() { /* 同上 */ }
}

2. 使用

const order = new Order(
  [ new LineItem('Keyboard', 50, 2), new LineItem('Mouse', 20, 1) ],
  [ new Coupon('WELCOME10', 'percent', 10), new Coupon('TAKE5', 'fixed', 5) ]
);

const summaryV  = new SummaryVisitor();
console.log('USD:', order.accept(summaryV));
// 例如：{ subtotal: 120, discount: 17, total: 103 }

const toTwdV = new CurrencyVisitor(32.5, 'NT$');
console.log('TWD:', order.accept(toTwdV));
// 例如：{ subtotal: 'NT$3900.00', discount: 'NT$552.50', total: 'NT$3347.50' }

重點：

新增「不同的報表或計算」→ 新增不同訪問者。

結構穩定時，擴充效果最明顯。

實作細節與最佳實務

1. 命名與對應表

建議固定命名規則：visit + 類名（visitCircle、visitAdd）。

若元素型別很多，可做一層訪問表（visitor table）集中管理：

// 用 Map 讓某些場合可以簡化 method dispatch（函式式風格）
const visitorTable = new Map([
  ['Circle',  (self, el) => Math.PI * el.r * el.r],
  ['Rectangle', (self, el) => el.w * el.h],
]);

class TabledAreaVisitor {
  visit(el) {
    const handler = visitorTable.get(el.constructor.name);
    if (!handler) throw new Error(`No handler for ${el.constructor.name}`);
    return handler(this, el);
  }
}

提醒：這種「表」的寫法接近函式分派，雖不完全遵循傳統 Visitor 介面，但在 JS 實務中非常常見且好維護。

2. 保持「不可變」輸出

像 SimplifyVisitor 這種會「產出新結構」的訪問者，不要原地修改原樹，避免副作用引發難追蹤的臭蟲。

3. 控制副作用

Visitor 需要內部狀態（例如統計計數）時，請清楚初始化與生命週期，避免跨次呼叫污染結果。

4. 建立「空訪問者」基底

提供預設不做事的方法，讓子類只覆寫關心的節點，減少樣板碼：

class BaseVisitor {
  visitCircle() {}
  visitRectangle() {}
  // ...
}

5. 例外策略與未知節點

保留「未知節點」的防呆：一旦訪問者沒有對應處理，快速拋錯，比默默忽略安全。

6. 與 Type 標註共舞（可選）

在純 JS 中可借助 JSDoc 提示型別；若你的專案使用 TypeScript，Visitor 的介面契約會更紮實，但本文維持 JS 範疇。

與其他模式比較

模式	適用重點	與 Visitor 差異
Strategy	同一資料，一次選一種策略執行	Strategy 聚焦「可替換演算法」，但不會巡訪結構；Visitor 針對多型別元素逐一處理
Decorator	動態包裝行為、疊加能力	Decorator 改變單個物件的能力；Visitor 對整個結構新增「一種操作」
Chain of Responsibility	事件沿著鏈傳遞，找到能處理者	CoR 著重逐步交棒；Visitor 是逐節點指名處理