在Javascript ES6中扩展子类中的父类方法

时间:2017-09-15 16:58:15

标签: javascript oop inheritance ecmascript-6

我想在父类中扩展子类的特定方法的功能。我仍然习惯于ES6中的OOP,所以我不确定这是否可行或违反规则。

我正在寻找类似的东西:

class Parent {
  constructor(elem) {
    this.elem = elem;

    elem.addEventListener((e) => {
      this.doSomething(e);
    });
  }

  doSomething(e) {
    console.log('doing something', e);
  }
}

class Child extends Parent {
  constructor(elem) {
    // sets up this.elem, event listener, and initial definition of doSomething
    super(elem)
  }

  doSomething(e) {
    // first does console.log('doing something', e);
    console.log('doing another something', e);
  }
}

本质上我想在父方法上附加一个特定于子的回调。有没有一种创造性的方法来创建一个具有相同功能的全新类?

1 个答案:

答案 0 :(得分:6)

您可以在方法中使用super

doSomething(e) {
  super.doSomething(e)
  console.log('doing another something', e)
}
子类和父类中的

this是相同的,并引用实际对象,因此如果您在父代码中调用方法,它将调用子代的实现,如果它确实是一个孩子。在其他语言中也是如此,例如Python和Ruby。

工作代码:



class Parent {
  constructor(elem) {
    this.elem = elem
    this.elem.addEventListener('click', (e) => { this.doSomething(e) })
  }

  doSomething(e) {
    alert('doing something')
  }
}

class Child extends Parent {
  constructor(elem) {
    super(elem)
  }

  doSomething(e) {
    super.doSomething(e)
    alert('doing another something')
  }
}

let child = new Child(document.getElementById('button'))

<button id="button">Alert</button>
&#13;
&#13;
&#13;