如何在 JavaScript 中调用同一个类的多个函数？

Question

我正在使用此类的多个实例方法声明一个类 Response，如下面的代码，但我从输出中抛出错误： Error: Cannot read properties of undefined (reading 'payload') 。 我想从我打电话得到的结果中得到结果。 我该怎么做？

 class Response { output({ message = null, payload = null, data = null }) { return { message, payload, data } } message(message) { this.output({ message }) } payload(payload) { this.output({ payload }) } data(data) { this.output({ data }) } } const response = new Response(); console.log( response.message('my message').payload('my payload').data('my data') ); // expected result: { message: 'my message', payload: 'my payload', data: 'my data' } console.log( response.message('my message').payload('my payload') ); // expected result: { message: 'my message', payload: 'my payload', data: null } console.log( response.payload('my payload') ); // expected result: { message: null, payload: 'my payload', data: null }

Answer 1

据我所知，您正在尝试制作可链接的方法（类似于 String 类所做的。）

要制作可链接的方法，您几乎做对了，除了在output方法中，您返回一个普通对象。 这是不对的，因为它只返回一个对象而不是Response类的实例。

因此， output方法应该返回如下内容：

output({
    message = null,
    payload = null,
    data = null
  }) {
    return new Response({
      message,
      payload,
      data
    })
  }

此外，您还应该有一个接受所需参数并将它们存储在全局对象（如状态变量）中的构造函数。

那会让你的班级看起来像：

class Response {

  state = {
    message: null,
    payload: null,
    data: null
  }
  
  constructor(params) {
    // be careful, params can also be null when calling the constructor with no arguments. 
    // handle it accordingly
    this.state = params
  }

  output({
    message = null,
    payload = null,
    data = null
  }) {
    return new Response({
      message,
      payload,
      data
    })
  }

  message(message) {
    this.output({
      message
    })
  }

  payload(payload) {
    this.output({
      payload
    })
  }

  data(data) {
    this.output({
      data
    })
  }

}

此外，为了使其更加高效，您可以将output函数中的new Response()调用替换为：

output({
    message = null,
    payload = null,
    data = null
  }) {
    this.state = {
       message,
       payload,
       data
    }
    return this // this returns an instance of the class
}

如果您将来要更改类名，这将覆盖您的背部，您无需返回output函数并将return new Response()更改为return new NewClass()每次。

希望它有所帮助！