理解javascript对象的数据属性和访问器属性

• 理解javascript对象的数据属性和访问器属性

1.何为属性？

属性就是与对象相关的值，而数据属性和访问器属性，就是属性的属性，用于描述属性的行为特性。

2.数据属性

数据属性（property）用于实现JavaScript引擎，是属性(property)的内部值，它包含一个数据值的位置。有如下4种行为特性。

1. [[Configurable]]：能否被delete删除属性重新定义
2. [[Enumerable]]：能否被for-in枚举
3. [[Writable]]：能否修改属性值
4. [[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个特性：

1. [[Configurable]]：能否被delete删除属性重新定义。默认值：true
2. [[Enumerable]]：能否被for-in枚举。默认值：true
3. [[Get]]：读取属性值。默认值：undefined
4. [[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实现了。