我们在开发一些大型前端项目时，会遇到这样一种情况，某个变量上有个字段。我们想知道是哪一段程序修改了这个变量上的字段。比如全局变量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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

使用JavaScript给对象修改注册监听器的更多相关文章

  1. 关于Javascript中通过实例对象修改原型对象属性值的问题

    Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...

  2. JavaScript修改注册表

    JavaScript修改注册表 2009-04-14 11:22:13|  分类: JS相关 |  标签: |字号大中小 订阅     注册表有关安全设置项的说明: 注册表路径: HKEY_CURRE ...

  3. C#综合揭秘——通过修改注册表建立Windows自定义协议

    引言 本文主要介绍注册表的概念与其相关根项的功能,以及浏览器如何通过连接调用自定义协议并与客户端进行数据通信.文中讲及如何通过C#程序.手动修改.安装项目等不同方式对注册表进行修改.其中通过安装项目对 ...

  4. 【转】C#综合揭秘——通过修改注册表建立Windows自定义协议

    引言 本文主要介绍注册表的概念与其相关根项的功能,以及浏览器如何通过连接调用自定义协议并与客户端进行数据通信.文中讲及如何通过C#程序.手动修改.安装项目等不同方式对注册表进行修改.其中通过安装项目对 ...

  5. 第一百二十节，JavaScript事件对象

    JavaScript事件对象 学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功 ...

  6. JavaScript原生对象及扩展

    来源于 https://segmentfault.com/a/1190000002634958 内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始 ...

  7. 通过修改注册表建立Windows自定义协议

    引言 本文主要介绍注册表的概念与其相关根项的功能,以及浏览器如何通过连接调用自定义协议并与客户端进行数据通信.文中讲及如何通过C#程序.手动修改.安装项目等不同方式对注册表进行修改.其中通过安装项目对 ...

  8. 【你不知道的javaScript 上卷 笔记7】javaScript中对象的[[Prototype]]机制

    [[Prototype]]机制 [[Prototype]]是对象内部的隐试属性,指向一个内部的链接,这个链接的作用是:如果在对象上没有找到需要的属性或者方法引用,引擎就 会继续在 [[Prototyp ...

  9. 从零构建JavaScript的对象系统

    一.正统的类与继承 类是对象的定义,而对象是类的实例(Instance).类不可直接使用,要想使用就必须在内存上生成该类的副本,这个副本就是对象. 以Java为例: public class Grou ...

随机推荐

  1. I.MX6 Android busybox 从哪里生成的

    /**************************************************************************** * I.MX6 Android busybo ...

  2. 理解Objective-C Runtime （六）super

    super 在Objective-C中,如果我们需要在类的方法中调用父类的方法时,通常都会用到super,如下所示: @interface MyViewController: UIViewContro ...

  3. RadioGroup和RadioButton

    Activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...

  4. bzoj2878 [Noi2012]迷失游乐园——概率期望DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2878 这个博客写得很好:https://www.cnblogs.com/qt666/p/72 ...

  5. 指针 * &

    int main() { ; //定义int变量updates int * p_updates; //定义指针p_updates p_updates=&updates;//将updates的地 ...

  6. perceptron and ANN

    %% Perceptron Regression close all clear %%load data x = load('ex4x.dat'); y = load('ex4y.dat'); x=o ...

  7. 交通规划_dijkstra

    问题描述 G国国王来中国参观后,被中国的高速铁路深深的震撼,决定为自己的国家也建设一个高速铁路系统. 建设高速铁路投入非常大,为了节约建设成本,G国国王决定不新建铁路,而是将已有的铁路改造成高速铁路. ...

  8. 使用git rebase合并多次commit

    使用git rebase合并多次commit 聊下 git rebase -i

  9. HDU1016【简单递归.DFS】

    题意:一个环,相邻相加是素数. 思路: 直接深搜就好了.. output limit exceed 了好几发... 因为那个while里面的scanf前面的"~" 后来搜了outp ...

  10. python 面向对象十三 枚举类

    from enum import Enum Month = Enum('Month', ('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', ...