一篇文章帶你了解JavaScript-對(duì)象
目錄
- 創(chuàng)建對(duì)象
- 對(duì)象直接量
- 通過(guò)new創(chuàng)建對(duì)象
- 原型
- Object.create()
- 屬性的查詢和設(shè)置
- 繼承
- 屬性訪問(wèn)錯(cuò)誤
- 刪除屬性
- 檢測(cè)屬性
- 序列化對(duì)象
- 總結(jié)
創(chuàng)建對(duì)象
對(duì)象直接量
對(duì)象直接量是由若干名/值對(duì)組成的映射表,名/值對(duì)中間用冒號(hào)分隔,名/值對(duì)之間用逗號(hào)分隔,整個(gè)映射表用花括號(hào)括起來(lái)。
var empty = {}; var point = { x:0, y:0}; var point2 = {x:point.x, y:point.y+1}; var book = { "main title":"JavaScript", //屬性名字里有空格,必須用字符串表示 "sub-title":"The", //屬性名字里有連字符,必須用字符串表示 "for":"all", //"for"是保留字,必須用字符串表示 author:{ //這個(gè)屬性的值是一個(gè)對(duì)象 name:"123" //注意,在里的屬性名都沒(méi)有引號(hào) } };
通過(guò)new創(chuàng)建對(duì)象
var o = new Object(); //創(chuàng)建一個(gè)空對(duì)象,和{}一樣 var a = new Array(); //創(chuàng)建一個(gè)空數(shù)組,和[]一樣 var d = new Date(); //創(chuàng)建一個(gè)表示當(dāng)前時(shí)間的Date對(duì)象 var r = new RegExp("js"); //創(chuàng)建一個(gè)可以進(jìn)行匹配的RegExp對(duì)象
原型
所有通過(guò)對(duì)象直接量創(chuàng)建的對(duì)象都具有同一個(gè)原型對(duì)象,并可以通過(guò)JavaScript代碼Object.prototype獲得對(duì)原型對(duì)象的引用。通過(guò)關(guān)鍵字new和構(gòu)造函數(shù)調(diào)用創(chuàng)建的對(duì)象的原型就是構(gòu)造函數(shù)的prototype屬性的值。因此,同使用{}創(chuàng)建對(duì)象一樣,通過(guò)new Object()創(chuàng)建的對(duì)象也繼承自O(shè)bject.prototype。同樣,通過(guò)new Array()創(chuàng)建的對(duì)象的原型就是Array.prototype,通過(guò)new Date()創(chuàng)建的對(duì)象的原型就是Date.prototype。
沒(méi)有原型的對(duì)象為數(shù)不多,Object.prototype就是其中之一。它不繼承任何屬性。其他原型對(duì)象都是普通對(duì)象,普通對(duì)象都具有原型。所有的內(nèi)置構(gòu)造函數(shù)(以及大部分自定義的構(gòu)造函數(shù))都具有一個(gè)繼承自O(shè)bject.prototype的原型。例如,Date.prototype的屬性繼承自O(shè)bject.prototype,因此由new Date()創(chuàng)建的Date對(duì)象的屬性同時(shí)繼承自Date.prototype和Object.prototype。這一系列鏈接的原型對(duì)象就是所謂的“原型鏈”(prototype chain)。
Object.create()
創(chuàng)建一個(gè)新對(duì)象,其中第一個(gè)參數(shù)是這個(gè)對(duì)象的原型。Object.create()提供第二個(gè)可選參數(shù),用以對(duì)對(duì)象的屬性進(jìn)行進(jìn)一步描述。
Object.create()是一個(gè)靜態(tài)函數(shù),而不是提供給某個(gè)對(duì)象調(diào)用的方法。使用它的方法很簡(jiǎn)單,只須傳入所需的原型對(duì)象即可:
var AB = Object.create({x:1,y:2});
屬性的查詢和設(shè)置
var a = book.author; //得到book的"author"屬性 book.edition = 6; //給book創(chuàng)建一個(gè)名為"edition"的屬性并賦值 book["main title"] = "123" //給"main title"屬性賦值
繼承
假設(shè)要查詢對(duì)象o的屬性x,如果o中不存在x,那么將會(huì)繼續(xù)在o的原型對(duì)象中查詢屬性x。如果原型對(duì)象中也沒(méi)有x,但這個(gè)原型對(duì)象也有原型,那么繼續(xù)在這個(gè)原型對(duì)象的原型上執(zhí)行查詢,直到找到x或者查找到一個(gè)原型是null的對(duì)象為止。
var o = {} o.x = 1;//給o定義一個(gè)屬性x var p = inherit(o);//p繼承o p.y = 2;//給p定義一個(gè)屬性y var q = inherit(p);//q繼承p q.z = 3;//給q定義一個(gè)屬性z q.x + q.y // 3 x和y分別繼承自o和p
屬性賦值操作首先檢查原型鏈,以此判定是否允許賦值操作。如果允許屬性賦值操作,它也總是在原始對(duì)象上創(chuàng)建屬性或?qū)σ延械膶傩再x值,而不會(huì)去修改原型鏈。
var u = { r:1 }; var c = inherit(u); c.x = 1; c.y =1; c.r =2; u.r; // 1 原型對(duì)象沒(méi)有修改
屬性訪問(wèn)錯(cuò)誤
當(dāng)book沒(méi)有a屬性
book.a // undefined var l = book.a.length; //拋出一個(gè)類型錯(cuò)誤異常,undefined沒(méi)有屬性
刪除屬性
delete運(yùn)算符可以刪除對(duì)象的屬性。
delete book.author; //book不再有屬性author delete book["main title"]; //book不再有屬性"main title"
delete運(yùn)算符只能刪除自有屬性,不能刪除繼承屬性(要?jiǎng)h除繼承屬性必須從定義這個(gè)屬性的原型對(duì)象上刪除它,而且這會(huì)影響到所有繼承自這個(gè)原型的對(duì)象)。
當(dāng)delete表達(dá)式刪除成功或沒(méi)有任何副作用(比如刪除不存在的屬性)時(shí),它返回true。如果delete后不是一個(gè)屬性訪問(wèn)表達(dá)式,delete同樣返回true:
o = {x:1}; delete o.x; //刪除x,返回true delete o.x; //什么都沒(méi)做(x已經(jīng)不存在了),返回true delete o.toString; //什么也沒(méi)做(toString是繼承來(lái)的),返回true delete 1; //無(wú)意義,返回true
delete不能刪除那些可配置性為false的屬性
在這些情況下的delete操作會(huì)返回false:
delete Object.prototype;//不能刪除,屬性是不可配置的 var x = 1; //聲明一個(gè)全局變量 delete this.x; //不能刪除這個(gè)屬性 function f (){}//聲明一個(gè)全局函數(shù) delete this.f; //也不能刪除全局函數(shù)
檢測(cè)屬性
in運(yùn)算符的左側(cè)是屬性名(字符串),右側(cè)是對(duì)象。如果對(duì)象的自有屬性或繼承屬性中包含這個(gè)屬性則返回true:
var o = { x:1 } "x" in o; //true "x"是o的屬性 "y" in o; //false "y"不是o的屬性 "toString" in o; //true o繼承toString屬性
對(duì)象的hasOwnProperty()方法用來(lái)檢測(cè)給定的名字是否是對(duì)象的自有屬性。對(duì)于繼承屬性它將返回false:
var o = { x:1 } o.hasOwnProperty("x");//true o有一個(gè)自有屬性x o.hasOwnProperty("y");//false o中不存在屬性y o.hasOwnProperty("toString");//false toString是繼承屬性
propertyIsEnumerable()是hasOwnProperty()的增強(qiáng)版,只有檢測(cè)到是自有屬性且這個(gè)屬性的可枚舉性(enumerable attribute)為true時(shí)它才返回true。
var o = inherit({ y:2}); o.x = 1; o.propertyIsEnumerable("x"); //true o有一個(gè)可枚舉的自有屬性x o.propertyIsEnumerable("y"); //false y是繼承來(lái)的 Object.propertyIsEnumerable("toString"); //false 不可枚舉
除了使用in運(yùn)算符之外,另一種更簡(jiǎn)便的方法是使用“!==”判斷一個(gè)屬性是否是undefined:
var o = { x:1 } o.x !== undefined; //true o中有屬性x o.y !== undefined; //false o中沒(méi)有屬性y o.toString !== undefined; //true o繼承了toString屬性
序列化對(duì)象
對(duì)象序列化(serialization)是指將對(duì)象的狀態(tài)轉(zhuǎn)換為字符串,也可將字符串還原為對(duì)象。ECMAScript 5提供了內(nèi)置函數(shù)JSON.stringify()和JSON.parse()用來(lái)序列化和還原JavaScript對(duì)象。這些方法都使用JSON作為數(shù)據(jù)交換格式,JSON的全稱是“JavaScript Object Notation”
o = {x:1, y:{z:[false,null,""]}}; s = JSON.stringify(o); //s是"{"x":1,"y":{"z":[false,null,""]}}" p = JSON.parse(s); // p == o
總結(jié)
本篇文章就到這里了,希望能給你帶來(lái)幫助,也希望您能夠多多關(guān)注的更多內(nèi)容!
相關(guān)文章:
1. javascript+Canvas實(shí)現(xiàn)畫板功能2. javascript canvas時(shí)鐘模擬器3. 原生JavaScript實(shí)現(xiàn)留言板4. JavaScript實(shí)現(xiàn)無(wú)限輪播效果5. 使用Javascript開(kāi)發(fā)sliding-nav帶滑動(dòng)條效果的導(dǎo)航插件6. JavaScript快速實(shí)現(xiàn)日歷效果7. JavaScript中數(shù)組與字符串的includes()用法8. JavaScript 中的六種循環(huán)方法9. JavaScript實(shí)現(xiàn)form提交,回車提交URL地址偽靜態(tài) 原創(chuàng)10. JavaScript經(jīng)典案例之簡(jiǎn)易計(jì)算器
