JavaScript学习——面向对象的程序设计（一）

JavaScript——理解对象

面向对象（Object-Oriented,OO）

ECMAScript中没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。

ECMA-262把对象定义为：无序属性的集合，其属性可以包含基本值、对象或者函数。（想象成散列表：一组名值对，其中值可以是数据或函数。）

每个对象都是基于一个引用类型创建的。

eg:

var box = {
	name : "chenxiaoming",
	age : 18,
	job : "Web-dev"
	}

对象属性在创建时都会带有一些特征值（characteristic），JavaScript通过这些特征值来定义它们的行为。

理解对象

1.属性类型

ECMAScript中有两种属性：数据属性和访问器属性

a.数据属性

数据属性包含一个数据值的位置。数据属性有4个描述其行为的特性。

[[Configurable]]:表示能否通过delete删除属性从而重新定义属性。默认为true。

[[Enumerable]]:表示能否通过for-in循环返回属性。默认为true。

[[Writable]]:表示能否修改属性的值。默认为true。

[[Value]]:包含这个属性的数据值。默认为undefined.

要修改属性默认的特性，必须使用ECMAScript5的Object.defineProperty()方法。这个方法接受三个参数：属性所在的对象、属性的名字和一个描述符对象（descriptor）。描述符对象的属性为configurable、enumerable、writable、value。设置其中的一个或多个值，可以修改对应的特性值。

eg:

var box = {};
Object.defineProperty(box,"name",{
			writable : false,
			value : "chenxiaoming"
		});
console.log(box.name);		//chenxiaoming
person.name = "Greg";
console.log(box.name);		//chenxiaoming

注意严格模式和非严格模式下，属性值设置不同所产生的不同错误。

b.访问器属性

在读取访问器属性时，会调用getter函数，这个函数负责返回有效的值。

在写入访问器属性时，会调用setter函数并传入新值，这个函数负责决定如何处理数据。

访问器属性有：

[[Configurable]]:表示能否通过delete删除属性从而重新定义属性。默认为true。

[[Enumerable]]:表示能否通过for-in循环返回属性。默认为true。

[[Get]]:在读取属性时调用的函数。默认值为undefined。

[[Set]]:在写入属性时调用的函数。默认值为undefined。

eg:

var book = {
			_year : 2004,
			edition : 1
		}
Object.defineProperty(book, "year", {
			get : function(){
				return this._year;
			},
			set : function(newValue){
				if(newValue > 2004){
					this._year = newValue;
					this.edition += newValue - 2004; 
				}
			}
		});
book.year = 2005;				

console.log(book.edition);	//2

_year前面的下划线是一种常用的几号，用于表示只能通过对象访问的属性。

设置一个属性的值会导致其他属性发生变化。
非严格模式下，不一定非要同时指定getter和setter。

严格模式下，尝试写入只指定了getter函数的属性会抛出错误。类似的，只指定setter函数的属性也不能读，否则在非严格模式下会返回undefined。

在不支持Object.defineProperty()方法的浏览器中不能修改[[Configurable]]和[[Enumerable]]。

2.定义多个属性

Object.defineProperties()，利用这个方法可以通过描述符一次定义多个属性。这个方法接收两个参数：第一个对象是要添加和修改其属性的对象那个，第二个对象的属性与第一个对象中要添加或修改的属性一一对应。

eg:

var box = {};
Object.defineProperties(book, {
			_year : {
				writable : true,
				value : 2004
			},
			edition : {
				writable : true,
				value : 1
			},
			year : {
				get : function(){
					return this._year;
				},
				set : function(newValue){
					if(newValue > 2004){
						this._year = newValue;
						this.edition += newValue-2004;
					}
				}
			}
		});

这种方法定义属性与Object.defineProperty()唯一的区别是这里的属性都是在同一时间创建的。

3.读取属性的特性

使用ECMAScript5的Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述符。这个方法接收两个参数：属性所在的对象和要读取其描述符的属性名称。返回值是一个对象。

eg:

var book = {
			_year : 2004,
			edition : 1
		}
		Object.defineProperty(book, "year", {
			get : function(){
				return this._year;
			},
			set : function(newValue){
				if(newValue > 2004){
					this._year = newValue;
					this.edition += newValue - 2004; 
				}
			}
		});

book.year = 2005;				
console.log(book.edition);	//2
var descriptior = Object.getOwnPropertyDescriptor(book,"_year");
console.log(descriptior.value);
console.log(descriptior.configurable);		//true
console.log(descriptior.enumerable);		//true
console.log(descriptior.writable);			//true
console.log(typeof descriptior.get);		//undefined

---

以上笔记整理自《JavaScript权威指南》/《JavaScript高级程序设计（第3版）》，用做个人学习分享。