js调试小技巧

1. 监听一个对象属性的变化

在分析js的时候，我们往往想查看一个变量的变化以及在何处使用了它。那可以使用Object.defineProperty来监听对象属性变化

比如我们想监听一个变量的引用以及变化

a  = "123456";
data = a;
Object.defineProperty(window, "a", {
    get() {
        console.log("取值a的值: ", data);
        return data;
    },
    set(v) {
        data = v;
        console.log("a重新赋值: ", v);
        return v;
    }
});
a = "123";

当后续再使用a的时候会触发它的get方法，重新赋值会触发set方法。我们可以在其中断点，分析js调用栈。调试起来比较方便。

2. 监听一个对象多个属性的变化

监听对象的一个属性使用Object.defineProperty,如果监听多个，使用Object.defineProperties更方便一点。

function copyObj(obj) {
    return JSON.parse(JSON.stringify(obj));
}

var params = {
    "signature": "123456",
    "sign": "abcd"
};
var p1 = copyObj(params);
Object.defineProperties(params, {
        "signature": {
            get() {
                console.log("获取了signature值: ", p1.signature);
                return p1.signature;
            },
            set(v) {
                p1.signature = v;
                console.log("signature重新赋值: ", v);
                return v;
            }
        },
        "sign": {
            get() {
                console.log("获取了sign值: ", p1.sign);
                return p1.sign
            },
            set(v) {
                p1.sign = v;
                console.log("sign重新赋值: ", v);
                return v;
            }
        }

    }
);
params.signature = "12345";
params.sign = "qwer";

3. 监听整个对象属性的变化

如果我们想监听整个对象，如果对象的属性有很多，那一个个这么写也比较麻烦。可以使用Proxy

var params = {
    "signature": "123456",
    "sign": "abcd"
};
params = new Proxy(params, {
    get: function (target, key, receiver) {
        console.log(`获取了key:${key},值：${target[key]}`);
        return target[key]
    },
    set: function (target, key, value, receiver) {
        target[key] = value;
        console.log(`修改了key:${key},新值：${value}`);
        return true
    }
});
params.signature = "1234";
console.log(params.signature);

参考网址:

1. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
2. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy