javascript - 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函数中对this.handler.bind(this)的调用，因为每次调用返回的绑定(bind)函数不一样，所以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来实现事件监听器接口(interface)。然后直接绑定(bind)对象即可。

handleEvent函数中this的值将是绑定(bind)的对象。

// 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 函数，当绑定(bind)事件触发时，该函数将被调用。

<小时/>

此外，您似乎正在为继承自它的每个对象创建一个新的基础对象。为什么不共享一个基础对象？这就是原型(prototype)继承的要点。