## 一、屬性和描述符
? ?1、概述:在ECMAScript 5中,屬性模型已經完全被重寫了,并規定了value,writable,configurable,enumerable,get和set共6個屬性,用于完成不同的功能。例如:
~~~
{
value:"屬性值",
writable:true, ? ? ? ? ? ?//定義屬性是否可以改變,默認為TRUE
configurable:true, ? ?//定義屬性是否可以被刪除,默認為TRUE
enumerable:true ? ? ?//定義屬性是否可以迭代,默認為TRUE
}
~~~
? ?2、注意事項
? ? ? ? ?要使用ECMAScript 5 增強的對象模型定義屬性,不能再使用原來的模式。
~~~
function Person(){}
Person.prototype.nickName=
{
value:"Tom",
writable:true,
enumerable:true,
configurable:true
};
var per = new Person;
alert(JSON.stringify(per.nickName));
~~~
Google運行結果:

上述的定義并沒有應用ECMAScript 5的增強對象模型,屬性nickName的值其實是一個對象,而我們想要的僅僅是Tom。
## 二 、使用ECMAScript 5 增強的對象模型定義屬性
? ?1、定義屬性:Object.defineProperty(obj,prop,desc)
? ? ? ? 1.1 ?參數詳解:
? ? ? ? ?obj是一個對象,若要為一個類的所有實例定義屬性,則將該參數指定為該類的原型對象;prop是一個字符串,指定屬性名;desc是一個對象,包含屬性的描述。
? ? ? ? 1.2 ?重新定義Person
~~~
function Person(){}
Object.defineProperty(Person.prototype,"nickName",
{
value:"Tom",
writable:true,
enumerable:true,
configurable:true
});
var per = new Person;
alert(JSON.stringify(per.nickName));
~~~
Google運行結果:

? 2、定義get和set存取器方法
? ? ? ? Object。defineProperty()也可以用于定義get和set方法,由于get和set方法需要一個中間的私有變量,所以,需要定義一個自執行的匿名函數包含Object.defineProperty()方法的定義。
~~~
function Person(){}
(function()
{
var nick = "Tom";
Object.defineProperty(Person.prototype,"nickName",
{
get:function(){return nick;},
set:function(value){nick = value;}
});
})();
var per1 = new Person;
document.write(per1.nickName+"<br/>");
per1.nickName = "John";
document.write(per1.nickName);
~~~
Google運行結果

? ?3、一次定義多個屬性
? ? ? ? Object.defineProperties()可以一次定義或修改多個屬性,為Person類定義nickName和age屬性
~~~
function Person(){}
Object.defineProperties(Person.prototype,
{
"nickName":
{
value:"Tom",
writable:true
},
"age":
{
value:20,
configurable:false,
writable:false
}
});
~~~
## 三 、使用ECMAScript 5 增強的對象模型獲取屬性
? ? ?1、Object.getOwnPropertyDescriptor(obj,prop)方法可以獲取一個屬性的描述信息。
? ? ? ? ? ?1.1 ? 參數詳解
? ? ? ? ? ?obj是一個對象,指定要獲取屬性的對象;prop是一個字符串,用于指定要獲取的屬性名。
~~~
function Person(){}
var per = new Person;
Object.defineProperties(per,
{
"nickName":
{
value:"Tom",
writable:true
},
"age":
{
value:20,
configurable:false,
writable:false
}
});
var age = Object.getOwnPropertyDescriptor(per,"age");
alert(JSON.stringify(age));
~~~
Google運行結果

