如何理解JS中的数据属性和访问器属性

数据属性

1. 数据属性：数据属性包含一个数据值的位置。在这个位置可以读取和写入值。（JavaScript高级程序设计第三版)
2.数据属性包含的四个特性
configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，默认值：true。
enumerable：表示是否可以通过for-in循环返回属性，默认值：true。
writable：表示能否修改属性的值，默认值：true。
value：包含这个属性的值，默认值：undefined。

ECMAScript5中可以用Object.getOwnPropertyDescriptor()查看属性的特性。该方法接收两个参数：属性所在的对象名称和要读取特性的属性名称。
接下来看个案例：

//创建一个person的对象，给它一个属性name，name的值为Tom，也就是说Value的特性的值设置为Tom
 var person  = {
	name: 'Tom',	
 }
 //
 console.log(Object.getOwnPropertyDescriptor(person, 'name'))

执行结果如下图：
要修该属性默认的特性必须用ECMAScript5中的Object.defineProperty()方法，该方法接收三个参数：属性所在的对象名称、属性名、和一个特性的对象。

看下面的例子

//创建一个空的person的对象
var person  = {}
 //使用Object.defineProperties(添加一个name属性，值为lilei)。
Object.defineProperty(person, 'name', {
	configurable: true,
	enumerable: true,
	writable: true,
	value: 'lilei'
})
console.log(person.name)//'lilei'
person.name = 'hanmeimei'
console.log(person.name)//hanmeimei

上面的例子展示了属性的value特性，下面看看把其他三个特性设置为false会有什么结果

var person  = {}
Object.defineProperty(person, 'name', {
	configurable: false, //是否可以删除属性从而从新定义属性，能否修改属性的特性
	enumerable: false, //是否可以通过for-in循环返回属性
	writable: false, // 是否可以修改属性的值
	value: 'lilei'  //这个属性的值
})
/**
先输出name属性，以下对属性的操作在非严格模式下不会发生什么
在严格模式下就会发生错误
**/
console.log(person.name)//lilei

person.name = 'Tom';//修改属性name的值为Tom
//并没有修改成功，它的name属性是只读的
console.log(person.name)//lilei

delete person.name
//因为configurable特性设置成了false，所以并没有被删除
console.log(person.name)//lilei

一旦把configurable: false属性定义成了不可配置，就不能在把它变回可配置的了。在修改其他特性都会报错。也就是说在调用Object.defineProperty()方法创建一个新的属性的时候，如果不指定，除value之外的其他特性默认值都是false如下图

修改writable和configurable为true，结果为报错
调用Object.defineProperty()方法创建age属性，age属性的特性除value外的其他特性因为没有指定，默认为true

访问器属性

1.访问器属性：这个属性不包含数据值，包含的是一对get和set方法，在读写访问器属性时，就是通过这两个方法来进行处理的。
2.访问器属性的四个特性：
configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为false
enumerable:表示能否通过for-in循环返回属性,默认为false
get：在读取属性时调用的函数,默认值为undefined
set：在写入属性时调用的函数,默认值为undefined

重点：访问器属性不能直接定义，必须使用Object.defineProperty()来定义

访问器属性不能直接定义，必须使用Object.defineProperty()来定义 ，请看下面的例子

//_year前面的下划线是一种常用的记号，用于表示只能通过对象方法访问的属
var book = {
    _year: 2019, 
    num: 1,
};
Object.defineProperty(book,'year',{
    get: function() {
        return this._year;
    },
    set: function(val) {
        if(val !== this._year) {
            this._year = val;
            this.num++;
        }
    }
})
//打印出year的特性
console.log(Object.getOwnPropertyDescriptor(book,'year'))

//打印出get特性获取到的值
console.log(book.year)//2019;
//修改year的值，测试set方法
book.year = 2030;
console.log(book.year)//2030;
console.log(book._year)//2030;
console.log(book.num)//2;

其他两个特性configurable，enumerable，可以参照数据属性。

定义多个属性

由于对象定义多个属性的可能性很多，所以ECMAScript又定义了一个Object.defineProperties()方法,该方法接收两个对象参数，第一个对象是要添加和修改其属性的对象，第二个对象的属性与第一个对象中要添加或修改的属性一一对应。

看下面的代码

var book = {};
Object.defineProperties(book,{
    _year: {
        writable: true,
        value: 2019
    },
    
    num : {
        writable: true,
        value: 1
    },

    year: {
        get: function(){
            return this._year;
        },
        set: function(val) {
            if(val !== this._year){
                this._year = val;
                this.num++;
            }
        } 
    }
})
//修改前
console.log(book.year) //2019
console.log(book.num) //1

//修改后
book.year = 2017;
console.log(book.year) //2017;
console.log(book.num) //2; 

支持Object.defineProperties()方法的浏览器有 IE9+、Firefox4+、Safari5+、Opera12+、和Chrome