js的面向对象编程之理解对象

1. 理解对象

2. 属性类型

ECMA-262第五版在定义只有内部才用的特性时,描述了属性的各种特征。ECMA-262定义这些特征是为了实现Javascript引擎用的,因此在js中不能直接访问它们。为了表示特性是内部值,该规范把它们放在了两对方括号中,例如[[Enumerable]]

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

2.1 数据属性

数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特性。

  1. [[Configurable]]:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。直接在对象上定义的属性,它们的这个特性的默认值是true
  2. [[Enumerable]]:表示能否通过for-in循环返回属性。直接在对象上定义的属性,它们的这个特性的默认值是true
  3. [[Writable]]:表示能否修改属性的值。直接在对象上定义的属性,它们的这个特性的默认值是true
  4. [[Value]]:包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候,把新值保存在这个位置。默认值是undefined
1
2
3
var person = {
name: "jack"
};

上述代码创建了一个名为name的属性,为它指定的值是”jack”。也就是说[[Value]]特性将被设置为”jack”

要修改属性默认的特性,必须使用ECMAScript5的Object.defineProperty()方法。这个方法接收三个参数:属性所在的对象、属性的名字和一个描述符对象。

1
2
3
4
5
6
7
8
var person = {};
Object.defineProperty(person, "name", {
writable: false,
value: "alice"
});
console.log(person.name);//输出"alice"
person.name = "jack";
console.log(person.name);//输出"alice"

适用于不可配置的属性,注意,一旦把属性定义为不可配置的,就不能再把它便会可配置的了。因此再调用Object.defineProperty()方法修改writable之外的特性,都会导致错误

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var person = {};
Object.defineProperty(person, "name", {
configurable: false,
value: "jack"
});
console.log(person.name);//输出"jack"
delete person.name;
console.log(person.name);//输出"jack"

//报错
Object.defineProperty(person, "name", {
configurable: true,
value: "alice"
});

在调用Object.defineProperty()方法创建一个新的属性时,如果不指定,configurable enumerable writable特性的默认值都是false

1
2
3
var person = {};
Object.defineProperty(person, "name", {});
delete person.name;//输出flase

2.2 访问器属性

访问器属性不包含数据值;它们包含一对儿getter和setter函数。在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值;;在写入访问器属性时,会调用setter函数并传入新值,这个函数负责决定如何处理数据。访问器属性有如下4个特性:

  1. [[Configurable]]:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为数据属性。直接在对象上定义的属性,它们的这个特性的默认值是true
  2. [[Enumerable]]:表示能否通过for-in循环返回属性。直接在对象上定义的属性,它们的这个特性的默认值是true
  3. [[Get]]:在读取属性时调用的函数。默认值是undefined
  4. [[Set]]:在写入属性时调用的函数。默认值是undefined

访问器属性不能直接定义,必须使用Object.defineProperty()来定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

这是使用访问器属性的常见方式,即设置一个属性的值会导致其他属性发生变化。

支持ECMAScript5的这个方法的游览器有IE9+,firefox4+,safari5+,opera12+和chrome。在这个方法之前,要创建访问器属性,一般都是用两个非标准的方法:__defineGetter__()__defineSetter__()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var book = {
_year: 2004,
edition: 1
};
book.__defineGetter__("year", function () {
return this._year;
});
book.__defineSetter__("year", function (newValue) {
if (newValue > 2004) {
this._year = newValue;
this.edition += newValue -2004;
}
});

book.year = 2005;
console.log(book.edition);

2.3 定义多个属性

ECMAScript5定义了一个Object.defineProperties()方法,利用这个方法可以通过描述符一次定义多个属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var book = {};

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;
}
}
}
});

2.4 读取属性的特性

ECMAScript5的Object.getOwnPropertyDescriptor()可以取得给定属性的描述符。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var book = {};
Object.defineProperties(book, {
_year: {
value: 2004
},
edtition: {
value: 1
},
year: {
get: function () {
return this._year;
},
set: function (newValue) {
if (newValue > 2004) {
this._year = newValue;
this.edition += newValue - 2004;
}
}
}
});
var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
console.log(descriptor.value);//2004
console.log(descriptor.configurable);//false
//因为_year这个属性并没有在book中创建,所以默认false