我们在开发一些大型前端项目时，会遇到这样一种情况，某个变量上有个字段。我们想知道是哪一段程序修改了这个变量上的字段。比如全局变量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. codeforces 459E E. Pashmak and Graph(dp+sort)

    题目链接: E. Pashmak and Graph time limit per test 1 second memory limit per test 256 megabytes input st ...

  2. Opencv实现两幅图像融合

    实现两幅图像线性(不同系数下)的融合涉及到Opencv中两个关键的方法,addWeighted()和createTrackbar() addWeighted方法: 函数原型: void addWeig ...

  3. FileInputStream和FileReader

    这两个类都可以读入数据到缓冲区,FileInputStream在传递到buffer的时候要用byte定义buffer,不然报错.比如: byte [] buffer = new byte[100]; ...

  4. 并不对劲的bzoj4804:欧拉心算

    题目大意 \(t\)(\(t\leq5000\))组询问,每次询问给出\(n\)(\(n\leq10^7\)),求: \[\sum_{i=1}^{n}\sum_{j=1}^{n}\phi(gcd(i, ...

  5. BZOJ_4278_[ONTAK2015]Tasowanie_后缀数组

    BZOJ_4278_[ONTAK2015]Tasowanie_后缀数组 Description 给定两个数字串A和B,通过将A和B进行二路归并得到一个新的数字串T,请找到字典序最小的T. Input ...

  6. maven 简单入门教学实战手册

    Maven那点事儿(Eclipse版)   前言: 由于最近工作学习,总是能碰到Maven的源码.虽然平时工作并不使用Maven,但是为了学习一些源码,还是必须要了解下.这篇文章不是一个全面的Mave ...

  7. Java中Semaphore(信号量) 数据库连接池

    计数信号量用来控制同时访问某个特定资源的操作数或同时执行某个指定操作的数量 A counting semaphore.Conceptually, a semaphore maintains a set ...

  8. 插入符的创建（MFC）

    int CDrawRectangleDlg::OnCreate(LPCREATESTRUCT lpCreateStruct) { ) ; // TODO: 在此添加您专用的创建代码 CreateSol ...

  9. 用ffmpeg命令将264裸码流封装成mp4（转载）

    转自:http://bbs.csdn.net/topics/370256130 ffmpeg -f h264 -i source.264 -vcodec copy out.mp4

  10. 51nod 1276 【离线化】

    思路1.: 离线处理: 具体就是把岛屿离线然后按照高度排序,把query按照从高到低排序,然后每次query只要从最高的岛屿开始找起,判断条件:如果他旁边都是没有被找过的(也就是默认是海),那么数量+ ...