JavaScript必备知识点之Object.defineProperty与es6Proxy代理二三事（一）

乍一看proxy就想到了 Nginx 里面的代理。不过今天要分享的不是 Nginx 里的代理，而是 ES6 新增的类Proxy。

代理一词早在 JavaScript 事件委托中有出现(利用事件冒泡向父级添加事件作用于子级)。就是说我不直接操作要作用的对象而是通过“中介”来操作。
事件代理

document.addEventListener("click", function(e) {
  // e.target   do something...
});

认识 defineProperty

在 ES6 还没有增加 proxy 特性时，我们可以使用defineProperty来劫持数据达到代理的效果。
Object.defineProperty(obj, prop, descriptor)

参数分别为 obj：要在其上定义属性的对象、prop：要定义或修改的属性的名称、
descriptor：将被定义或修改的属性描述符。返回传递给函数的对象。

descriptor描述符又分为数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。存取描述符是由 getter-setter 函数对描述的属性。
数据描述符和存取描述符同时具有的可选键值：
configurable：configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
enumerable：enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。
数据描述符具有的可选键值
value:该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
writable:当且仅当该属性的 writable 为 true 时，value 才能被赋值运算符改变。默认为 false。

存取描述符具有的可选键值
get:一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入 this 对象（由于继承关系，这里的 this 并不一定是定义该属性的对象）。默认为 undefined。
set:一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受一个参数，即该属性新的参数值。
默认为 undefined。

var data = {
  name: "lisi"
};
Object.defineProperty(data, "name", {
  get: function() {
    console.log("get");
  },
  set: function() {
    console.log("咦~有变化");
  }
});

data.name; //控制台会打印出 “get”
data.name = "zhangsan"; // 咦~有变化

上例代码我们给 defineProperty 传入了 data 对象，想监听键值为 name 的属性。当我们进行data.name取值操作时，触发get方法；当我们进行data.name = "zhangsan"修改操作时，触发set方法。

第二个参数（prop：要定义或修改的属性的名称），让人定向以为就是我们要改的对象属性————我们在 set 中对它修改直接修改了 name。然而接下来我们看下面的例子：

var data = {
  name: "lisi",
  age: 23
};
Object.defineProperty(data, "name", {
  get: function() {
    console.log("get");
  },
  set: function() {
    console.log("咦~有变化");
  }
});

data.name; //控制台会打印出 “get”
data.name = "zhangsan"; // 咦~有变化

console.log(data); // { name: [Getter/Setter], age: 23 }
console.log(data.name); // 触发get()打印'get'，undefined

当我们defineProperty里的第二个参数为name时，最后会发现打印出的 data 中 name 值为[Getter/Setter]，并且取不到 name 值。

“你这没有在 set 里面重新指定值肯定得不到 name 呀”，那么如果我们在 set 里对 data 中的 name 赋值 get 返回会怎样：

Object.defineProperty(data, "name", {
  get: function() {
    return this.name; //Maximum call stack size exceeded
  },
  set: function(val) {
    console.log("监听到数据发生了变化");
    this.name = val;
  }
});
data.name = "zhangsan";

我们使用data.name对 name 进行修改操作时会触发 set 方法，而 set 方法里又对 name 进行了修改…如此周而复始导致溢出。

这时回想一下我们的初衷：使用 defineProperty 代理。代理那就是“草船借箭”，通过“别人”来达到自己的目的。

var data = {
  _name: "xiaoming",
  age: 23
};
Object.defineProperty(data, "name", {
  // 这里注意name
  get: function() {
    return this._name; // 这里注意_name
  },
  set: function(val) {
    console.log("监听到数据发生了变化");
    this._name = val; // 这里注意_name
  }
});

console.log(data); //{ _name: 'xiaoming', age: 23 }

data.name; //控制台会打印出 “get”
data.name = "zhangsan"; // 这里注意name

console.log(data); // { _name: 'zhangsan', age: 23 }
console.log(data.name); // zhangsan

我们将初始化 data 数据中 name 改成了_name，defineProperty 方法中操作和返回_name。这时我们进行data.name操作，将监听到的添加的name值赋值给私有的自定义成员_name。当外部console.log(data.name)访问时，拿到的是 name。
不要被初始 data 对象中的_name 蒙蔽，或许把初始化 data 中的_name 去掉会更好理解。

上述例子_name 前面的下划线是一种常用的记号，用于表示只能通过对象方法访问的属性。而访问器属性 name 则包含一个 getter 函数和一个 setter 函数。getter 函数返回 _name 的值，setter 函数通过计算来确定正确的版本。

详情《JavaScript 高级程序设计》第三版 P141

当然如果我们操作多个键值，如整个 data 对象：

Object.keys(data).forEach(function(key) {
  Object.defineProperty(data, key, {
    get: function() {
      console.log("get");
      return this[key];
    },
    set: function(val) {
      console.log("监听到数据发生了变化");
      this[key] = val;
    }
  });
});

描述符必须是数据和存取这两种形式之一，不能同时是两者(writable\value 与 get\set 不能同时写)。例如：

Object.defineProperty(data, "key", {
  //Invalid property descriptor. Cannot both specify accessors and a value or writable attribute
  writable: false,
  value: "static",
  get: function() {
    console.log("get");
    return this[key];
  },
  set: function(val) {
    console.log("监听到数据发生了变化");
    this[key] = val;
  }
});

下一篇：
JavaScript必备知识点之Object.defineProperty与es6Proxy代理二三事（二）