什么是函數劫持

最近業務上看到一段邏輯，找了好久，沒發現它是怎么被觸發的，后來發現其實使用了函數劫持，大致如下：

// 原始函數
var saveLog = function (log) {
  console.log(`我保存了日志：${log}`);
}

// 1-保存原有函數
var originSaveLog = saveLog;

// 2-改寫原有函數
saveLog = function () {
  const args = Array.prototype.slice.call(arguments);
  // 3-在改寫后的函數中執行原有函數的邏輯
  originSaveLog.apply(null, args);
  console.log('我要劫持你這個函數，用來做自己的事情');
}

saveLog('test Save Log');

大致實現的邏輯就是在每次調用保存日志的同時執行自己的邏輯，比如格式化、通知等。

函數劫持，在一個函數運行之前就把它劫持下來，添加我們想要的功能。當這個函數實際運行的時候，它已經不是原本的函數了，而是被我們添加上去的功能。這也是我們常見的鉤子函數的原理之一。

如上面的示例，一般函數劫持會分成三步 :

• 使用新的變量保存被劫持函數
• 新函數中改寫被劫持函數
• 新函數中調用原有的函數(保存在變量中的函數)

為什么可以這么做?

一開始，我看上面這段代碼還有疑惑，當重新給 saveLog 賦值的時候，不會改變 originSaveLog 的引用指向么?事實上是不會的，只會將 saveLog 指向另外一個引用地址。

可以看下面的例子就很容易理解了：

let a = {};
let b = a;
a.name = 'Gopal';
// ture {name: 'Gopal'}  {name: 'Gopal'} 
console.log(b === a, a, b);

基礎：兩個對象指向同一個地址的時候，修改某個對象的屬性，另外一個對象也會隨之變化

let a = {};
let b = a;
a = {name: 'Gopal'};
// false {name: 'Gopal'} {}
console.log(b === a, a, b);

基礎：將新的對象賦值給對象變量的時候，該對象變量就指向了新對象的引用地址，跟舊引用切斷關聯

應用場景

增強你的函數功能

如上面的第一個例子，在原有的函數之上，實現特定的邏輯。

追蹤 XSS 攻擊

一般 XSS 攻擊會先利用 alert() 等方法輸出信息進行測試，這個時候，我們可以對原先的 alert() 進行劫持，向其輸入追蹤信息的代碼，最后才把原函數執行。

如下所示：

function report(caller) {
  var img=new Image();
  img.src=`http://www.site.com/getReport.php?caller=${encodeURIComponent(caller)}`;
}
var _alert = window.alert;
window.alert = function (s) {
  // 拿到攻擊者相關信息，并上報
  report(alert.caller)
  _alert(s)
}
alert('test');

劫持 ajax 請求，實現 mock 功能

mock.js 中，就是通過對原生的 XMLHttpRequest(或 ActiveXObject)進行劫持，判斷有沒有找到匹配的數據模板，如果找到，則攔截 XHR 請求邏輯，執行自身規則對應的邏輯。如果未找到匹配的數據模板，則采用原生 XHR 發送請求。詳細代碼看這里[1]。

總結

JavaScript 中的函數劫持是一個增強原有函數的技巧，一般我們用來對原有的 JavaScript 全局方法做一些能力的增強。

參考資料

[1]這里: https://github.com/nuysoft/Mock/blob/refactoring/src/mock/xhr/xhr.js