javascript - 如何在 ES6 类中使用组合和方法？

Question

我正在努力在 ES6 类中实现组合!我试图同时理解很多事情，但可能犯了一个愚蠢的错误。

我现在想避免使用 extend 和 super 进行继承，并且发现了这个很好的组合示例，它似乎显示了我所追求的内容:

class EmployeeTaxData {
  constructor(ssn, salary) {
    this.ssn = ssn;
    this.salary = salary;
  }
  // ...
}

class Employee {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  setTaxData(ssn, salary) {
    this.taxData = new EmployeeTaxData(ssn, salary);
  }
  // ...
}

关于下面的代码，我想使用最简单和 Eloquent 方式来使 spin() 方法可用于由 Hero 类创建的对象，因此它使用共享原型(prototype)。我想与其他需要它的对象分享这个方法。

不幸的是，我无法使我的代码工作，因为 this.angle 并不是指它需要的 Hero 类，而是指 Spinner 类？

class Spinner {

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

  spin(direction) {
    switch (direction) {
      case 'left':
        this.angle -= 1;
        break;
      case 'right':
        this.angle += 1;
        break;
        // no default
    }
  }
}

class Hero {

  constructor(xPosition, yPosition) {
    this.description = 'hero';
    this.width = 25;
    this.height = 50;
    this.xPosition = xPosition;
    this.yPosition = yPosition;
    this.angle = 0;
    this.color = 'red';
    this.spin = new Spinner();
  }

  spin() {
    this.spin.spin();
  }

}

const heroClass = new Hero(100, 200);

console.log(heroClass.angle); // result is 0
heroClass.spin.spin('left');
console.log(heroClass.angle); // result is STILL 0, it didn't work

Answer 1

...the this.angle is not referring to to the Hero class that it needs to, but the Spinner class?

理应如此。当您在 Spinner 类中时，this 引用 Spinner 对象，这也意味着 Spinner 类中的 this.angle 引用 Spinner 对象的 Angular 属性.

您可能希望 spinner 返回一个新的 Angular 值，那么使用 spinner 的英雄对象应该保存返回的新 Angular 值。

class Spinner {

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

  spin(direction, angle) {
    switch (direction) {
      case 'left':
        angle -= 1;
        break;
      case 'right':
        angle += 1;
        break;
        // no default
    }

    return angle;
  }
}

class Hero {

  constructor(xPosition, yPosition) {
    this.description = 'hero';
    this.width = 25;
    this.height = 50;
    this.xPosition = xPosition;
    this.yPosition = yPosition;
    this.angle = 0;
    this.color = 'red';
    this.spinner = new Spinner();
  }

  spin(direction) {
    this.angle = this.spinner.spin(direction, this.angle);
  }

}

const heroClass = new Hero(100, 200);

console.log(heroClass.angle); // result is 0
heroClass.spin('left');
console.log(heroClass.angle); // result is -1

我必须做一些其他的小改变才能使其发挥作用。例如，您有一个名为“spin”的数据属性 this.spin = new Spinner 以及一个名为 spin spin() { 的方法。他们互相压倒对方。