JavaScript中的函數劫持實例詳解

函數劫持，顧名思義，即在一個函數運行之前把它劫持下來，添加我們想要的功能。當這個函數實際運行的時候，它已經不是原本的函數了，而是帶了被我們加上去的功能。這也是我們常見的鉤子函數的原理之一。  
乍看之下，這很像是函數的改寫。函數的改寫也可以理解為是函數劫持的一種，但這種方式太噁心了。身為一個劫持者，在綁票獲得好處以後也應該遵守職業道德，把人原封不動地還回去，所以我們得在適當的地方把函數原本的功能給重新調用回來。
推而廣之，其實「劫持」這概念我們常常會遇到，比方說某網站被業者劫持了，在瀏覽該網站的時候會彈出業者的廣告。

舉例

現在我們來舉個簡單的例子，劫持一下alert()函數，為它增添一點小小的功能：

let warn = alertwindow.alert = (t) => {    if (confirm('How are you?')) warn(t)
}

alert('Help me...!!!')

可以開啟開發者工具試試這個例子，你會發現只有你在confirm裡面點擊了OK，才會彈出Help me…!!!。
接下來我們把這部分的內容封裝一下，成為一個通用的函數：

const hijack = (obj, method, fun) => {
  let orig = obj[method]
  obj[method] = fun(orig)
}

首先我們定義了一個hijack函數，它會先把原函數給保存下來，然後執行自訂函數，而原函數將會在自訂函數內部進行呼叫。
然後我們來劫持confirm()函數：

hijack(window, 'confirm', (orig) => {  return (text) => {
    alert('HELP ME PLZ!!!')    if (orig.call(this, text)) {
      alert('YOU SEEMS FINE AND I AM LEAVING, GOOD BYE!')
    } else {
      alert('HOLD ON! I AM COMING!!')
    }
  }
})

這段函數的功能很簡單就不詳細說明了，直接呼叫confirm()你就知道了：

反劫持

新建一個頁面，打開你的開發者工具控制台，輸入alert，你會看到這樣的輸出：

function alert() { [native code] }

然後使用本文開頭的那段程式碼，把alert()劫持一下，再重新在控制台輸入alert，你會看到這樣的輸出：

function (t) => {    if (confirm('How are you?')) warn(t)
}

透過上述的例子可以知道，要看一個函數是否被劫持了，只需要直接把它印出來即可。針對系統原生的函數，[native code]即代表它是純淨無污染的。

相關推薦：

淺談javascript函數劫持[轉自xfocus]_javascript技巧

#

以上是JavaScript中的函數劫持實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！