Question

使用Javascript（ES6），我需要引用一个处理函数onKeyup，这样我就可以在同一个对象中声明的两个函数中添加和删除一个事件监听器。

您是否会看到我如何从对象中的两个onKeyup和bind函数访问该unbind函数？：

export default { bind(el) { let privateVar = 42; function foobar() { console.log('Foobar hit', privateVar); } function onKeyup() { console.log('onKeyup hit'); foobar(); } el.addEventListener("keyup", onKeyup, false); }, unbind(el) { //`onKeyup` does not exist here, how can I fix that? el.removeEventListener("keyup", onKeyup, false); } }

这可能吗？

我的第一个想法是修改这样的代码，但结果在我看来不太可读：

export default { privateVar : null, onKeyup() { console.log('onKeyup hit'); this.foobar(); }, foobar() { console.log('Foobar hit', this.privateVar); }, bind(el) { this.privateVar = 42; el.addEventListener("keyup", this.onKeyup, false); }, unbind(el) { el.removeEventListener("keyup", this.onKeyup, false); } }

你有更好，更清洁的方法吗？

注意：我无法更改该对象中bind和unbind函数的结构，因为它被用作Vue.js 2的directive declaration。*。

修改

我还尝试了另一种组织代码的方法：

export default { onKeyup : null, bind(el) { let privateVar = 42; function foobar() { console.log('Foobar hit', privateVar); } this.onKeyup = function() { console.log('onKeyup hit'); foobar(); }; el.addEventListener("keyup", this.onKeyup, false); }, unbind(el) { el.removeEventListener("keyup", this.onKeyup, false); } }

...但后来我看到了以下错误消息：Uncaught TypeError: Cannot set property 'onKeyup' of undefined

Answer 1

您应该能够使用IIFE封装所有内容，并且只展示bind()和unbind()函数。

export default (function() {
    var privateVar;

    function onKeyup() {
        console.log('onKeyup hit');
        foobar();
    }

    function foobar() {
        console.log('Foobar hit', privateVar);
    }

    function _bind(el) {
        privateVar = 42;
        el.addEventListener("keyup", onKeyup, false);
    }

    function _unbind(el) {
        el.removeEventListener("keyup", onKeyup, false);
    }

    return {
        bind:_bind,
        unbind:_unbind
    };
})();

对对象结构进行最小的更改后，如何从同一对象中的另一个函数引用函数？

1 个答案: