Object.defineProperty 方法

Posted 2020-09-10 Hello World

先看一个例子:

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