JavaScript中的钩子(钩子机制\钩子函数\hook)是什么？

首先，看到我们的标题：

JavaScript中的钩子(钩子机制钩子函数hook) 是什么？

我们前端的JavaScript中，经常提到钩子，毋庸置疑，那这个东西肯定也尤为重要。

但是有点前端入门不久，很疑惑，这个钩子到底是什么呢？

首先，我们的钩子，钩子机制，钩子函数，hook，都是同一个概念。

钩子（HOOK）？

对于Windows系统，它是建立在事件驱动机制上的，说白了就是整个系统都是通过消息传递实现的。hook（钩子）是一种特殊的消息处理机制，它可以监视系统或者进程中的各种事件消息，截获发往目标窗口的消息并进行处理。

用来监视系统中特定事件的发生，完成特定功能，如屏幕取词，监视日志，截获键盘、鼠标输入等等。

百度给出的解释是这样的：

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

是不是觉得还是不明白，很显然，这个解释非常官方，我们要用现实思维去描述。

说白了，钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。一段用以处理系统消息的程序，用以处理系统消息的程序，是说钩子函数是用于处理系统消息的

两个特点：

• 是个函数，且系统消息触发时被系统调用
• 非用户自己触发

回调函数与钩子

回调函数是你留了个函数，但是这个函数不是立即执行，而是绑定了个事件。当事件触发时，自动执行函数，而非必须执行。

概念：作为参数传给另一个 JavaScript 函数的函数。

回调函数确保一段代码执行完毕之后再执行另一段代码的方式。

如果还是不理解，请看：

10张图让你彻底理解回调函数 - 知乎 (zhihu.com)

钩子函数是好比找了个代理，监视事件是否发生，如果发生了这个代理就执行你的事件处理方法；在这个过程中，代理就是钩子函数。

• 在某种意义上，回调函数做的处理过程跟钩子函数中要调用调方法一样
• 但是！！！钩子函数一般是由事件发生者提供的。直白了说，它留下一个钩子，这个钩子的作用就是钩住你的回调方法。

或者，你可以认为钩子函数就是回调函数。

钩子函数一般是在某个框架里面的叫法，是这个框架在生命周期的某个阶段触发的回调函数。

比如Vue/React里面就存在生命周期函数。

看Vue框架里面自带的一段代码，无论我写不写它就在那里，但当我调用它以后，它就会执行我参数的内容。