如何在ES6类中使用组合方法?

时间:2018-03-30 21:05:30

标签: javascript class composition

我正在努力在ES6课程中实现构图!我试图立刻理解很多事情并且可能犯了一个愚蠢的错误。

我现在想避免使用extendsuper进行继承,并且已经找到了这个很好的组合示例,它似乎显示了我的目标:

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);
  }
  // ...
}

关于下面的代码,我想使用最简单和雄辩的方法使spin()方法可用于Hero类创建的对象,因此它使用共享原型。我想与其他需要它的对象共享此方法。

不幸的是,由于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

1 个答案:

答案 0 :(得分:1)

  

... this.angle并不是指它需要的Hero类,而是Spinner类?

应该如此。当你在spinner类中时,this引用一个微调器对象,这也意味着微调器类中的this.angle引用一个微调器对象的角度属性。

您可能希望微调器返回一个新的角度值,然后使用微调器的英雄对象应保存返回的新角度值。

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() {的方法。他们互相压倒。