代码之家 › 专栏 › 技术社区 › JLF

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

ecmascript-6 inheritance oop javascript

JLF · 技术社区 · 8 年前

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 回复 | 直到 8 年前

Danil Speransky 8 年前

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>

推荐文章

Shibaji Biswas · 如何在Template literal的双引号内的html div id中编写JavaScript变量?

1 年前

GulgDev · 为什么不将属性设置为无效值?

1 年前

Koffee · 动画继续使用update()重新启动,而不是在Phaser 3中正常播放

1 年前

Monnt · 如何查看数组是否包括具有特定值的嵌套数组?

2 年前

JsCoder · 用ECDSA对C语言中的数据进行加密#

2 年前

dsi · 排序功能可实现多列的自定义差异

2 年前

huz3y · 如何在JavaScript中基于另一个变量值构建变量?如何重新分配它的值并对该变量执行方法?复制

2 年前

Darigan · clearTimeout将一个函数中的计时器与另一个函数(React.js)一起超时

2 年前

Joseph · 仅在React和JS中生成深色

2 年前

Joseph · 在Javascript中检索一些文本

2 年前