JavaScript 中 Object.defineProperty 的使用

Object.defineProperty

The Object.defineProperty() method defines a new property directly on an object, or modifies an existing property on an object, and returns the object.

直接在一個對象上定義一個新的屬性，或修改一個已經存在的屬性。這個方法會返回該對象。

語法

Object.defineProperty(obj, prop, descriptor)

參數

• Object obj 目標對象

• String prop 須要定義的屬性

• Object descriptor 該屬性擁有的特性，可設置的值有：

  • value 屬性的值，默認爲 undefined。

  • writable 該屬性是否可寫，若是設置成 false，則任何對該屬性改寫的操做都無效（但不會報錯），默認爲 false。

  • get 一旦目標對象訪問該屬性，就會調用這個方法，並返回結果。默認爲 undefined。

  • set 一旦目標對象設置該屬性，就會調用這個方法。默認爲 undeinfed。

  • configurable 若是爲false，則任未嘗試刪除目標屬性或修改屬性如下特性（writable, configurable, enumerable）的行爲將被無效化，默認爲 false。

  • enumerable 是否能在for...in循環中遍歷出來或在Object.keys中列舉出來。默認爲 false。

注意

在 descriptor 中不能同時設置訪問器 (get 和 set) 和 wriable 或 value，不然會報如下錯誤：

Invalid property.  A property cannot both have accessors and be writable or have a value

實際應用

咱們知道，在 Express.js 升級到 4.0 以後，它把不少功能從核心庫中移除了。當咱們訪問那些被移除的屬性時，它會報錯，告訴咱們該屬性已經被移除了。這個功能就是經過 Object.defineProperty 來實現的。看看源碼吧：

[
  'json',
  'urlencoded',
  'bodyParser',
  'compress',
  'cookieSession',
  'session',
  'logger',
  'cookieParser',
  'favicon',
  'responseTime',
  'errorHandler',
  'timeout',
  'methodOverride',
  'vhost',
  'csrf',
  'directory',
  'limit',
  'multipart',
  'staticCache',
].forEach(function (name) {
  Object.defineProperty(exports, name, {
    get: function () {
      throw new Error('Most middleware (like ' + name + ') is no longer bundled with Express and must be installed separately. Please see https://github.com/senchalabs/connect#middleware.');
    },
    configurable: true
  });
});

Object.defineProperties

The Object.defineProperties() method defines new or modifies existing properties directly on an object, returning the object.

和 Object.defineProperty 相似，只不過這個方法能夠設置多個屬性。

語法

Object.defineProperties(obj, props)

參數

• Object obj 目標對象

• Object props 要爲目標對象添加的屬性，其中 key 和 value 分別表明 Object.defineProperty 中的第二和第三個參數。

出處

https://scarletsky.github.io/2015/08/18/Object-learning-in-javascript/

參考資料

http://www.cnblogs.com/rubylouvre/archive/2010/09/19/1831128.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
https://github.com/strongloop/express/blob/master/lib/express.js