2017-09-15 109 views
3

我想擴展父類中特定方法的子功能。我仍然習慣於ES6中的OOP,所以我不確定這是可能的還是違反了規則。在JavaScript中的子類中擴展父類方法ES6

我正在尋找這樣的事情:

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

在本質上我想追加一個父類的方法一個兒童專用的回調。有沒有一種創造性的方式來做到這一點,而無需創建一個具有相同功能的全新類?

+0

'extends'是每一個類,而不是每個實例。你想實現什麼? – ideaboxer

+0

調整我的請求,只說「特定於孩子」,忽略我使用「實例」@ideaboxer – JLF

+0

*設置this.elem *應該在'super()'調用後發生... –

回答

3

可以在方法使用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>

+0

'super.doSomething(e)'在我的例子中被一個事件監聽器調用。我想使用超級的事件監聽器來觸發孩子的方法作爲回調 - 至少在之後。這個實現看起來只是通過一種不同的方法調用super的方法,導致我重新建立了在孩子中傾聽的事件。 – JLF

+0

@JLF如果我理解你的話,一切都會按你的意願工作。 –

+0

是的,這實際上是完美的。出於某種原因,我認爲'super.doSomething(e)'會在沒有父級上下文的情況下被調用。 – JLF