的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功能，当绑定的事件触发后调用。

---

另外，您似乎正在为每个从它继承的对象创建一个新的基础对象。为什么不共享基础对象？这是原型继承的一点。