## 對(duì)象概述
面向?qū)ο螅∣bject-Oriented,OO)的語(yǔ)言有一個(gè)標(biāo)志,那就是它們都有類的概念,而通過類可以創(chuàng)建任意多個(gè)具有相同屬性和方法的對(duì)象。但是,ECMAScript中并沒有類的概念,所以它的對(duì)象也有有所不同。
ECMAScript對(duì)象是一個(gè)無序?qū)傩缘募?,其屬性可以包含基本值、?duì)象或函數(shù)。
對(duì)象的每個(gè)屬性或方法都有一個(gè)名字,而每個(gè)名字都映射到一個(gè)值。
每個(gè)對(duì)象都是基于一個(gè)引用類型創(chuàng)建的。
**1、對(duì)象**
**1.1 創(chuàng)建對(duì)象**
(1)創(chuàng)建自定義對(duì)象的最簡(jiǎn)單方式就是創(chuàng)建一個(gè)Object的實(shí)例,然后給其添加屬性和方法:
```
var person = new Object();
person.name = 'tg';
person.age = 10;
person.say = function(){
console.log(this.name);
}
```
上面的例子創(chuàng)建了一個(gè)名為person的對(duì)象,并為它添加了兩個(gè)屬性(name、age)和一個(gè)方法(say())。
(2)對(duì)象字面量
```
var person = {
name: 'tg',
age: 10,
say: function(){
console.log(this.name);
}
}
```
這個(gè)person對(duì)象和上面例子是等價(jià)的。
**1.2 屬性類型**
ECMA-262第5版在定義只有內(nèi)部才用的特性(attribute)時(shí),描述了屬性(property)的各種特征。ECMA-262定義這些特性是為了實(shí)現(xiàn)JavaScript引擎用的,因此在JavaScript中不能直接訪問它們。該規(guī)范將它們放在了兩對(duì)方括號(hào)中,表示特性是內(nèi)部值,如[[Enumerable]]。
ECMAScript中有兩種屬性:數(shù)據(jù)屬性和訪問權(quán)屬性
**1.2.1 數(shù)據(jù)屬性**
數(shù)據(jù)屬性包含一個(gè)數(shù)據(jù)值的位置,在這個(gè)位置可以讀取和寫入值。
數(shù)據(jù)屬性有4個(gè)描述特性:
- [[Configurable]]:表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或者能否把屬性修改為訪問器屬性。比如直接在對(duì)象上定義的屬性,它們的這個(gè)特性默認(rèn)值為true。
- [[Enumerable]]:表示能否通過for-in循環(huán)返回屬性。對(duì)于直接在對(duì)象上定義的值,默認(rèn)為true。
- [[Writable]]:表示能否修改屬性的值。
- [[Value]]: 包含這個(gè)屬性的數(shù)據(jù)值。讀取屬性值時(shí),從這個(gè)位置讀;寫入屬性值時(shí),把新值保存在這個(gè)位置。默認(rèn)值為undefined。
要修改屬性默認(rèn)的特性,必須使用ECMAScript 5的`Object.defineProperty()`方法,這個(gè)方法接收三個(gè)參數(shù):屬性所在的對(duì)象、屬性的名字和一個(gè)描述符對(duì)象。其中,描述符對(duì)象的屬性必須是:configurable、enumerable、writable和value。
```
var person = {};
Object.defineProperty(person, 'name', {
writable: false,
value: 'tg'
});
console.log(person.name); // "tg"
person.name = 'tg2';
console.log(person.name); // "tg"
```
在上面的例子中,我們將person對(duì)象中的名為name的屬性的`writable`設(shè)置為false,也就是不可修改,所以即使后面執(zhí)行了person.name='tg2',最后person對(duì)象的name值依舊是原始值。
注意:在嚴(yán)格模式下,如果對(duì)一個(gè)不可修改的屬性執(zhí)行賦值操作,會(huì)拋出錯(cuò)誤;非嚴(yán)格模式下則忽略賦值操作。
一旦將configurable特性設(shè)置為false后,就不能再把它變回可配置的了,如果再修改除writable之外的特性,都會(huì)導(dǎo)致錯(cuò)誤。
**1.2.2 訪問器屬性**
訪問器屬性不包含數(shù)據(jù)值,它們包含一對(duì)getter和setter函數(shù)(非必需)。在讀取訪問器屬性時(shí),會(huì)調(diào)用getter函數(shù),返回有效的值;在寫入訪問器屬性時(shí),會(huì)調(diào)用setter函數(shù)并傳入新值,它負(fù)責(zé)決定如何處理數(shù)據(jù)。
訪問器屬性:
- [[Configurable]]:表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或者能否把屬性修改為訪問器屬性。比如直接在對(duì)象上定義的屬性,它們的這個(gè)特性默認(rèn)值為true。
- [[Enumerable]]:表示能否通過for-in循環(huán)返回屬性。對(duì)于直接在對(duì)象上定義的值,默認(rèn)為true。
- [[Get]]:在讀取屬性時(shí)調(diào)用的函數(shù),默認(rèn)為undefined
- [[Set]]:在寫入屬性時(shí)調(diào)用的函數(shù),默認(rèn)為undefined
訪問器屬性不能直接定義,也是要使用`Object.defineProperty()`方法來定義。
```
var person = {
_age: 20,
intro: ''
};
Object.defineProperty(person, 'age', {
get: function() {
return this._age;
},
set: function(newValue){
if(newValue < 18) {
this.intro = '裝嫩';
this._age = newValue;
}
}
});
console.log(person.age); // 20
person.age = 17;
console.log(person.intro); // "裝嫩"
```
在上面的例子中,訪問器屬性age有一個(gè)getter函數(shù)和一個(gè)setter函數(shù)。getter函數(shù)返回`_age`的值,setter函數(shù)通過判斷`age`的設(shè)置值來改變其他屬性值。
**1.2.3 定義多個(gè)屬性**
ECMAScript 5提供的`Object.defineProperties()`方法可以通過描述符一次定義多個(gè)屬性,這個(gè)方法接收兩個(gè)對(duì)象參數(shù),第一個(gè)對(duì)象是要添加和修改其屬性的對(duì)象,第二個(gè)對(duì)象的屬性與第一個(gè)對(duì)象要添加或修改的屬性一一對(duì)應(yīng)。
```
var person = {};
Object.defineProperties(person, {
_age: {
value: 20
},
intro: {
value: ''
},
age: {
get: function(){
return this._age;
},
set: function(newValue){
if(newValue < 18) {
this.intro = '裝嫩';
this._age = newValue;
}
}
}
});
```
**1.2.4 讀取屬性的特性**
ECMAScript 5提供的`Object.getOwnPropertyDescriptor()`方法可以取得給定屬性的描述符,它接受兩個(gè)參數(shù):屬性所在的對(duì)象和要讀取其描述符的屬性名稱,返回來的是一個(gè)對(duì)象,如果是訪問器屬性,這個(gè)對(duì)象的屬性有configurable、enumerable、get和set;如果是數(shù)據(jù)屬性,這個(gè)對(duì)象的屬性有configurable、enumerable、writable和value。
```
var person = {
_age: 20,
intro: ''
};
Object.defineProperty(person, 'age', {
get: function() {
return this._age;
},
set: function(newValue){
if(newValue < 18) {
this.intro = '裝嫩';
this._age = newValue;
}
}
});
var descriptor = Object.getOwnPropertyDescriptor(person,'age');
console.log(descriptor.enumerable); // false
console.log(typeof descriptor.get); // "function"
```
在JavaScript中,可以針對(duì)任何對(duì)象--包括DOM和BOM對(duì)象,使用`Object.getOwnPropertyDescriptor()`方法。
- 前言
- JavaScript簡(jiǎn)介
- 基本概念
- 語(yǔ)法
- 數(shù)據(jù)類型
- 運(yùn)算符
- 表達(dá)式
- 語(yǔ)句
- 對(duì)象
- 數(shù)組
- 函數(shù)
- 引用類型(對(duì)象)
- Object對(duì)象
- Array對(duì)象
- Date對(duì)象
- RegExp對(duì)象
- 基本包裝類型(Boolean、Number、String)
- 單體內(nèi)置對(duì)象(Global、Math)
- console對(duì)象
- DOM
- DOM-屬性和CSS
- BOM
- Event 事件
- 正則表達(dá)式
- JSON
- AJAX
- 表單和富文本編輯器
- 表單
- 富文本編輯器
- canvas
- 離線應(yīng)用
- 客戶端存儲(chǔ)(Cookie、Storage、IndexedDB)
- HTML5 API
- Video/Audio
- Geolocation API
- requestAnimationFrame
- File API
- FullScreen API
- IndexedDB
- 檢測(cè)設(shè)備方向
- Blob
- vibrate
- Luminosity API
- WebRTC
- Page Visibility API
- Performance API
- Web Speech
- Notification
- 面向?qū)ο蟮某绦蛟O(shè)計(jì)
- 概述
- this關(guān)鍵字
- 原型鏈
- 作用域
- 常用API合集
- SVG
- 錯(cuò)誤處理機(jī)制
- JavaScript開發(fā)技巧合集
- 編程風(fēng)格
- 垃圾回收機(jī)制
