????JavaScript對(duì)象是一個(gè)很有意思的數(shù)據(jù)類(lèi)型嘱朽,由于js沒(méi)有類(lèi)的概念谜疤,js對(duì)象就承擔(dān)起JavaScript面向?qū)ο蟮闹厝巍?br> ????JavaScript 并沒(méi)有類(lèi)的概念在张,但是它有對(duì)象弛槐。
????ECMSscript將對(duì)象定義為無(wú)序?qū)傩缘募希鋵傩钥梢园局迪炀椤?duì)象或者函數(shù)驾霜。
????JavaScript的對(duì)象的屬性沒(méi)有嚴(yán)格的順序案训,每個(gè)屬性和方法都需有一個(gè)名字和對(duì)應(yīng)的值买置,看起來(lái)和JSON基本沒(méi)有區(qū)別(實(shí)際上js對(duì)象和JSON可相互轉(zhuǎn)換)。
對(duì)象基本概念
對(duì)象的創(chuàng)建非常的簡(jiǎn)單>>>
顯示申明
var obj = new Object()
obj.name = "tom"
obj.age = 21
obj.sayName = function(){return this.name}
**對(duì)象字面量**
var obj = {name:"tom",
age:21,
sayName:function(){return this.name}
}
????ECMA-262第五版定義了內(nèi)部采用的特性時(shí)(attribute), 描述了屬性(property)
注:property是用來(lái)描述對(duì)象的强霎,attribute是用來(lái)描述property的元數(shù)據(jù)忿项,此處的attribute區(qū)別于HTML的attribute,HTML標(biāo)簽的attribute是標(biāo)簽本身所具有的描述數(shù)據(jù),和property描述的對(duì)象(DOM)不同轩触,也就是這兩個(gè)的描述參照并不是同一基準(zhǔn)
屬性
????為了支持JavaScript引擎工作寞酿,ECMAScript5規(guī)定了屬性的類(lèi)型:數(shù)據(jù)屬性和訪問(wèn)器屬性。
數(shù)據(jù)屬性
????數(shù)據(jù)屬性:數(shù)據(jù)屬性包含一個(gè)數(shù)據(jù)值的位置脱柱,在這個(gè)位置可以讀取和寫(xiě)入值伐弹。數(shù)據(jù)屬性有四個(gè)描述其行為的特性。
[[Configurable]]:是否能夠?qū)傩赃M(jìn)行其他更改榨为,包括刪除惨好,修改等
[[Enumerable]]:是否能通過(guò)for-in循環(huán)返回屬性
[[Writable]]:如字面意思,能否寫(xiě)入值(修改值)
[[Value]]:包含屬性的數(shù)據(jù)值随闺,代表屬性值得存儲(chǔ)位置
四個(gè)特性默認(rèn)值為日川,true,true,true,undefined
????修改屬性默認(rèn)特性:Object.defineProperty(obj,propertyName,attrConfig)
????該方法接收三個(gè)參數(shù):修改的對(duì)象,修改的屬性值名稱(chēng)矩乐,該屬性的特性描述符對(duì)象
例如:
var Car = {}
Object.defineProperty(Car,"price",{
writeable:false,
value:120000
})
注意:運(yùn)用Object.defineProperty()產(chǎn)生的屬性的特性默認(rèn)為false,false,false,undefined
所以上面的例子中Car的price屬性中龄句,configurable默認(rèn)為false,enumerable默認(rèn)為false
直接通過(guò)對(duì)象創(chuàng)建的屬性并無(wú)此限制
訪問(wèn)器屬性
訪問(wèn)器屬性就是我們?cè)谄渌Z(yǔ)言中常看到的getter和setter函數(shù)散罕,訪問(wèn)器屬性并不包含值,它也有四個(gè)特性
[[Configurable]]:是否能夠?qū)傩赃M(jìn)行其他更改分歇,包括刪除,修改等
[[Enumerable]]:是否能通過(guò)for-in循環(huán)返回屬性
[[Get]]:讀取數(shù)據(jù)時(shí)調(diào)用的函數(shù)笨使,默認(rèn)為undefined
[[Set]]:寫(xiě)入數(shù)據(jù)時(shí)調(diào)用的函數(shù)卿樱,默認(rèn)為undefined
例如:
var people = {
name:"tom",
_age:17,
adult:false
}
Object.defineProperty(people,"age",{
get:function(){
return this._age
},
set:function(val){
this._age = val
if(val > 18){
this.adult = true
}
}
})
定義多個(gè)屬性
要想定義一個(gè)屬性就調(diào)用一次definProperty方法會(huì)非常繁瑣,ES5就存在方法defineProperties支持多屬性定義硫椰,只是傳入的參數(shù)有些許區(qū)別
例如:
Object.defineProperties("people",{
name:{
writable:false,
value:"Amy"
},
_age:{
get:function(){}
set:function(){}
}
})
讀取屬性的特性
使用ECMAScript5的Object.getOwnPropertyDescriptor(),可以取得給定屬性的描述符
參數(shù):包含待查屬性的對(duì)象繁调,待查屬性的名稱(chēng)
例如:
var perple = {}
Object.defineProperty(perple,"name",{
writable:false,
value:"Jack"
})
var result = Object.getOwnPropertyDescriptor(people,"name")
console.log(result.value)
console.log(result.writable)
原型對(duì)象
????對(duì)象的創(chuàng)建往往是重復(fù)的,就好像創(chuàng)建一個(gè)學(xué)生對(duì)象并不能完成所有工作靶草,如果牽扯到班級(jí)的概念蹄胰,可能就要?jiǎng)?chuàng)建班級(jí)中所有學(xué)生的對(duì)象了,對(duì)象也有很多的重復(fù)性奕翔,比如一個(gè)班的人所在班級(jí)學(xué)校都是一樣的裕寨,是共有的,為了簡(jiǎn)化代碼派继,也就有了原型對(duì)象的概念宾袜。
注:對(duì)象創(chuàng)建中,每一個(gè)學(xué)生代表一個(gè)實(shí)例驾窟,這和其他OO(面向?qū)ο螅┱Z(yǔ)言的類(lèi)具有相似的理念庆猫。
????我們創(chuàng)建的每一個(gè)函數(shù)都有一個(gè)prototype(原型)屬性,這個(gè)屬性是一個(gè)指針绅络,指向一個(gè)對(duì)象月培,而這個(gè)對(duì)象的用途嘁字。就是可以包含那些由特定類(lèi)型的實(shí)例共享的屬性和方法。通過(guò)字面意思杉畜,prototype就是通過(guò)調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對(duì)象的原型對(duì)象纪蜒。而原型對(duì)象也有一個(gè)指針constructor指向他所代表的構(gòu)造函數(shù)。例如:Person.prototype.constructor == Person
????原型對(duì)象就像是一個(gè)班級(jí)的標(biāo)簽此叠,實(shí)例就是班級(jí)的學(xué)生纯续,不管這個(gè)班級(jí)來(lái)了多少個(gè)新學(xué)生,只要這個(gè)班級(jí)叫一年級(jí)灭袁,那么這個(gè)班級(jí)的學(xué)生就都是一年級(jí)學(xué)生杆烁。原型對(duì)象包含所有實(shí)例公共的屬性為所有實(shí)例共享。
????創(chuàng)建了自定義的構(gòu)造函數(shù)之后简卧,其原型對(duì)象默認(rèn)只會(huì)取得 constructor 屬性兔魂;至于其他方法,則都是從 Object 繼承而來(lái)的举娩。當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個(gè)新實(shí)例后析校,該實(shí)例的內(nèi)部將包含一個(gè)指針(內(nèi)部屬性),指向構(gòu)造函數(shù)的原型對(duì)象铜涉。ECMA-262 第 5 版中管這個(gè)指針叫 [[Prototype]] 智玻。雖然在腳本中沒(méi)有標(biāo)準(zhǔn)的方式訪問(wèn) [[Prototype]] ,但 Firefox芙代、Safari 和 Chrome 在每個(gè)對(duì)象上都支持一個(gè)屬性__proto__
吊奢;而在其他實(shí)現(xiàn)中,這個(gè)屬性對(duì)腳本則是完全不可見(jiàn)的纹烹。不過(guò)页滚,要明確的真正重要的一點(diǎn)就是,這個(gè)連接存在于實(shí)例與構(gòu)造函數(shù)的原型對(duì)象之間铺呵,而不是存在于實(shí)例與構(gòu)造函數(shù)之間裹驰。
function Person(){}
Person.prototype.name="Nicholis"
Person.prototype.age=29
Person.prototype.job="Software Engineer"
Person.prototype.sayName=function(){
console.log(this.name)
}
var person1 = new Person()
person1 .sayName() // Nicholis
var person2 = new Person()
person2 .sayName() // Nicholis
console.log(person1 .sayName == person2 .sayName) // true
需要注意的幾點(diǎn):
- 構(gòu)造函數(shù)的prototype指針指向該特定類(lèi)型對(duì)象(Person)的原型對(duì)象,同時(shí)該對(duì)象的constructor指正指向該構(gòu)造函數(shù)片挂。
- 實(shí)例的[[prototype]]并非構(gòu)造函數(shù)的prototype指針幻林,在主流瀏覽器中的實(shí)際實(shí)現(xiàn)是
_proto_
指針,指向構(gòu)造函數(shù)的原型對(duì)象音念。 - 實(shí)例與構(gòu)造函數(shù)并無(wú)直接關(guān)系
原型對(duì)象屬性和實(shí)例屬性
原型對(duì)象屬性說(shuō)不定也有和實(shí)例屬性沖突的時(shí)候沪饺,比如運(yùn)動(dòng)會(huì)的時(shí)候大多數(shù)人在開(kāi)幕式的任務(wù)就是走隊(duì)列喊口號(hào),但是領(lǐng)頭的人喊的口號(hào)和班里其他人很有可能不同闷愤。
領(lǐng)頭:一年三班
同學(xué):團(tuán)結(jié)一心
領(lǐng)頭一年三班
同學(xué):共創(chuàng)佳績(jī)
在JS中整葡,發(fā)生了沖突該如何選擇,和現(xiàn)實(shí)中也是相差無(wú)幾的肝谭。
function Class13(){}
Class13.prototype.sentence= "永爭(zhēng)第一";
Class13.prototype.say = function(){
alert(this.sentence);
};
var student = new Class13(); // 大多數(shù)同學(xué)
var leader= new Class13(); // 領(lǐng)頭人
leader.sentence= "一年三班";
alert(leader.say ()); //"一年三班" —— 來(lái)自實(shí)例
alert(student .say ()); //"永爭(zhēng)第一" ——原型
????以上代碼不難看出掘宪,student實(shí)例沒(méi)創(chuàng)建實(shí)例屬性,便輸出了原型對(duì)象屬性攘烛,而設(shè)置了實(shí)例屬性的leader輸出的是實(shí)例屬性魏滚,領(lǐng)頭人在作為同學(xué)的基礎(chǔ)上口號(hào)是“永爭(zhēng)第一”,但是新的任務(wù)讓他產(chǎn)生了新的屬性坟漱,屏蔽了之前的設(shè)置鼠次。
????當(dāng)為對(duì)象實(shí)例添加一個(gè)屬性時(shí),這個(gè)屬性就會(huì)屏蔽原型對(duì)象中保存的同名屬性芋齿;換句話說(shuō)腥寇,添加這個(gè)屬性只會(huì)阻止我們?cè)L問(wèn)原型中的那個(gè)屬性,但不會(huì)修改那個(gè)屬性觅捆。即使將這個(gè)屬性設(shè)置為 null 赦役,也只會(huì)在實(shí)例中設(shè)置這個(gè)屬性,而不會(huì)恢復(fù)其指向原型的連接栅炒。
更簡(jiǎn)單的原型語(yǔ)法
每一次都要書(shū)寫(xiě)xxx.prototype著實(shí)讓人心煩掂摔,還好我們有更簡(jiǎn)便的方法——字面量
function Person(){}
Person.prototype = {
name : "Nicholas",
age : 29,
job: "Software Engineer",
sayName : function () {
alert(this.name);
}
};
但是用字面量的方法hi重寫(xiě)整個(gè)原型對(duì)象,導(dǎo)致的直接后果就是constructor指針不再是默認(rèn)指向構(gòu)造函數(shù)赢赊,而是Object
解決辦法一:在字面量中定義constructor
function Person(){}
Person.prototype = {
constructor : Person,
name : "Nicholas",
age : 29,
job: "Software Engineer",
sayName : function () {
alert(this.name);
}
};
問(wèn)題:constructor默認(rèn)數(shù)據(jù)屬性enumerable會(huì)設(shè)置為true
解決辦法二:通過(guò)Object.defineProperty()重新定義constructor
Object.defineProperty(Person.prototype, "constructor", {
enumerable: false,
value: Person
});
原型對(duì)象的問(wèn)題
- 省略了為構(gòu)造函數(shù)傳遞初始化參數(shù)這一環(huán)節(jié)乙漓,結(jié)果所有實(shí)例在默認(rèn)情況下都將取得相同的屬性值。
- 原型對(duì)象包含引用類(lèi)型值的屬性释移,會(huì)使得實(shí)例對(duì)該屬性的操作產(chǎn)生連鎖反應(yīng)叭披。
function Person(){
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true
以上代碼反映了引用類(lèi)型在原型對(duì)象中的問(wèn)題:當(dāng)實(shí)例直接對(duì)引用類(lèi)型進(jìn)行方法操作時(shí),將不會(huì)為實(shí)例創(chuàng)建同名實(shí)例屬性玩讳,而是尋址涩蜘,找到friends數(shù)組的地址,再進(jìn)行push操作熏纯,這就導(dǎo)致了實(shí)例改變了原型對(duì)象的值皱坛,使得其他實(shí)例也會(huì)取得改變后的friends。
單純的將引用類(lèi)型進(jìn)行賦值操作豆巨,那就不會(huì)有以上問(wèn)題剩辟,因?yàn)檫@個(gè)過(guò)程中并沒(méi)有尋址這個(gè)環(huán)節(jié),而直接進(jìn)行了實(shí)例屬性申明和賦值往扔。如下:
var person1 = new Person();
var person2 = new Person();
person1.friends=["hello"];
console.log(person1.friends); //"hello"
console.log(person2.friends); //"Shelby,Court,Van"
console.log(person1.friends === person2.friends); //false
相關(guān)方法
isPrototypeOf()
用途:判斷實(shí)例與目標(biāo)是否含有原型對(duì)象關(guān)系贩猎,即判斷對(duì)象是否是某實(shí)例的原型對(duì)象
alert(Person.prototype.isPrototypeOf(person1)); //true
alert(Person.prototype.isPrototypeOf(person2)); //true
Object.getPrototypeOf()
用途:獲取實(shí)例的原型對(duì)象
alert(Object.getPrototypeOf(person1) == Person.prototype); //true
alert(Object.getPrototypeOf(person1).name); //"Nicholas"
hasOwnProperty()
用途: 檢測(cè)一個(gè)屬性是存在于實(shí)例中。
function Person(){}
Person.prototype.name = "Tom";
var person1 = new Person();
var person2 = new Person();
person2.name = "Amy"
alert(person1.hasOwnProperty("name")); //false
alert(person2.hasOwnProperty("name")); //true
alert(person2.hasOwnProperty("nam")); //false
注:該方法結(jié)合操作符 in 可判斷屬性來(lái)自實(shí)例還是原型
in操作符會(huì)判斷給定屬性是否能通過(guò)對(duì)象訪問(wèn)萍膛,如果能吭服,返回true,不能蝗罗,返回false
結(jié)合hasOwnProperty()就很好判斷屬性來(lái)源了
function hasPrototypeProperty(object, name){
return !object.hasOwnProperty(name) && (name in object);
}
alert(hasPrototypeProperty(person1, "name")); //true
alert(hasPrototypeProperty(person2, "name")); //false
Object.keys()
用途:要取得對(duì)象上所有可枚舉的實(shí)例屬性艇棕。接收一個(gè)對(duì)象作為參數(shù)蝌戒,返回一個(gè)包含所有可枚舉屬性的字符串?dāng)?shù)組。
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var keys = Object.keys(Person.prototype);
alert(keys); //"name,age,job,sayName"
var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var p1keys = Object.keys(p1);
alert(p1keys); //"name,age"
Object.getOwnPropertyNames()
用途:得到所有實(shí)例屬性沼琉,無(wú)論它是否可枚舉北苟。
ar keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys); //"constructor,name,age,job,sayName"
// constructor 不可枚舉