`
JerryWang_SAP
  • 浏览: 964077 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

使用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函数修改之后,就会触发。

 

测试一下,在浏览器里执行上述代码,发现断点按照我们期望的被触发了:

 

从调用栈也能发现确实是window._name = "2"这一行代码触发的断点,我们自己注册的属性修改监听器确实工作了。

 

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

 

 
 
0
0
分享到:
评论

相关推荐

    JavaScript详解(第2版)

    1.9.1 JavaScript对象 12 1.9.2 文档对象模型 12 1.10 关于浏览器 13 1.10.1 JavaScript的版本 14 1.10.2 你的浏览器遵循标准吗 16 1.10.3 浏览器是否已启用JavaScript 16 1.11 JavaScript代码放在哪儿...

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    5.2 使用JavaScript脚本控制媒体播放 141 5.3 事件监听 144 5.4 track元素 146 5.5 本章小结 149 第6章 级联样式单与CSS选择器 150 6.1 样式单概述 151 6.2 CSS样式单的基本使用 152 6.3 CSS选择器 158 6.4...

    深入浅析JavaScript中对事件的三种监听方式

    最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,本篇文章跟大家分享的是JavaScript中对事件的三种监听方式

    小程序使用watch监听数据变化的方法详解

    监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法,当被监听的数据的值改变时,调用该方法。​​ 我们需要用到Javascript中的Object.defineProperty()方法,来手动劫持对象的getter/setter...

    Javascript_weather_app:一个简单的Web应用程序,该应用程序使用javascript构建并从Accuweather API获取天气信息

    事件监听器是JavaScript中等待事件发生的过程。 事件的简单示例是用户单击鼠标或按键盘上的键。 2)innerHTML属性是文档对象模型(DOM)的一部分,该文档对象模型允许Javascript代码操纵显示的网站。 具体来说,它...

    DSBridge-IOS:现代的跨平台JavaScript桥,通过它,您可以在JavaScript和本机之间同步或异步调用彼此的功能

    支持API对象,它集中实现Java类或Javascript对象中的API 支持API名称空间 支持调试模式 支持API是否存在的测试 支持进度回叫:一个电话,多次返回 支持Java事件监听器以关闭页面 支持javascript的模式和无模式弹出...

    详解JavaScript异步编程中jQuery的promise对象的作用

    这种“不可改变”的特性对于一个Promise来说非常的重要,它可以避免Promise的状态监听器修改一个Promise的状态导致别的监听器的行为异常。例如:一个监听fulfilled状态的监听器把Promise的状态修改为failed,那么将...

    JavaScript-snippets:简短JavaScript代码段

    仅触发一次事件监听器。 24 香草JS切换 25 检查字符串是否为有效的JSON 26 getBoundingClientRect 27 检查节点是否在视口中 28岁 元素大小更改时通知 29 检测浏览器选项卡是否在视图中 30 私有类方法和...

    selection-listener:在选择更改时触发事件

    选择监听器(目标:元素) 侦听目标对象上的选择更改并在观察到更改时触发自定义 jQuery selectionChange事件的对象。 使用 EquatableSelection 观察变化。 如果选择存在,则触发的selectionChange事件包含一个包含 ...

    javaweb教程-java中级资料(ppt+txt).zip

    课件总共有18个章节 ...第二节 CSS 知识 第三节 JavaScript知识 第四节 Mysql知识 第五节 JDBC知识 第六节 Web开发模型 ...第十五节 监听器 第十六节 过滤器 第十七节 文件上传下载以及验证码 第十八节 JSP分页

    c认证web进阶dom与bom

    监听器 更改样式 事件自增 鼠标事件 1、常用鼠标事件 2、常用键盘事件 3、常用键盘事件属性 this使用输出本身 同上 弹窗 窗口事件 1、常用鼠标事件 过程 BOM 1、BOM结构 2、window对象 3、location...

    精通AngularJS part1

    promise是第一类JavaScript对象87 聚合回调88 注册回调和承诺的生命周期88 异步动作的链式调用89 关于$q的其他91 AngularJS中的$q集成93 33promiseAPI与$http94 34与RESTful端点通信95 $resource服务95 ...

    flex3的cookbook书籍完整版dpf(包含目录)

    在MXML中添加事件监听器 1.7节.设置子节点属性 1.8节.定义数组和对象 1.9节.在ActionScript中设置变量的作用域 1.10节.在ActionScript中创建组件 1.11节.使用事件冒泡机制 1.12节.使用代码隐藏模式分离MXML和...

    JavaScript高级教程

    第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................

    GTM声纳「GTM Sonar」-crx插件

    这对于调试非常有用,因为在GTM中设置监听器标签之前,您现在可以随意使用标记进行测试。如果要调试无法访问容器或预览版本的站点,这也非常有用。 3. TO-DO 1)更加稳定和健壮 4.版本历史 v1.3 - 2015年6月5日 - ...

    meteor-reactive-class:Meteor 的React式类。 允许双向React式数据绑定和 OOP

    或者,使用轮询模式,让对象监听 mongoDB 更新,并以被动方式更新自己。 安装 安装 mrt add reactive-class 例子 简单的设置,使用基于自然 javascript 原型的类。 将其集成到您现有的代码库中,而无需使用 Meteor ...

    HTML5-Canvas-based-Compass-and-mouse-tracker:这是一个基于地图和指南针的概念,使用 HTML5 Canvas、CSS3 和 Javascipt 创建,并带有修改的 jQueryRotate 库

    我们在 mainCanvas 上添加了鼠标位置 mousemove 监听器来检测指针的位置。 后来我们通过 jQueryRotate 库在各自的方向移动了指针。 由创建 函数onResize有助于根据窗口更改画布的尺寸。 每个画布对象上的绘制功能...

Global site tag (gtag.js) - Google Analytics