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