1.setInterval方法
直观且朴素的方法，可以用setInterval，循环检测变量的值。
<html>
<body>
<script>
//要监视的变量
var test_value = 1;
setInterval(function(){
if(test_value != 1){
console.log("值变成了：",test_value);
}
},1000);
</script>
</body>
</html>
在这个例子中，方法比较直接保守，且浪费资源。
2.Getter和Setter方法
可以用于在获取和设置变量值时执行自定义的操作。
var test_obj = {};
Object.defineProperties(test_obj, {
a: {
get: function() {
console.log("取值：",a)
return a
},
set: function(new_value) {
a = new_value;
console.log("设值：",a)
}
}
});
test_obj.a = "JShaman是专业的JavaScript混淆加密平台";
在这个例子中，
- 我们使用
Object.defineProperty()方法定义了一个名为name的属性，其中包括了Getter和Setter方法。 - 当设置
name属性的值时，Setter方法会被触发，我们可以在Setter方法中编写自定义的操作。
在这个例子中，我们在Setter方法中添加了一条打印语句，用于捕捉变量name的改变。
3.Proxy对象
ES6引入的Proxy对象是JavaScript中的另一个强大工具，可以用于监听对象的操作，并在操作发生时执行相应的逻辑。
let data = {
name: 'John'
}
// 创建一个Proxy对象
let proxy = new Proxy(data, {
set: function(target, key, value) {
target[key] = value;
console.log(`变量${key}发生了改变`)
// 执行其他操作
return true;
}
})
在这个例子中，
- 我们使用
new Proxy()语法创建了一个Proxy对象，其中定义了一个set方法。 - 当设置Proxy对象的属性值时，set方法会被触发，我们可以在set方法中编写自定义的操作。
在这个例子中，我们通过设置Proxy对象的name属性值来捕捉变量改变的事件，并触发相应的回调函数。
4.监听DOM元素的改变
除了监听变量的改变，我们还可以监听DOM元素的改变。JavaScript提供了MutationObserver接口，用于监听DOM树的变化，并在变化发生时执行相应的操作。
// 目标元素
let target = document.getElementById('my-element');
// 创建一个MutationObserver实例
let observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log('DOM元素发生了改变');
// 执行其他操作
})
})
// 配置观察选项
let config = { attributes: true, childList: true, subtree: true }
在这个例子中，
- 我们首先通过
document.getElementById()获取目标元素，然后创建了一个MutationObserver实例，并定义了一个回调函数。 - 回调函数会在观察的DOM元素发生变化时被触发，我们可以在其中编写自定义的操作。
- 最后，通过调用
observe()方法，将目标元素和观察选项传递给MutationObserver实例，开始监听DOM元素的改变。
