Question

我有一个看起来像这样的对象：

const trigger = {
    // ...
    addEventListener: function(evt, cb) {
        // ...
    }
};

通过调用addEventListener具有事件注册系统。

我也希望trigger.onxxx = xxx可以调用它（该函数以on开头）以用于传统目的。我该怎么办？

好像我写

const handleTouch = function() { /* ... */ };
trigger.ontouch = handleTouch;

这就是它的实际作用：

trigger.addEventListener('touch', handleTouch);

我知道我可以使用setter来调用函数，但是在这种情况下，函数名称是随机的。

设置方法是否可以自动调用该功能

还是我必须分别对它们进行硬编码？

Answer 1

您可以创建代理，并在设置属性后检查其名称是否以on开头。如果是这样，请调用addEventListener方法，否则修改基础对象（如果可能发生的话）：

const addEventListener = function(evt, cb) {
  console.log('adding listener for', evt);
}

const trigger = {
  addEventListener,
  // other properties
};

const proxy = new Proxy(trigger, {
  set(target, prop, newVal) {
    if (prop.startsWith('on')) {
      return addEventListener(prop.slice(2), newVal);
    }
    return target[prop] = newVal;
  }
});

proxy.onfoo = () => 'on foo';
proxy.addEventListener('foo', () => 'on foo');

是否可以通过设置函数的属性来调用函数？

1 个答案: