`
JerryWang_SAP
  • 浏览: 974458 次
  • 性别: 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...

    java简易计数器.doc

    3. 事件监听机制:事件监听机制是Java中处理用户交互操作的一种机制,通过注册事件监听器来监听用户的操作,如按钮点击、鼠标移动等。 Java简易计数器程序设计实现 1. 创建计数器主窗口:使用Java的AWT库创建一个...

    精通AngularJS part1

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

    浙江大学城市学院《J2EE架构与应用开发》期末考试试卷.pdf

    在 Web.xml 中,不需要配置映射关系的组件是监听器。 11. HttpServletResponse 的方法: 通过 HttpServletResponse 可以向客户端发送数据,其数据类型可以是 Html 文本、Word 文件、二进制文件等,为使客户端能...

    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日 - ...

Global site tag (gtag.js) - Google Analytics