js中如何在不影響既有事件監聽的前提下新增監聽器

一. 需求澄清

好比某個按鈕已經綁定了2-3個對Window對象的load事件的監聽，如今須要添加一個新的對click事件的監聽器，但在必定條件下才會同時觸發原有的2-3個load監聽器，不然只觸發新添加的這個事件。

假定新添加的監聽函數爲：

function additionalListener(){
    console.log('should do something else');
}

二. ES5方法

ES5中能夠經過添加包裝函數的方式來實現：

_windowonload = window.onload;
window.onload = function(){
    additionalListener();
    if (someCondition){
        _windowonload();
    }
}

三. ES6方法

ES6中添加的代理對象Proxy也能夠用來實現這個需求，基本邏輯就是實現了對window.onload的調用劫持：

var onloadProxy = new Proxy(window.onload,{
    apply:function () {
        additionalListener();
        Reflect.apply(...arguments);
    }
  });
  window.onload = onloadProxy;

四. AOP方法

AOP,即面向切面編程，從元編程的角度來實現鏈式調用(建議通常編程人員不要在原生對象上添加新特性)，實現的邏輯就是在函數的原型對象上添加after方法，它接收一個函數做爲參數，在函數被調用時先調用原函數，再調用after方法傳入的方法，最後返回原函數的執行結果：

Function.prototype.after = function (afterFn) {
      return () => {
         const result = this.apply(this, arguments);
          afterFn.apply(this,arguments);
          return result;
      }
  }
  window.onload = window.onload.after(additionalListener);