使用JavaScript給物件修改註冊監聽器
我們在開發一些大型前端專案時,會遇到這樣一種情況,某個變數上有個欄位。我們想知道是哪一段程式修改了這個變數上的欄位。比如全域性變數window上我們自定義了一個新欄位_name,我們想知道到底有哪些程式給這個欄位賦了值。
一行行地除錯肯定太費時間了。如果window這個變數的_name欄位被程式賦值時,能執行我們自己實現的一個監聽器,這樣不就方便多了麼?
監聽器的實現很簡單:
<html><script>"use strict";function test(){ Object.defineProperty(window, "_name", { get : function(){ console.log("gett is called ") }, set : function(newValue){ debugger; console.log("_name is filled!!!!"); }, enumerable : true, configurable : true});for( var i = 0; i < 2; i++) console.log(i);window._name = "2"; }; test();</script>
使用Object物件自帶的方法defineProperty, 第一個引數為要監聽的物件window,第二個引數為要監聽的物件欄位名稱,_name。
第三個引數是一個物件,屬性為set,意思是我們想監聽window._name被賦值的這個事件。屬性set的值為一個JavaScript函式,即我們自己定義的監聽器。這個監聽器,當window._name被其他JavaScript函式修改之後,就會觸發。
測試一下,在瀏覽器裡執行上述程式碼,發現斷點按照我們期望的被觸發了:
從呼叫棧也能發現確實是window._name = "2"這一行程式碼觸發的斷點,我們自己註冊的屬性修改監聽器確實工作了。
要獲取更多Jerry的原創技術文章,請關注公眾號"汪子熙"或者掃描下面二維碼:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2213832/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 監聽動態註冊
- 動態註冊監聽
- 動態監聽註冊
- 【監聽】動態註冊和靜態註冊
- oracle監聽器動態註冊於靜態註冊的區別Oracle
- rac監聽動態註冊
- 動態註冊監聽Listener
- Oracle 動態監聽註冊Oracle
- oracle監聽靜態註冊和動態註冊Oracle
- oracle監聽動態註冊與靜態註冊Oracle
- oracle監聽器的靜態和動態註冊Oracle
- rac監聽不能動態註冊
- Oracle監聽的靜態註冊和動態註冊Oracle
- Oracle監聽的動態註冊與靜態註冊Oracle
- ORACLE 動態註冊,靜態註冊,多個監聽,一個監聽多個埠配置Oracle
- 【LISTENER】修改 LISTENER的監聽埠為1526(動態註冊)
- 【LISTENER】修改 LISTENER的監聽埠為1526(靜態註冊)
- oracle監聽動態註冊與靜態註冊[轉帖]Oracle
- 聊聊跟蹤監聽器動態註冊(Dynamic Register)方法
- Oracle 靜態監聽註冊詳解Oracle
- Oracle動態監聽註冊測試Oracle
- HPUX 監聽無法動態註冊UX
- 【LISTENER】使用Oracle隱含引數禁止“_XPT”服務註冊到監聽器Oracle
- Oracle監聽器的靜態註冊與動態註冊,以及DB_DOMAIN問題OracleAI
- 轉載:oracle監聽器的靜態和動態註冊Oracle
- oracle 監聽器動態與靜態註冊服務_listenerOracle
- Nacos - 事件的註冊、取消與監聽(EventDispatcher)事件
- 【原創】Oracle的動態監聽註冊Oracle
- 【Oracle】修改scan監聽器埠號Oracle
- oracle監聽之動態和靜態註冊Oracle
- oracle監聽【非1521埠】動態註冊Oracle
- js 註冊事件的兩種方式詳解,傳統註冊事件與方法監聽註冊事件(addEventListener)JS事件dev
- Oracle9i中的監聽動態註冊Oracle
- 【LISTENER】使用“alter system register;”解決動態監聽註冊緩慢問題
- srvctl新增新的監聽和埠並靜態註冊
- 動態和靜態監聽註冊-小魚的理解
- 理解Oracle9i中的監聽動態註冊Oracle
- 監聽 watch props物件屬性監聽 或深度監聽物件