手頭在維護一個比較老的專案，由於頁面的重組，一些不同頁面的 js 被載入到了同一個頁面，導致一個頁面裡可能有一個以上的 window.onload ，這樣做的後果就是前面的回撥函式會被後面的覆蓋掉。
上網搜了一下，絕大部分的解決方案有兩種：

1. 過載 window.onload 方法；
2. 呼籲使用 window.addEventListener 。

這兩種方法要麼只能預防，要麼需要更改老程式碼。我的情況比較特殊，老程式碼是採用 webpack 打包過的，但是配置檔案不見了，之前的維護人員直接修改了打包後的程式碼，導致重新打包的工作量巨大，只能慢慢來。

思前想後，決定利用 Object.defineProperty 劫持 window.onload 的賦值行為，把對應的回撥函式放到一個佇列中集中處理。

程式碼如下：

/**
 * @function windowLoadInit - 劫持 window.onload 的賦值行為，防止覆蓋
 * @desc 函式呼叫前產生的覆蓋不可逆轉
 * @throw {Any} 所有回撥執行完畢之後，會丟擲 catch 到的第一個錯誤
 *  錯誤將被非同步丟擲，避免影響初始化函式的繼續執行
 * @return {Function} 
 */
function windowLoadInit(){
 const eventQueue = [];
 
 // 防止覆蓋之前的 window.onload
 window.onload instanceof Function && eventQueue.push(window.onload); 
 
 window.onload = e => {
  const errQueue = [];
  // 逐個處理回撥事件
  while(!!eventQueue.length){
    try{
      eventQueue.shift()(e);
    } catch(err){
      errQueue.push(err);
    }
  }
  
  if(!!errQueue.length) {
    setTimeout(() => {
      throw errQueue.shift();
    },0);
  };
 };
 
 // 每次賦值時，將回調函式新增到佇列
 Object.defineProperty(window,'onload',{ 
  set: eventQueue.push
 }); 
 
 return window.onload
}

測試程式碼：

// 此 testCase 需在頁面載入完成前執行
function testCase(){
 const arr = [];
 window.onload = () => arr.push(-1); // 這個回撥的覆蓋不可避免
 window.onload = () => arr.push(0);
 windowLoadInit();
 window.onload = () => arr.push(1);
 window.onload = () => arr.push(2);
 
 return new Promise(resolve => {
  window.onload = () => resolve(arr.join('') === '012')
 })
}
testCase().then(console.log); // true

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。