ES5 Object.defineProperty 方法

先看一個例子:

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
});

下面詳細描述這些參數的意義:

configurable

false(默認)

true
1) 對象的描述能夠修改或者增長, 描述包括 configurable enumerable set get value

2) obj.b 是能夠刪除的, delete(obj.b);

 

下面的例子設置爲 false 之後, 再設置 上面的那些屬性都會報錯。

var o = {}
Object.defineProperty(o, 'b', {
  configurable: false
});
Object.defineProperty(o, 'b', {
  configurable: true
}); // thrown error
Object.defineProperty(o, 'b', {
  enumerable: false
}); // thrown error

 

enumerable

false(默認)
true, 表明是能夠枚舉的

 

value

undefined(默認)
obj 的屬性的值

 

writable
false(默認)
true, 表明這個值能夠修改, 修改值不受 configurable 影響

var o = {}
Object.defineProperty(o, 'b', {
  configurable: false,
  value: 2,
  writable: true
});
o.value = 3333; // 3333

 

set 和 get 方法

對象取值會調用get方法, 取得的值爲 get 函數裏的返回值
對象賦值會調用set方法, 可是若賦值是用 Object.defineProperty 則不會調用set方法

例:
var o = {}
Object.defineProperty(o, 'b', {
  configurable: true,
  get: () => { console.log('get'); return 1},
  set: (para) => { console.log('set' + para); }
});
o.b; // 輸出'get'; 值爲1
o.b = 2; // 輸出'set2'; 值爲2


// 下面的賦值 不會調用 set 方法
Object.defineProperty(o, 'b', {
  value: 22222
}); // o.b = 22222


// 注意下面的寫法則會報錯
Object.defineProperty(obj, 'b', {
    value: 1,
　　get: function() { return 1; }
});

Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute 不能同時設置 存取器(get 和 set方法) 和 (value 或 writable) 屬性, 就算 writable 屬性設置爲 true 也不行

 

 

參考地址:

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