我们在开发一些大型前端项目时，会遇到这样一种情况，某个变量上有个字段。我们想知道是哪一段程序修改了这个变量上的字段。比如全局变量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对象经典小册 chm"深入探讨了JavaScript中的核心概念——对象和数组，旨在帮助开发者更好地理解和掌握这些基础知识。 一、JavaScript对象 1. 对象概述：JavaScript对象是一种数据结构，它由键值对...
- **Event对象**：处理事件，如`event`（事件对象）、`addEventListener`（添加事件监听器）等。 - **Function对象**：定义函数和处理函数，如`Function.prototype`（函数原型）、`arguments`（函数参数对象）等。 ...
4. 事件处理：通过`addEventListener`添加事件监听器，`removeEventListener`移除监听器。事件包括点击（click）、提交（submit）、改变（change）等。 5. 遍历DOM：`childNodes`返回子节点集合，`children`返回子...
- 事件监听器：学习如何添加和移除事件监听器，包括DOM0级和DOM2级事件处理方式。 - 事件冒泡和捕获：理解事件传播机制，以及如何阻止默认行为。 7. **Window及相关顶级对象**（第7章） - Window对象：浏览器...
总的来说，理解并掌握JavaScript对象和数组的监听机制，有助于我们更好地实现MVVM，提高代码的可维护性和性能。通过这个实例，开发者可以深入学习到如何利用原生JavaScript实现数据绑定和实时更新，这对于前端开发者...
这个“JavaScript对象代码及素材”的压缩包可能包含这些概念的实例代码、练习题或教学资源，帮助开发者深入理解和掌握JavaScript对象的使用。通过研究这些材料，开发者可以提升自己的JavaScript技能，更好地应用于...
- 原型链：JavaScript对象继承是通过原型链实现的，`__proto__`或`Object.getPrototypeOf()`用于访问对象的原型。 3. **函数** - 函数是可重用的代码块，可以接受参数并返回值。使用`function`关键字定义。 - ...
事件监听器如`addEventListener()`用于注册事件处理函数，当特定事件发生时，这些函数会被调用。 此外，了解AJAX（Asynchronous JavaScript and XML）对于创建现代网页是必要的。AJAX允许在不刷新整个页面的情况下...
区别在于，原生DOM对象提供了底层的、直接的访问，这意味着你可以对元素进行更细致的控制，比如修改属性、添加事件监听器等。而jQuery对象则提供了更高的抽象层次，使得代码更简洁，同时也处理了许多浏览器兼容性...
`document`对象还包含事件处理，如`document.addEventListener`用于注册事件监听器，以及`document.execCommand`用于执行某些富文本编辑操作。可能还会涉及`document.readyState`，它表示文档加载状态，以及`...
可以使用事件委托来减少事件监听器的数量，或者使用`requestAnimationFrame`来安排样式更新。 以上就是使用JavaScript实现对象功能导航菜单的一些核心概念和技术。在实际项目中，我们还可以考虑引入库或框架（如...
当用户在网页上进行操作时，如点击、按键、鼠标移动等，都会触发相应的事件，JavaScript可以通过监听器（Listener）来响应这些事件。 JavaScript的对象是一组无序的相关数据和/或功能的集合。对象可以通过字面量...
3. **第3章 JavaScript事件处理**：JavaScript通过事件驱动与用户进行交互，这一章将涵盖事件监听器、事件处理程序、事件对象以及常见的DOM事件，如点击、鼠标移动、键盘输入等。 4. **第4章 JavaScript基于对象...
在本项目中，“使用JavaScript+CSS实现翻转魔方.rar”是一个编程教程，教你如何使用JavaScript和CSS这两种前端技术来创建一个可交互的翻转魔方。这个项目旨在帮助开发者提升网页动态效果的制作能力，同时也是一种...
5. `addEventListener()`和`removeEventListener()`：添加和移除事件监听器，是处理浏览器事件的核心方法。 三、事件处理 `window`对象是事件模型的关键部分，可以监听和处理如页面加载、卸载、窗口大小改变等事件...
11. **事件委托**：利用事件冒泡原理，将事件监听器添加到父元素上，从而减少内存消耗和提高性能。 12. **跨域通信**：CORS、JSONP等方法，解决不同源策略带来的限制。 13. **前端框架与库**：如果源码包含相关...
例如，可以使用`.addEventListener()`方法添加点击事件监听器，当用户点击某个特定按钮时，动态显示或隐藏菜单。 3. **CSS动画**：为了让菜单效果更加吸引人，可以结合CSS3的动画效果。通过JavaScript动态修改元素...
手册涵盖了常见事件类型（如click、mouseover、keydown）以及事件监听器的使用方法，包括传统的事件处理程序和现代的事件监听器API。此外，还讨论了事件冒泡和事件捕获的概念，以及如何阻止事件的默认行为和停止事件...
- **装饰器模式**在不修改原有对象的基础上，动态地给对象添加新的行为或职责。 - **代理模式**为其他对象提供一种代理以控制对这个对象的访问。 在JavaScript中，我们可以利用闭包、原型链、模块化等特性来实现...
这涉及到事件对象、事件监听器（addEventListener）和事件处理器。 4. **DOM操作**：Document Object Model（DOM）是HTML和XML文档的结构表示。JavaScript可以用来修改DOM元素，如创建新元素、改变元素属性、添加和...