ECMAScript 中沒有類的概念,因此它的對象也與基于類的語言中的對象有所不同。
- 創建自定義對象的最簡單方式就是創建一個Object 的實例,然后再為它添加屬性和方法
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function(){
alert(this.name);
};
- 對象字面量成為創建這種對象的首選模式
var person = {
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName: function(){
alert(this.name);
}
};
屬性類型
- ECMAScript 中有兩種屬性:數據屬性和訪問器屬性。
1、數據屬性
數據屬性包含一個數據值的位置。在這個位置可以讀取和寫入值。數據屬性有4個描述其行為的特性。
- [[Configurable]]:表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特
性,或者能否把屬性修改為訪問器屬性。直接在對象上定義的屬性,它們的這個特性默認值為true。 - [Enumerable]]:表示能否通過for-in 循環返回屬性。直接在對象上定義的屬性,它們的
這個特性默認值為true。 - [[Writable]]:表示能否修改屬性的值。直接在對象上定義的屬性,它們的這個特性默認值為true。
- [[Value]]:包含這個屬性的數據值。讀取屬性值的時候,從這個位置讀;寫入屬性值的時候,把新值保存在這個位置。這個特性的默認值為undefined。
- 要修改屬性默認的特性,必須使用ECMAScript 5的Object.defineProperty()方法。這個方法接收三個參數:屬性所在的對象、屬性的名字和一個描述符對象。其中,描述符(descriptor)對象的屬性必須是:configurable、enumerable、writable 和value。設置其中的一或多個值,可以修改對應的特性值。
var person = {};
Object.defineProperty(person, "name", {
writable: false,
value: "Nicholas"
});
alert(person.name); //"Nicholas"
person.name = "Greg";
alert(person.name); //"Nicholas"
var person = {};
Object.defineProperty(person, "name", {
configurable: false,
value: "Nicholas"
});
alert(person.name); //"Nicholas"
delete person.name;
alert(person.name); //"Nicholas"
//把configurable 設置為false,表示不能從對象中刪除屬性。如果對這個屬性調用delete,則在非嚴格模式下什么也不會發生,而在嚴格模式下會導致錯誤。
- 一旦把屬性定義為不可配置的,就不能再把它變回可配置了。此時,再調用Object.defineProperty()方法修改除writable 之外的特性,都會導致錯誤
var person = {};
Object.defineProperty(person, "name", {
configurable: false,
value: "Nicholas"
});
//拋出錯誤
Object.defineProperty(person, "name", {
configurable: true,
value: "Nicholas"
});
- 在調用Object.defineProperty()方法時,如果不指定,configurable、enumerable 和
writable 特性的默認值都是false。
2、訪問器屬性
訪問器屬性不包含數據值,它們包含一對兒getter和setter函數(非必需),在讀取訪問器屬性時,會調用getter 函數,這個函數負責返回有效的值;在寫入訪問器屬性時,會調用setter 函數并傳入新值,這個函數負責決定如何處理數據。
- [[Configurable]]:表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特
性,或者能否把屬性修改為數據屬性。對于直接在對象上定義的屬性,這個特性的默認值為
true。 - [[Enumerable]]:表示能否通過for-in循環返回屬性。對于直接在對象上定義的屬性,這
個特性的默認值為true。 - [[Get]]:在讀取屬性時調用的函數。默認值為undefined。
- [[Set]]:在寫入屬性時調用的函數。默認值為undefined。
- 訪問器屬性不能直接定義,必須使用Object.defineProperty()來定義
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;
}
}
});
alert(book.year); //2004
book.year = 2005;
alert(book.edition); //2
定義多個屬性
- 由于為對象定義多個屬性的可能性很大,ECMAScript5又定義了一個Object.defineProperties()方法。
- 利用這個方法可以通過描述符一次定義多個屬性。這個方法接收兩個對象參數:第一個對象是要添加和修改其屬性的對象,第二個對象的屬性與第一個對象中要添加或修改的屬性一一對應
var book = {};
Object.defineProperties(book, {
_year: {
value: 2004
},
edition: {
value: 1
},
year: {
get: function(){
return this._year;
},
set: function(newValue){
if (newValue > 2004) {
this._year = newValue;
this.edition += newValue - 2004;
}
}
}
});
讀取屬性的特性
- 使用ECMAScript 5 的Object.getOwnPropertyDescriptor()方法,可以取得給定屬性的描述符。
- 這個方法接收兩個參數:屬性所在的對象和要讀取其描述符的屬性名稱。返回值是一個對象。
- 如果是訪問器屬性,這個對象的屬性有configurable、enumerable、get 和set。
- 如果是數據屬性,這個對象的屬性有configurable、enumerable、writable 和value。
var book = {};
Object.defineProperties(book, {
_year: {
value: 2004
},
edition: {
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");
alert(descriptor.value); //2004
alert(descriptor.configurable); //false
alert(typeof descriptor.get); //"undefined"
var descriptor = Object.getOwnPropertyDescriptor(book, "year");
alert(descriptor.value); //undefined
alert(descriptor.enumerable); //false
alert(typeof descriptor.get); //"function"
- 在JavaScript 中,可以針對任何對象——包括 DOM 和BOM 對象,使用Object.getOwnPropertyDescriptor()方法。
- 支持這個方法的瀏覽器有IE9+、Firefox 4+、Safari 5+、Opera 12+和Chrome。
好好學習