對對象結構的修改很少，如何從同一個對象的另一個函數引用一個函數？

Question

使用Javascript（ES6），我需要引用處理函數onKeyup，以便我可以在同一對象中聲明的兩個函數中添加和刪除事件偵聽器。

你會看到我如何從對象的兩個bind和unbind函數中訪問那個函數onKeyup？ ：

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 
    }; 
})();