预览
<div id="a"></div>
var obj={};
var box=document.querySelector("#a");
Object.defineProperty(obj,"myname",{
get(){
console.log("get");
return box.innerHTML;
},
set(value){
console.log("set");
box.innerHTML=value;
}
})
知识储备
1.有两种类型的对象属性。
第一种是 数据属性。我们已经知道如何使用它们了。到目前为止,我们使用过的所有属性都是数据属性。
第二种类型的属性是新东西。它是 访问器属性(accessor properties)。它们本质上是用于获取和设置值的函数,但从外部代码来看就像常规属性。
一个属性要么是访问器(具有 get/set
方法),要么是数据属性(具有 value
),但不能两者都是。
2.访问器属性由 “getter” 和 “setter” 方法表示。在对象字面量中,它们用 get
和 set
表示:
let obj = {
get propName() {
// 当读取 obj.propName 时,getter 起作用
},
set propName(value) {
// 当执行 obj.propName = value 操作时,setter 起作用
}
}
当读取 obj.propName
时,getter 起作用,当 obj.propName
被赋值时,setter 起作用。
3.访问器属性的描述符与数据属性的不同。
对于访问器属性,没有 value
和 writable
,但是有 get
和 set
函数。具体区别如下表:
configurable |
enumerable |
value |
writable |
get |
set |
|
---|---|---|---|---|---|---|
数据属性描述符 | 可以 | 可以 | 可以 | 可以 | 不可以 | 不可以 |
访问器属性描述符 | 可以 | 可以 | 不可以 | 不可以 | 可以 | 可以 |
4.描述符默认值汇总
- 拥有布尔值的键
configurable
、enumerable
和writable
的默认值都是false
。 - 属性值和函数的键
value
、get
和set
字段的默认值为undefined
。
5.Object.defineProperty()
详细用法