? ?2、枚舉屬性
? ? ? ? Object.keys(obj)是一個枚舉對象obj所有可以枚舉的屬性的靜態方法,返回值是一組字符串,每個字符串就是屬性名。
? ? ? ? Object.getOwnPropertyNames(obj)可以實現同樣的功能,但是能列出所有能枚舉和不能枚舉的屬性。該方法不能實現向前兼容,因為ECMAscript3沒有相關的方法可以獲得不能枚舉的屬性。
## 四 、密封對象和動態對象
? ?1、概述:默認情況下,JS創建的對象都是動態的,允許在運行為對象添加屬性和方法。使用ECMAScript 5增強的對象模型,就可以定義密封對象,它是通過object.preventExtensions(obj)、Object.seal(obj)、Object.freeze(obj)等靜態方法實現。
? ?2、Object.preventExtensions(obj):鎖定一個對象,密封對象不允許添加新成員。同時提供了Object.isExtensible(obj)方法檢查一個對象是否可以增加成員,即是否應用了Object.preventExtensions(obj)方法,沒有應用則返回TRUE,否則返回FALSE。obj是要密封的對象,若要密封一個類,該參數可以指定為類的原型對象。
~~~
function Person(name,age)
{
this.name = name;
this.age = age;
}
Person.prototype.show = function()
{
document.write("my name is "+this.name+", and age is "+this.age+"<br/>");
};
var per = new Person("康",20);
per.show();
document.write("是否可以添加成員:"+Object.isExtensible(per)+"<br/>");
Object.preventExtensions(per);
document.write("是否可以添加成員:"+Object.isExtensible(per)+"<br/>");
per.hobby = "籃球"; //不能再添加屬性
document.write(per.hobby+"<br/>");
document.write(delete per.hobby); //但是可以刪除屬性
~~~
Google運行結果

? ?3、Object.seal(obj):鎖定一個對象,密封對象不允許添加和刪除新成員。同時提供了Object.isSealed(obj)方法檢查一個對象是否可以增加成員,即是否應用了Object.preventExtensions(obj)方法,沒有應用則返回TRUE,否則返回FALSE。obj是要密封的對象,若要密封一個類,該參數可以指定為類的原型對象。
~~~
function Person(name,age)
{
this.name = name;
this.age = age;
}
Person.prototype.show = function()
{
document.write("my name is "+this.name+", and age is "+this.age+"<br/>");
};
var per = new Person("康",20);
per.show();
document.write("是否可以添加成員:"+Object.isSealed(per)+"<br/>");
Object.seal(per);
document.write("是否可以添加成員:"+Object.isSealed(per)+"<br/>");
per.hobby = "籃球";
document.write(per.hobby+"<br/>");
document.write(delete per.age); //不能刪除,返回false
~~~
Google運行結果

? ?4、Object.freeze(obj):鎖定一個對象,密封對象不允許添加和刪除新成員,所有屬性均變為只讀。同時提供了Object.isFrozen(obj)方法檢查一個對象是否可以增加成員,即是否應用了Object.freeze(obj)方法,沒有應用則返回TRUE,否則返回FALSE。obj是要密封的對象,若要密封一個類,該參數可以指定為類的原型對象。
~~~
function Person(name,age)
{
this.name = name;
this.age = age;
}
Person.prototype.show = function()
{
document.write("my name is "+this.name+", and age is "+this.age+"<br/>");
};
var per = new Person("康",20);
per.show();
document.write("是否可以添加成員:"+Object.isFrozen(per)+"<br/>");
Object.freeze(per);
document.write("是否可以添加成員:"+Object.isFrozen(per)+"<br/>");
per.age = 25; //不能改變,仍為20
document.write(per.age+"<br/>");
document.write(delete per.name);
~~~
Google運行結果

## 五 、根據原型對象創建對象
? 使用Object.create(proto[,props])方法可以為指定的對象和可選的屬性創建一個新對象。proto指向一個對象,該對象作為新建對象的原型對象,props指定要增加的屬性,可選。該方法的功能相當于將新創建的對象的原型作為參數,同時使用Object.defineProperties(props)方法定義屬性。
- 前言
- 一
- 二:變量
- 三:數據運算
- 四:流程控制
- 五:內建的全局函數
- 六:自定義函數
- 七:面向對象編程(OOP)
- 八:靜態成員、靜態類、枚舉、重載和覆蓋
- 九:原型鏈本質論
- 十:ECMAScript 5 增強的對象模型
- 十一:處理字符串---String類和正則表達式
- 十二:數組、多維數組和符合數組(哈希映射)
- 十三:處理日期和時間
- 十四:JavaScript內建類
- 十五:BOM之源---window對象
- 十六:BOM之源---BOM基本應用
- 十七:BOM新成就(1)--客戶端存儲數據(Storage實現)
- 十八:BOM新成就(1)--客戶端存儲數據(Web SQL DataBase實現)
- 十九--HTML5 DOM新標準---處理文檔元信息和管理交互能力
- 二十---XMLHttpRequest和AJAX解決方案