的Object.create繼承和初始化代碼

Question

我有下面的代碼，它定義了輸入事件管理類：鼠標，觸摸，指針，...

// base.js 
export default() => { 
    return { 
    el: undefined, 
    event: undefined, 
    handler(ev) { 
     console.log('default handler') 
    }, 
    attach() { 
     el.addEventListener(event, this.handler.bind(this), false) 
    }, 
    detach() { 
     el.removeEventListener(event, this.handler.bind(this), false) 
    } 
    } 
} 

// mouse.js 
import baseInput from './base' 

export default (el) => { 
    return Object.assign(Object.create(baseInput()), { 
    el: undefined, 
    event: 'mousedown', 
    handler(ev) { 
     console.log('mouse handler) 
    } 
    } 
} 

有一些共同的商業邏輯在「基地」對象。

的問題來自於attach和detach函數調用，因爲返回的約束功能是不是每次調用相同，因此removeEventListener不能刪除通過addEventListener添加的事件監聽器。

我知道我必須保持一個單一功能的參考。我的問題是代碼應該在哪裏。

一種解決方案可能是：

// base.js 
export default() => { 

    let boundFunction; 

    return { 
    el: undefined, 
    event: undefined, 
    getBoundFunction() { 
     if (!boundFunction) { 
     boundFunction = this.handler.bind(this) 
     } 
    }, 
    handler(ev) { 
     console.log('default handler') 
    }, 
    attach() { 
     el.addEventListener(event, this.getBoundFunction(), false) 
    }, 
    detach() { 
     el.removeEventListener(event, this.getBoundFunction(), false) 
    } 
    } 
} 

此代碼的工作，但我不希望額外getBoundFunction呼籲每個事件觸發，我覺得應該有一個更好的方法或最佳實踐。

Answer 1

通過改變handler名稱handleEvent實現事件監聽器接口。然後你直接綁定對象。

的this在handleEvent函數的值將是綁定的對象。

// base.js 
export default() => { 
    return { 
    el: undefined, 
    event: undefined, 
    handleEvent(ev) { 
     console.log('default handler') 
    }, 
    attach() { 
     el.addEventListener(event, this, false) 
    }, 
    detach() { 
     el.removeEventListener(event, this, false) 
    } 
    } 
} 

所以後來從基礎對象繼承的對象可以定義自己的handleEvent功能，當綁定的事件觸發後調用。

---

另外，您似乎正在爲每個從它繼承的對象創建一個新的基礎對象。爲什麼不共享基礎對象？這是原型繼承的一點。