理解javascript对象的数据属性和访问器属性
1.何为属性?
属性就是与对象相关的值,而数据属性和访问器属性,就是属性的属性,用于描述属性的行为特性。
2.数据属性
数据属性(property)用于实现JavaScript引擎,是属性(property)的内部值,它包含一个数据值的位置。有如下4种行为特性。
- [[Configurable]]:能否被delete删除属性重新定义
- [[Enumerable]]:能否被for-in枚举
- [[Writable]]:能否修改属性值
- [[Value]]:数据的数据值
// 一个名叫奥巴马的狗狗
var dog = {
name: 'Obama'
}
此处有一个名为name的属性,其值是‘Obama’,即[[Value]]的值就是‘Obama’,任何修改name属性的操作,都能在[[value]]上显示出来。
通过Object.getOwnPropertyDescriptor()方法,我们可以查看属性name的默认数据属性。
Object.getOwnPropertyDescriptor(dog, 'name')
那么,如何修改默认属性的值呢?
使用Object.defineProperty()可以修改默认属性。包含三个参数:属性所在对象,属性名称,描述符对象。
// 将狗狗的名字改成川普
Object.defineProperty(dog, 'name', {
writable: false,
value: 'Trump'
})
由于修改了默认属性name的描述符对象writable的值为false,故无法修改属性值。其他描述符类似。
2.访问器属性
访问器属性主要由setter和getter函数组成,包含如下4个特性:
- [[Configurable]]:能否被delete删除属性重新定义。默认值:true
- [[Enumerable]]:能否被for-in枚举。默认值:true
- [[Get]]:读取属性值。默认值:undefined
- [[Set]]:写入属性值。默认值:undefined
详解如下:
var dog = {
_age: 2,
weight: 10
}
Object.defineProperty(dog, 'age', {
get: function () {
return this._age
},
set: function (newVal) {
this._age = newVal
this.weight += 1
}
})
_age属性前面的下划线是一种常用的记号,是一种只能通过对象方法访问的属性。
小结:
1.Object.defineProperty()方法可以为全局对象定义属性,该全局对象的所有实例,都可使用该属性,是不是很方便!
2.set方法可以监听对象属性值得变化,如此,双向数据绑定就能够使用js实现了。