【原】使用JavaScript給對(duì)象修改注冊監(jiān)聽器

汪子熙 2019-03-17

展開全文

我們在開發(fā)一些大型前端項(xiàng)目時(shí)，會(huì)遇到這樣一種情況，某個(gè)變量上有個(gè)字段。我們想知道是哪一段程序修改了這個(gè)變量上的字段。比如全局變量window上我們自定義了一個(gè)新字段_name，我們想知道到底有哪些程序給這個(gè)字段賦了值。

一行行地調(diào)試肯定太費(fèi)時(shí)間了。如果window這個(gè)變量的_name字段被程序賦值時(shí)，能執(zhí)行我們自己實(shí)現(xiàn)的一個(gè)監(jiān)聽器，這樣不就方便多了么？

監(jiān)聽器的實(shí)現(xiàn)很簡單:

<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對(duì)象自帶的方法defineProperty, 第一個(gè)參數(shù)為要監(jiān)聽的對(duì)象window，第二個(gè)參數(shù)為要監(jiān)聽的對(duì)象字段名稱，_name。

第三個(gè)參數(shù)是一個(gè)對(duì)象，屬性為set，意思是我們想監(jiān)聽window._name被賦值的這個(gè)事件。屬性set的值為一個(gè)JavaScript函數(shù)，即我們自己定義的監(jiān)聽器。這個(gè)監(jiān)聽器，當(dāng)window._name被其他JavaScript函數(shù)修改之后，就會(huì)觸發(fā)。