Javascript类中的子方法

Question

问题

我希望能够使用类来创建客户端对象并将地址对象添加到其中的数组。

我想做的事

let client = new Client ('A123', 'John', 'Smith', avatarUrl);
client.address('home').add(address);

我当前的课程

工作版本

class Client extends Name {
  constructor(clientRef, firstName, lastName, profilePic) {
    super (firstName, lastName, profilePic);
    this._id = clientRef;
    this.addresses = [];
  }
  addAddress (address, label = 'main') {
    address = {...address, label}
    this.addresses.push(address);
  }
  removeAddress (label = 'main') {
    this.addresses = this.addresses.filter((element) => { return element.label != label; });
  }
}

非工作版本

这是我要创建的，但是不起作用。

class Client extends Name {
  constructor(clientRef, firstName, lastName, profilePic) {
    super (firstName, lastName, profilePic);
    this._id = clientRef;
    this.addresses = [];
  }
  address (label = 'main') {
    add (address) {
      address = {...address, label}
      this.addresses.push(address);
    }
    remove () {
      this.addresses = this.addresses.filter((element) => { return element.label != label; });
    }
  }
}

Answer 1

您正在尝试将值分配给类方法，就像它是键值对象存储一样。这个函数将返回一个空引用而不返回return语句。您需要执行的操作将返回具有所需方法的键值存储，如下所示：

class Client extends Name {
  constructor(clientRef, firstName, lastName, profilePic) {
    super (firstName, lastName, profilePic);
    this._id = clientRef;
    this.addresses = [];
  }
  address (label = 'main') {
    return {
      add: (address) => {
        address = {...address, label}
        this.addresses.push(address);
      },
      remove: () => {
        this.addresses = this.addresses.filter((element) => { return element.label != label; });
      }
    }
  }
}

Answer 2

您可以做的是返回一个拥有这些功能的对象，但是您需要确保this指向原始的Client对象，为此，您可以使用箭头功能：

class Client extends Name {
  constructor(clientRef, firstName, lastName, profilePic) {
    super(firstName, lastName, profilePic);
    this._id = clientRef;
    this.addresses = [];
  }
  address(label = 'main') {
    return {
      add: (address) => {
        address = {
          ...address,
          label
        }
        this.addresses.push(address);
      },
      return: () => {
        this.addresses = this.addresses.filter((element) => {
          return element.label != label;
        });
      }
    }
  }
}

Answer 3

您可以执行以下操作使其生效：

address (label = 'main') {
  return {
    add: (address) => {
      this.addresses.push({...address, label});
    },
    remove: () => {
      this.addresses = this.addresses.filter((element) => { return element.label != label; });
    }
  }
}

但是我建议将address移到另一个类并作为结果返回。

class Address {

  constructor(label) {
    this.label = label;
  }

  add(address) {
    for (const name in address) {
      this[name] = address[name];
    }
  }
}

class Client {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.addresses = [];
  }

  address(label) {
    const address = new Address(label);

    this.addresses.push(address);

    return address;
  }
}


const client = new Client('John', 18);

client.address('home').add({
  str: 'Main',
  house: 55
})