1. 程式人生 > 其它 >JavaScript中的鉤子(鉤子機制\鉤子函式\hook)是什麼?

JavaScript中的鉤子(鉤子機制\鉤子函式\hook)是什麼?

我的部落格

首先,看到我們的標題:

JavaScript中的鉤子(鉤子機制\鉤子函式\hook) 是什麼?

我們前端的JavaScript中,經常提到鉤子,毋庸置疑,那這個東西肯定也尤為重要。

但是有點前端入門不久,很疑惑,這個鉤子到底是什麼呢?

首先,我們的鉤子,鉤子機制,鉤子函式,hook,都是同一個概念。

鉤子(HOOK)?

對於Windows系統,它是建立在事件驅動機制上的,說白了就是整個系統都是通過訊息傳遞實現的。hook(鉤子)是一種特殊的訊息處理機制,它可以監視系統或者程序中的各種事件訊息,截獲發往目標視窗的訊息並進行處理。

用來監視系統中特定事件的發生,完成特定功能,如螢幕取詞,監視日誌,截獲鍵盤、滑鼠輸入等等。

百度給出的解釋是這樣的:

鉤子函式是Windows訊息處理機制的一部分,通過設定“鉤子”,應用程式可以在系統級對所有訊息、事件進行過濾,訪問在正常情況下無法訪問的訊息。鉤子的本質是一段用以處理系統訊息的程式,通過系統呼叫,把它掛入系統。

是不是覺得還是不明白,很顯然,這個解釋非常官方,我們要用現實思維去描述。

說白了,鉤子函式是在一個事件觸發的時候,在系統級捕獲到了他,然後做一些操作。一段用以處理系統訊息的程式,用以處理系統訊息的程式,是說鉤子函式是用於處理系統訊息的

兩個特點:

  • 是個函式,且系統訊息觸發時被系統呼叫
  • 非使用者自己觸發

回撥函式與鉤子

回撥函式是你留了個函式,但是這個函式不是立即執行,而是綁定了個事件。當事件觸發時,自動執行函式,而非必須執行。

概念:作為引數傳給另一個 JavaScript 函式的函式。

回撥函式確保一段程式碼執行完畢之後再執行另一段程式碼的方式

如果還是不理解,請看:

10張圖讓你徹底理解回撥函式 - 知乎 (zhihu.com)

鉤子函式是好比找了個代理,監視事件是否發生,如果發生了這個代理就執行你的事件處理方法;在這個過程中,代理就是鉤子函式。

  • 在某種意義上,回撥函式做的處理過程跟鉤子函式中要呼叫調方法一樣
  • 但是!!!鉤子函式一般是由事件發生者提供的。直白了說,它留下一個鉤子,這個鉤子的作用就是鉤住你的回撥方法。

或者,你可以認為鉤子函式就是回撥函式。

鉤子函式一般是在某個框架裡面的叫法,是這個框架在生命週期的某個階段觸發的回撥函式。

比如Vue/React裡面就存在生命週期函式。

Vue框架裡面自帶的一段程式碼,無論我寫不寫它就在那裡,但當我呼叫它以後,它就會執行我引數的內容。