巧用 Getter 和 Setter 进行 JavaScript 调试

调试 bug 的时候，需要监控一个变量是什么时候被修改的，浏览器 f12 debug 可以通过 watch 中取观察，但是没法打断点去调试追踪在哪进行修改的。

这时候可以用到 getter 或者 setter 的特性去 debug

参考文章

• 浅谈 JS 对象添加 getter 与 setter 的 5 种方法以及如何让对象属性不可配置或枚举
• Javascript getter using defineProperty for String returns null

监控字符串

Object.defineProperty(String.prototype, 'lower', {
  get: function () {
    // 方法
    return 返回值;
  },
  set: function (value) {
    // 方法
    return 返回值;
  },
});

console.log('EXAMPLE'.lower());

监控对象中的某属性

创建的时候定义

var test = {
  a: 123,
  get b() {
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2;
  },
};

Object.create 方法

var o = null;
o = Object.create(Object.prototype, {
  bar: {
    get: function () {
      return 10;
    },
    set: function (val) {
      console.log('Setting `o.bar` to ', val);
    },
  },
});

Object.defineProperty 方法

var o = { a: 1 };
Object.defineProperty(o, 'b', {
  get: function () {
    return this.a;
  },
  set: function (val) {
    this.a = val;
  },
  configurable: true,
});