Question

基于this question。我正在从RequireJS迁移到browserify（与babelify一起）并尝试将我当前的模块重写为类。对于我的每个RequireJS模块，我有一个名为eventHandler的方法，它处理所有常规模块特定事件。现在，当我扩展一个类时，父类调用子类的eventHandler方法，这会导致调用该方法两次。

但是我当前的代码还有另一个问题。我在几个模块上还有两个方法来绑定和取消绑定事件。我正在开发的网站是一个响应式网站，它在所有设备大小上共享相同的JS。在某些屏幕尺寸（断点）上，我想绑定一些特定的事件，在其他屏幕上我不能（或者甚至在来自另一个断点时解除绑定）。所以一个典型的模块看起来或多或少是这样的：

'use strict';

let specificEventsBound = false;

class Tooltip {
    constructor() {
        this.eventHandler();
    }

   eventHandler() {
        // bind general events across all breakpoints
    }

    bindSpecificEvents() {
        // bind breakpoint specific events
        specificEventsBound = true;
    }

    unbindSpecificEvents() {
        // unbind breakpoint specific events
        specificEventsBound = false;
    }

    checkBreakpoint() {
        if(someBreakpoint) {
            this.bindSpecificEvents();
        } else {
            this.unbindSpecificEvents();
        }
    } 
}

module.exports = Tooltip;

当我现在扩展此类并在子类中实现具有不同checkBreakpoint的{{1}}时，当超级方法获得时，someBreakpoint和bindSpecificEvents仍会被调用调用。我想我必须改变我现在处理这些事件的方式......你能否就如何正确处理这个问题向我提出建议？也许是一个单独的类，只是用于注册和分离方法的事件处理？

Answer 1

当我现在扩展此类并在子类中使用不同的someBreakpoint实现checkBreakpoint时，bindSpecificEvents和unbindSpecificEvents仍然会在super方法获得时被调用调用

你可能在这里有误会。即使在超类代码中，this.checkBreakpoint也会查找对象的checkBreakpoint属性，在对象的直接原型（子类的）上找到它，并调用该版本的checkBreakpoint。

这是一个更简单的例子（live copy on Babel's REPL）：

class Base {
  constructor() {
    this.method1();
  }
  method1() {
    this.method2();
  }
  method2() {
    console.log("Base#method2");
  }
}

class Derived extends Base {
  method2() {
    console.log("Derived#method2");
  }
}

new Derived;

输出：

Derived#method2

请注意Base#method1至this.method2的来电如何调用Derived#method2，而不是Base#method2。这对多态性至关重要。

使用子类进行事件处理

1 个答案: