Object.defineProperty剖析

object.defineProperty是Vue实现数据绑定的核心原理。

语法

Object.defineProperty(obj,prop,descriptor)

参数

[obj]The object on which to define the property.

[prop]The name of the property to be defined or modified.

[descriptor]The descriptor for the property being defined or modified.

返回的value

传给该方法的obj对象

接下来讨论descriptor（描述符）

A data descriptor is a property that has a value, which may or may not be writable.An accessor descriptor is a property described by a getter-setter pair of functions.A descriptor must be one of these two flavors; it cannot be both.

数据属性描述符和访问器属性描述符。当以下属性都没有时（value | writable | get | set），默认为data descriptor。都有则报错。

共有属性
configurable（可配置）
if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.（为false即不可配置non-configurable，再也无法改变属性 (除了value和writable)除非要赋予的值是相同的）Defaults to false

enumerable（可枚举）
if and only if this property shows up during enumeration of the properties on the corresponding object.（是否在循环中可以访问到，属性可用propertyIsEnumerable查看） Defaults to false

data descriptor独有属性
value（值）
The value associated with the property. Can be any valid JavaScript value (number, object, function, etc).（值）Defaults to undefined

writable（可修改）
if and only if the value associated with the property may be changed with an assignment operator.(严格模式下会抛异常，及时赋值是同个)Defaults to false

// using __proto__
var obj = {};
var descriptor = Object.create(null); // no inherited properties
// not enumerable, not configurable, not writable as defaults
descriptor.value = 'static';
Object.defineProperty(obj, 'key', descriptor);

// being explicit
Object.defineProperty(obj, 'key', {
  enumerable: false,
  configurable: false,
  writable: false,
  value: 'static'
});
// if freeze is available, prevents adding or
// removing the object prototype properties
// (value, get, set, enumerable, writable, configurable)  
(Object.freeze || Object)(Object.prototype); //防止篡改obj原型

accessor descriptor独有属性
get
A function which serves as a getter for the property, or undefined if there is no getter. When the property is accessed, this function is called without arguments and withthisset to the object through which the property is accessed (this may not be the object on which the property is defined due to inheritance). The return value will be used as the value of the property.Defaults to undefined

set
A function which serves as a setter for the property, or undefined if there is no setter. When the property is assigned to, this function is called with one argument (the value being assigned to the property) and withthisset to the object through which the property is assigned.Defaults to undefined

// Example of an object property added
// with defineProperty with an accessor property descriptor
var bValue = 38;
Object.defineProperty(o, 'b', {
  // Using shorthand method names (ES2015 feature).
  // This is equivalent to:
  // get: function() { return bValue; },
  // set: function(newValue) { bValue = newValue; },
  get() { return bValue; },
  set(newValue) { bValue = newValue; },
  enumerable: true,
  configurable: true
});
o.b; // 38
// 'b' property exists in the o object and its value is 38
// The value of o.b is now always identical to bValue,
// unless o.b is redefined

---

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty