首頁 > web前端 > js教程 > 主體

JavaScript中的函數劫持實例詳解

小云云
發布: 2018-03-16 17:34:17
原創
1823 人瀏覽過


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

舉例

現在我們來舉個簡單的例子,劫持一下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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板