钩子函数与回调函数的理解

最新推荐文章于 2025-07-01 23:44:37 发布

原创最新推荐文章于 2025-07-01 23:44:37 发布 · 置顶 · 9.3k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#回调函数 #钩子函数

华山论剑之前端专栏收录该内容

5 篇文章

订阅专栏

----在学习ES6的时候，一直在深思钩子函数的与回调函数的区别：

下面，作以总结

1.钩子函数与回调函数都是事件处理函数

2.钩子函数是指windows的消息处理机制下，捕获消息的时候立即执行

3.回调函数并不能参与消息处理的过程，所以，它是在消息捕获结束后才执行的函数

举个例子吧：

钩子函数实例：

$('button').click(()=>{
console.log('我被点击了!')
})

回调函数实例：

$("p").on("click", function(){
alert( $(this).text() );
});

进一步理解

回调函数可以理解类中断处理函数，以指针的形式传入，在条件满足时自动执行。钩子函数是特殊的回调函数，如果有钩子函数时，钩子函数先得到控制权。

通过钩子函数，可以对消息事件进行拦截，满足条件，执行钩子含糊是，对消息进行想要的处理方式。这与运行时间长短没有关系，钩子函数可能不执行。

再进一步说钩子函数就是一种过滤机制，满足就执行(挂钩)，不满足就不执行。

上边的理解是来源于导师的说法，我自己也私下做了测试，分别进行先后顺序的执行与钩子，回调并存嵌套执行做了处理，终于理解了上边话的意思，具体测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/bootstrap/dist/js/jquery-3.2.1.min.js"></script>
    <script >
        $(function () {
            console.time("timer")
            /* $("button").click(() => {
                 console.log("回调函数测试")
             })*/

            console.timeEnd("timer")
            console.time("timer2")
            /* $("button").on("click", () => {
                 console.log("钩子函数测试")
             })*/
            document.getElementsByTagName("button")[0]
                .addEventListener("click", () => {
                    alert("我是回调函数")
                    document.getElementsByTagName("button")[0]
                        .onclick = () => {
                        alert("我是钩子函数")
                    }
                })
            console.timeEnd("timer2")
        })
    </script>
</head>
<body>
<h1>对比一下</h1>
<button>1222</button>
</body>