Object.defineProperty 速记

描述

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

语法

1
Object.defineProperty(object, propertyname, descriptor)
  • object 必需。 要在其上添加或修改属性的对象。 这可能是一个本机 JavaScript对象(即用户定义的对象或内置对象)或 DOM 对象。
  • propertyname 必需。 一个包含属性名称的字符串。
  • descriptor 必需。 属性描述符。 它可以针对数据属性或访问器属性。

descript 参数

其中descript参数可以有很多属性:

  • value 属性的值,默认为 undefined。
  • writable 是否可写,如果是 false 则该属性的所有改写操作都不会生效,但也不报错,直接在对象上定义的属性,默认 true
  • configurable 是否可以删除目标属性或修改以下特性(writable, configurable, enumerable),直接在对象上定义的属性,默认为 true
  • enumerable 是否可以在for-in循环中遍历出来或在Object.keys中列举出来,直接在对象上定义的属性,默认 true
  • get 一旦目标对象访问该属性,就会调用这个方法,并返回结果。默认为 undefined。
  • set 一旦目标对象设置该属性,就会调用这个方法。默认为 undefined。

注意
在调用Object.defineProperty()方法时,如果不指定, configurable, enumerable, writable特性的默认值都是false,这跟之前所 说的对于像前面例子中直接在对象上定义的属性,这个特性默认值为为 true。并不冲突,如下代码所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//直接在对象航定义的属性
var someOne = { };
someOne.name = 'coverguo';
console.log(Object.getOwnPropertyDescriptor(someOne, 'name'));
//输出 Object {value: "coverguo", writable: true, enumerable: true, configurable: true}


// 使用 Object.defineProperty() 定义的属性
var otherOne = {};
Object.defineProperty(otherOne, "name", {
value:"coverguo"
});
console.log(Object.getOwnPropertyDescriptor(otherOne, 'name'));
//输出 Object {value: "coverguo", writable: false, enumerable: false, configurable: false}

数据监听

使用 set 和 get 可以很方便的实现数据监听

1
2
3
4
5
6
7
8
9
10
11
var cheri={sex:'man', age:'18'}
Object.defineProperty(cheri, 'age',{
get:function(){
console.log('get:',age)
return age
},
set:function(val){
age = val
console.log('set:',age)
}
})

这也是 vue 等框架双向绑定的基础。