【JavaScript】对象基础

[swiftwind0405]

JavaScript 对象的属性类型

在 JavaScript 中有两种属性类型，分别是数据属性和访问器属性。

数据属性

数据属性包含一个数据值的位置。在这个位置可以读取和写入值。其包含四个特性:

• [[Configurable]]:表示能否通过 delete 操作符删除对象中的属性，能否修改属性的特性，能否把属性修改为访问器特性，默认为 true
• [[Enumberable]]:表示是否可以通过 for-in 循环返回属性。默认为 true
• [[Writable]]:表示是否可以修改属性的值，默认为 true
• [[value]]:表示该属性的值，读取的时候从这里读取，修改的时候保存在这里，默认为 undefined

在这里需要注意到一个地方，如果想要修改属性的默认特性，必须要通过 Object.defineProperty() 方法进行修改，比如: Object.defineProperty(person,"name",{writable:false}) 将 person 中的 name 属性修改为不可改变值。按照道理来说，这四个属性的特性是可以随意修改的，那么重点来了，当把 Configurable 属性修改为 false 之后，无论修改四个属性中任何一个，都会报错。

访问器属性

访问器属性不包含数据值，他包含一对 getter 和 setter 函数(个人认为这两个函数是 Vue 等 MVVM 框架的双向数据绑定原理核心所在，虽然这两个属性在访问器属性中并不是必须的)。在读取访问器属性的时候，会调用 getter 函数，在写入访问器属性的时候，会调用 setter 函数。访问器属性具有以下四个特性:

• [[Configurable]]: 表示能否通过 delete 操作符删除对象中的属性，能否修改属性的特性，能否把属性修改为访问器特性，默认为 true
• [[Enumberable]]: 表示是否可以通过 for-in 循环返回属性。默认为 true
• [[get]]: 在读取属性的时候调用，默认为 undefined
• [[set]]: 在写入属性的时候调用，默认为 undefined

这里也是有一个地方需要注意的，访问器属性是不能直接进行定义的，只能通过 Object.defineProperty() 方法进行定义，在这里引用红宝书上的一个例子来进行说明:

let book = {
	_year:2004,
	edition:1
};
Object.defineProperty(book,"year",{
	get:function(){
		return this._year;
	},
	// set的默认参数是新值
	set:function(newValue){
		if(newValue > 2004){
			this._year = newValue;
			this.eidition += newValue -2004;
		}
	}
});
book.year = 2005;
console.log(book.edition); //2

这里指定了一个访问器属性 year，因为对 year 属性进行修改会触发 setter 函数，所以 edition 会变成 2。
当然，不一定需要同时具备 getter 和 setter 函数，只有 getter 表示只能读不能写，反之只能写不能读。

定义多个属性

在 ES5 中有一个方法可以同时定义很多个属性，这个方法是 Object.defineProperties()，这个方法的参数有两个，第一个参数是要添加和修改其对象的属性，第二个参数是对象的属性与第一个对象中要添加获修改的属性。

读取属性的特性

在 ES5 中可以使用 Object.getOwnPropertyDescription() 方法取得给定属性的描述符，参数为:属性所在的对象和要读取其描述符的属性的名称。

参考资料

• 红宝书