使用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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
相关推荐
dxyadc 2020-06-04
kururunga 2020-05-01
shufen0 2020-01-16
akcsdno 2020-01-04
htofly 2020-01-04
melonjj 2020-01-04
Pineapple 2014-05-29
强子 2019-12-19
huangzonggui 2019-12-11
图灵的梦 2013-07-08
LiLiLiLaLa 2011-04-14
wangxiaoxue 2019-10-20
PHP基础学习 2015-08-26
gongzhiyao0 2012-05-26
meleto 2019-09-07
huolan 2007-07-27
leiyanglove 2013-02-22
javamao00 2012-07-28