Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

1.语法

Object.defineProperty(obj, prop, descriptor)

参数

obj
要定义属性的对象。
prop
要定义或修改的属性的名称或 Symbol 。
descriptor
要定义或修改的属性描述符。

2. 属性描述符

默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。

  属性描述符：
    数据描述符：
        configurable  是否可以重新定义  默认false
        enumerable 是否可以枚举  默认false
        value 初始值  默认为undefined 
        writable  是否可以修改  默认false
    存取描述符：
      get 回调函数  动态计算得到当前属性值
      set 回调函数  监视当前属性值的变化

3. 使用

（1）get set

var o = {}; // 创建一个新对象

// 在对象中添加一个设置了存取描述符属性的示例
var bValue = 38;
Object.defineProperty(o, "b", {
  get() { return bValue; },
  set(newValue) { bValue = newValue; },
});

console.log(o.b); // 38
o.b = '1';
console.log(o.b); // 1

// 对象 o 拥有了属性 b，值为 38
// 现在，除非重新定义 o.b，o.b 的值总是与 bValue 相同

（2） Writable 是否可以修改
试图写入非可写属性不会改变它，也不会引发错误。

var o = {}; // 创建一个新对象

Object.defineProperty(o, 'a', {
  value: 37,
  writable: false
});

console.log(o.a); // 37
o.a = 25;
console.log(o.a); // 37


// strict mode
(function() {
  'use strict';
  var o = {};
  Object.defineProperty(o, 'b', {
    value: 2,
    writable: false
  });
  // o.b = 3; // throws TypeError: "b" is read-only
  console.log(o.b) // 2
})();

（3）Enumerable 是否可枚举

var o = {};
Object.defineProperty(o, "a", { value : 1, enumerable: true });
Object.defineProperty(o, "b", { value : 2, enumerable: false });
Object.defineProperty(o, "c", { value : 3 }); // enumerable 默认为 false
o.d = 4; // 如果使用直接赋值的方式创建对象的属性，则 enumerable 为 true

for (var i in o) {
  console.log(i);
}
// logs 'a' and 'd' (in undefined order)

Object.keys(o); // ['a', 'd']

o.propertyIsEnumerable('a'); // true
o.propertyIsEnumerable('b'); // false
o.propertyIsEnumerable('c'); // false
o.propertyIsEnumerable('d'); // true


var p = { ...o };
console.log(p); //{ a: 1, d: 4 }

（4） Configurable 是否可以重新定义

var o = {};
Object.defineProperty(o, 'a', {
  get() { return 1; },
  configurable: false
});

Object.defineProperty(o, 'a', {
  configurable: true
}); // throws a TypeError
Object.defineProperty(o, 'a', {
  enumerable: true
}); // throws a TypeError
Object.defineProperty(o, 'a', {
  set() {}
}); // throws a TypeError (set was undefined previously)
Object.defineProperty(o, 'a', {
  get() { return 1; }
}); // throws a TypeError
// (even though the new get does exactly the same thing)
Object.defineProperty(o, 'a', {
  value: 12
}); // throws a TypeError // ('value' can be changed when 'configurable' is false but not in this case due to 'get' accessor)

console.log(o.a); // logs 1
delete o.a; // Nothing happens
console.log(o.a); // logs 1

4. 点运算符和 Object.defineProperty()区别

点运算符 默认都为true
Object.defineProperty() 默认都为false

var o = {};

o.a = 1;
// 等同于：
Object.defineProperty(o, "a", {
  value: 1,
  writable: true,
  configurable: true,
  enumerable: true
});


// 另一方面，
Object.defineProperty(o, "a", { value : 1 });
// 等同于：
Object.defineProperty(o, "a", {
  value: 1,
  writable: false,
  configurable: false,
  enumerable: false
});

5. get set

function Archiver() {
  var temperature = null;
  var archive = [];

  Object.defineProperty(this, 'temperature', {
    get: function() {
      console.log('get!');
      return temperature;
    },
    set: function(value) { // value 代表最新temperature值
      temperature = value;
      archive.push({ val: temperature });
    }
  });
  this.getArchive = function() { return archive; };
}

var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]

function TestDefineSetAndGet() {
  Object.defineProperty(this, 'myproperty', {
    get: function () {
      return 'I alway return this string,whatever you have assigned';
    },
    set: function () {
      this.myname = 'this is my name string';
    }
  });
}

var instance = new TestDefineSetAndGet();
instance.myproperty = 'test';

// 'I alway return this string,whatever you have assigned'
console.log(instance.myproperty);
// 'this is my name string'
console.log(instance.myname);