JavaScript中如何调用同一类多个方法？解决链式调用报错

错误原因 #

1. 链式调用失败：message、payload、data方法未返回任何值（默认返回undefined），后续方法调用时会在undefined上执行，触发Cannot read properties of undefined (reading 'payload')错误。
2. 状态无法累积：原output方法每次生成全新对象，无法合并多次方法调用的参数，达不到预期的聚合效果。

修复方案 #

通过维护实例内部状态，并让设置方法返回实例自身以支持链式调用，同时调整输出逻辑实现预期效果：

方案一：通过get()方法获取结果 #

class Response {
  constructor() {
    // 初始化内部状态
    this._message = null;
    this._payload = null;
    this._data = null;
  }

  message(message) {
    this._message = message;
    return this; // 返回实例，支持链式调用
  }

  payload(payload) {
    this._payload = payload;
    return this;
  }

  data(data) {
    this._data = data;
    return this;
  }

  // 返回聚合后的响应对象
  get() {
    return {
      message: this._message,
      payload: this._payload,
      data: this._data
    };
  }
}

const response = new Response();

console.log(
  response
  .message('my message')
  .payload('my payload')
  .data('my data')
  .get()
);
// 输出: { message: 'my message', payload: 'my payload', data: 'my data' }

console.log(
  response
  .message('my message')
  .payload('my payload')
  .get()
);
// 输出: { message: 'my message', payload: 'my payload', data: null }

console.log(
  response
  .payload('my payload')
  .get()
);
// 输出: { message: null, payload: 'my payload', data: null }

方案二：自动输出预期对象（无需额外方法） #

重写toJSON()方法，让console.log打印实例时自动输出聚合后的对象：

class Response {
  constructor() {
    this._message = null;
    this._payload = null;
    this._data = null;
  }

  message(message) {
    this._message = message;
    return this;
  }

  payload(payload) {
    this._payload = payload;
    return this;
  }

  data(data) {
    this._data = data;
    return this;
  }

  // 重写toJSON，console.log会自动调用此方法
  toJSON() {
    return {
      message: this._message,
      payload: this._payload,
      data: this._data
    };
  }
}

const response = new Response();

console.log(
  response
  .message('my message')
  .payload('my payload')
  .data('my data')
);
// 输出: { message: 'my message', payload: 'my payload', data: 'my data' }

console.log(
  response
  .message('my message')
  .payload('my payload')
);
// 输出: { message: 'my message', payload: 'my payload', data: null }

console.log(
  response
  .payload('my payload')
);
// 输出: { message: null, payload: 'my payload', data: null }

关键要点 #

• 所有设置方法必须返回this，才能实现链式调用。
• 通过实例内部属性维护状态，实现多次调用的参数聚合。
• 方案二中的toJSON()方法会被console.log自动调用，直接输出预期格式的对象。

内容的提问来源于stack exchange，提问作者Epple