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

時間 2019-11-19

標籤使用 javascript 對象修改註冊監聽器欄目 JavaScript 简体版

原文原文鏈接

咱們在開發一些大型前端項目時，會遇到這樣一種狀況，某個變量上有個字段。咱們想知道是哪一段程序修改了這個變量上的字段。好比全局變量window上咱們自定義了一個新字段_name，咱們想知道到底有哪些程序給這個字段賦了值。html

一行行地調試確定太費時間了。若是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函數修改以後，就會觸發。測試