狀態模式允許物件在其內部狀態改變時改變其行為。

在此範例中，我們使用 Order 類別建立一個簡單的狀態模式，該類別將使用 next() 方法更新狀態。

const ORDER_STATUS = {
  waitingForPayment: 'Waiting for payment',
  shipping: 'Shipping',
  delivered: 'Delivered',
};

class OrderStatus {
  constructor(name, nextStatus) {
    this.name = name;
    this.nextStatus = nextStatus;
  }

  next() {
    return new this.nextStatus();
  }
}

class WaitingForPayment extends OrderStatus {
  constructor() {
    super(ORDER_STATUS.waitingForPayment, Shipping);
  }
}

class Shipping extends OrderStatus {
  constructor() {
    super(ORDER_STATUS.shipping, Delivered);
  }
}

class Delivered extends OrderStatus {
  constructor() {
    super(ORDER_STATUS.delivered, Delivered);
  }
}

class Order {
  constructor() {
    this.state = new WaitingForPayment();
  }

  next() {
    this.state = this.state.next();
  }
}

export { Order };

完整的例子在這裡？ https://stackblitz.com/edit/vitejs-vite-6zcfql?file=state.js

結論

當物件的行為取決於其狀態，且其行為在運行時會根據該狀態而變化時，請使用此模式。

希望您覺得它有幫助。感謝您的閱讀。 ？

讓我們聯絡吧！你可以在以下位置找到我：

• 中： https://medium.com/@nhannguyendevjs/
• 開發：https://dev.to/nhannguyendevjs/
• Hashnode：https://nhannguyen.hashnode.dev/
• Linkedin： https://www.linkedin.com/in/nhannguyendevjs/
• X（原 Twitter）：https://twitter.com/nhannguyendevjs/
• 請我喝杯咖啡： https://www.buymeacoffee.com/nhannguyendevjs