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代理二三事（二）