使用JavaScript给对象修改注册监听器

简介: 使用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函数修改之后,就会触发。image.png测试一下,在浏览器里执行上述代码,发现断点按照我们期望的被触发了:

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

image.png



相关文章
|
JavaScript 前端开发
使用JavaScript给对象修改注册监听器
我们在开发一些大型前端项目时,会遇到这样一种情况,某个变量上有个字段。我们想知道是哪一段程序修改了这个变量上的字段。比如全局变量window上我们自定义了一个新字段_name,我们想知道到底有哪些程序给这个字段赋了值。
1418 0
|
存储 JavaScript 前端开发
|
移动开发 JavaScript 前端开发
|
移动开发 JavaScript 前端开发
|
JavaScript 前端开发
|
JavaScript 前端开发
|
JavaScript 前端开发
JavaScript学习(十四)---String对象中的模式匹配方法
目录 1.match()方法 语法:stringobj.match(rgExp) 例子: 2.search()方法 语法:stringobj.search(rgExp) 例子: 3.replace()方法 语法:replace(rgExp.replaceText) 例子: 4.split()方法 语法:split([separator[,limit]]) 1.match()方法 match()方法使用正则表达式模式对字符串进行查找,并将包含查找的结果作为数组返回。
959 0
|
JavaScript 前端开发 存储
JavaScript学习(十三)---RegExp对象
目录 创建RegExp对象 1.使用RegExp的显式构造函数 2.使用RegExp的隐式构造函数,采用纯文本格式 RegExp对象的属性 静态属性: index属性: input属性: lastIndex...
827 0
|
存储 JavaScript 前端开发
JavaScript学习(十一)--数值处理对象
目录 Math对象 1.math对象的属性 2. Math对象的方法 Number对象 1.创建Number对象 2.
985 0
|
JavaScript 前端开发 Java
JavaScript高级程序设计学习(五)之对象
众说周知,java是面向对象的编程语言。一个类包含多个对象,例如车类,它包含宝马,奔驰,东风,本田,莲花等这样的车,而品牌和颜色或者某种标识就是它的属性。车包含很多种类,但是共性还是有的,比如共性有四个轮子,有品牌,有发动机等等。
1012 0