钩子（HOOK）函数

钩子函数

什么是钩子函数？

钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统 --- 百度百科的定义

我的理解是：钩子函数可以 钩住 我喜欢的东西（在window中就是我喜欢的消息），这应该就是钩子函数叫钩子函数的原因吧。。？

钩子函数的意义（用处）在于：我写了一个window程序，在程序中我写了一段代码（调用window的api来实现钩子），这段代码被系统通过系统调用，把其挂入系统中，然后我就可以对我感兴趣的消息进行处理，我写的这段代码包含有一个回调函数，当有我喜欢的消息发出时，这个回调函数就会执行，所以说，钩子就是指的回调函数

下面是一个程序挂载全局钩子从而被360拦截的例子（其实360也有钩子，不然怎么知道别人要挂载钩子呢？即360可以拦截“挂载钩子”的消息。这个弹窗就是在360的钩子函数中创建的）

---

那么对于前端，什么是钩子函数呢？

对于前端来说，钩子函数就是指再所有函数执行前，我先执行了的函数，即 钩住 我感兴趣的函数，只要它执行，我就先执行。此概念（或者说现象）跟AOP（面向切面编程）很像

一个钩子函数的例子

function Hooks(){
    return {
        initEnv:function () {
            Function.prototype.hook = function (realFunc,hookFunc,context,funcName) {
                var _context = null; //函数上下文
                var _funcName = null; //函数名

                _context = context || window;
                _funcName = funcName || getFuncName(this);
                _context[realFunc] = this;

                if(_context[_funcName].prototype && _context[_funcName].prototype.isHooked){
                    console.log("Already has been hooked,unhook first");
                    return false;
                }
                function getFuncName (fn) {
                    // 获取函数名
                    var strFunc = fn.toString();
                    var _regex = /function\s+(\w+)\s*\(/;
                    var patten = strFunc.match(_regex);
                    if (patten) {
                        return patten[1];
                    };
                    return '';
                }
                try{
                    eval('_context[_funcName] = function '+_funcName+'(){\n'+
                        'var args = Array.prototype.slice.call(arguments,0);\n'+
                        'var obj = this;\n'+
                        'hookFunc.apply(obj,args)\n'+
                        'return _context[realFunc].apply(obj,args);\n'+
                        '};');
                    _context[_funcName].prototype.isHooked = true;
                    return true;
                }catch (e){
                    console.log("Hook failed,check the params.");
                    return false;
                }
            }
            Function.prototype.unhook = function (realFunc,funcName,context) {
                var _context = null;
                var _funcName = null;
                _context = context || window;
                _funcName = funcName;
                if (!_context[_funcName].prototype.isHooked)
                {
                    console.log("No function is hooked on");
                    return false;
                }
                _context[_funcName] = _context[realFunc];
                delete _context[realFunc];
                return true;
            }
        },
        cleanEnv:function () {
            if(Function.prototype.hasOwnProperty("hook")){
                delete Function.prototype.hook;
            }
            if(Function.prototype.hasOwnProperty("unhook")){
                delete Function.prototype.unhook;
            }
            return true;
        }
    };
}

var hook = Hooks();
hook.initEnv();

// 这个是要执行的正常的函数
function test(){
    alert('test');
}

// 这个是钩子函数。此钩子函数内心戏：
// 我只喜欢test函数，所以我必须出现在她前面（在她前面执行），这样她才能看到我。
function hookFunc(){
    alert('hookFunc');
}

// hookFunc钩住test
test.hook(test,hookFunc,window,"test");

window.onload = function(){
  // 由于钩子函数hookFunc钩住了test函数，所以test执行时，会先执行hookFunc。
  test();
}