谈谈JS中的函数挟制

说到挟制,第一回响反映可以是什么不好的东西。函数挟制并不罪恶,关键是看运用的人。虽然这个观点在前端范畴运用较少,然则在平安范畴、自定义营业等场景下照样有肯定的运用价值的。所以,这一篇文章将会和人人一同去相识一下JS中的函数挟制是什么,有什么用。

基本观点

函数挟制,望文生义,即在一个函数运转之前把它挟制下来,增添我们想要的功用。当这个函数现实运转的时刻,它已不是底本的函数了,而是带上了被我们增添上去的功用。这也是我们罕见的钩子函数的道理之一。

乍一看上去,这很像是函数的改写。函数的改写也可以理解为是函数挟制的一种,然则这类体式格局太恶心了。作为一个挟制者,在绑票取得优点今后也应当恪守职业道德,把人一成不变地还归去,所以我们得在适宜的处所把函数底本的功用给从新挪用返来。

推而广之,实在“挟制”这一观点我们经常会碰到,比方说某网站被运营商挟制了,在浏览该网站的时刻会弹出运营商的广告。

举例剖析

如今我们来举个简朴的例子,挟制一下alert()函数,为它增添一点小小的功用:

let warn = alert
window.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()你就晓得了:
codepen例子

反挟制

新建一个页面,翻开你的开辟者东西控制台,输入alert,你会看到如许的输出:

function alert() { [native code] }

然后运用本文开首的那段代码,把alert()挟制一下,再从新在控制台输入alert,你会看到如许的输出:

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

经由过程上述的例子可以晓得,要看一个函数是不是被挟制了,只需要直接把它打印出来即可。针对体系原生的函数,[native code]即代表它是纯洁无污染的。

函数挟制的作用

除了为函数增添功用之外,还可以应用函数挟制去追踪歹意用户的信息。平常的XSS进击会先应用alert()等可以输出信息的要领举行测试,这时刻我们可以先对原生alert()举行挟制,向其输入追踪信息的代码,末了才把原函数开释出去。当歹意用户在测试alert()的时刻就会马上被我们追踪,而他本人却无从发觉。

跋文

关于JS的函数挟制,也不是什么新颖的东西,只是在近来的工作中碰到了这个知识点觉得比较生疏,所以花了一些时候举行了研讨,并把效果记录下来。假如发明有什么讹夺的处所迎接斧正!

谢谢你的浏览,迎接关注我的专栏,我将不按期分享本身的进修体验,开辟心得,搬运墙外的干货。下次见啦!

参考资料:
javascript 函数挟制 | 奇异辉
JavaScript函数挟制- 谢灿勇
Need to hook into a javascript function call, any way to do this?

    原文作者:jrainlau
    原文地址: https://segmentfault.com/a/1190000006967018
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