使用JavaScript給物件修改註冊監聽器

i042416發表於2018-09-09

我們在開發一些大型前端專案時,會遇到這樣一種情況,某個變數上有個欄位。我們想知道是哪一段程式修改了這個變數上的欄位。比如全域性變數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函式修改之後,就會觸發。

使用JavaScript給物件修改註冊監聽器

測試一下,在瀏覽器裡執行上述程式碼,發現斷點按照我們期望的被觸發了:

使用JavaScript給物件修改註冊監聽器

從呼叫棧也能發現確實是window._name = "2"這一行程式碼觸發的斷點,我們自己註冊的屬性修改監聽器確實工作了。

使用JavaScript給物件修改註冊監聽器

要獲取更多Jerry的原創技術文章,請關注公眾號"汪子熙"或者掃描下面二維碼:


使用JavaScript給物件修改註冊監聽器

使用JavaScript給物件修改註冊監聽器


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2213832/,如需轉載,請註明出處,否則將追究法律責任。

相關文章