【前端逆向】实现拦截函数功能

需求：
实现 hook 某个函数，调用该函数后可以执行自定义的 hook，无需修改原网站的 js 代码。

示例

这里实现 hook console.log 函数，每次调用 console.log 则 window.count++，实现统计 console.log 次数的功能。

思路
需要覆盖原生的 console.log，但是得避免递归调用。于是需要一个临时变量保存原先的 console.log，并且自定义一个函数覆盖原先的 console.log：

const log = console.log

console.log = (...args) => {
	if(!window.count) {
		window.count = 0
	}
	
	window.count++
	
	return log(...args)
}

这里用到了 ES6 的变长参数，以确保函数在任何参数情况下都可用。

上面我们定义了一个临时变量，使得函数略显冗余，更优雅的方法是使用自执行函数：

console.log = ((fn) => {
    return (...args) => {
        if(!window.count) {
            window.count = 0;
        }

        window.count++;
        
        return fn(...args)
    }
})(console.log)

执行这个自执行函数，原先的 console.log 会被作为参数传入，无需使用临时变量。而该函数返回一个函数，这个函数实现了具体需求。

代码提取

const hookFn = ((fn, cb) => {
    return (...args) => {
        cb()
        return fn(...args)
    }
})

console.log = hookFn(console.log, () => {
	if(!window.count) {
        window.count = 0;
    }

    window.count++;
})