天天看點

使用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函數修改之後,就會觸發。

使用JavaScript給對象修改注冊監聽器

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

使用JavaScript給對象修改注冊監聽器

從調用棧也能發現确實是window._name = "2"這一行代碼觸發的斷點,我們自己注冊的屬性修改監聽器确實工作了。

使用JavaScript給對象修改注冊監聽器

繼續閱讀