JavaScript類型系統(tǒng)之Object詳解
前面的話
在javascript中,對象為王;Javascript里的幾乎所有東西都是對象或者用起來像對象。理解了對象,就理解了Javascript。在javascript中,引用類型是一種數(shù)據(jù)結(jié)構(gòu),用于將數(shù)據(jù)和功能組織在一起,它也常被稱為類。引用類型有時(shí)也被稱為對象定義,因?yàn)樗鼈兠枋龅氖且活悓ο笏哂械膶傩院头椒?br />
大部分引用類型的值都是Object類型的實(shí)例;而且,Object也是javascript中使用最多的一個(gè)類型。雖然Object實(shí)例不具備多少功能,但對于在應(yīng)用程序中存儲和傳輸數(shù)據(jù),它們確實(shí)是非常理想的選擇
創(chuàng)建對象
有兩種Object類型的創(chuàng)建方法
[1]Object構(gòu)造函數(shù)
var person = new Object();
//如果不給構(gòu)造函數(shù)傳遞參數(shù)可以不加括號 var person = new Object;
person.name = 'bai';
person.age = 29;
//創(chuàng)建無屬性的空對象
var cody1 = new Object();
var cody2 = new Object(undefined);
var cody3 = new Object(null);
console.log(typeof cody1,typeof cody2, typeof cody3);//object object object
//創(chuàng)建string、number、array、function、boolean、regex
console.log(new Object('foo'));
console.log(new Object(1));
console.log(new Object([]));
console.log(new Object(function(){}));
console.log(new Object(true));
console.log(new Object(/\bbt[a-z]+\b/));
[注意]Object()構(gòu)造函數(shù)本身就是對象,構(gòu)造函數(shù)是基于Function構(gòu)造函數(shù)創(chuàng)建的對象
[2]使用對象字面量
Javascript提供了叫做字面量的快捷方式,用于創(chuàng)建大多數(shù)原生對象值。使用字面量只是隱藏了與使用new 操作符相同的
基本過程
var person = {
name : 'bai',
age : 29,
5 : true
};
[注意]在對象字面量中使用逗號來分隔不同的屬性,但是在最后一個(gè)屬性后面添加逗號,會在IE7-導(dǎo)致錯(cuò)誤
使用對象字面量的方法來定義對象,屬性名會自動(dòng)轉(zhuǎn)換成字符串
//同上
var person = {
'name' : 'bai',
'age' : 29,
'5' : true
};
如果留空其花括號,則可以定義只包含默認(rèn)屬性和方法的對象
//等價(jià)于var person = new Object();
var person = {};
[tips]使用對象字面量封裝多個(gè)可選參數(shù)
function displayInfo(args){
var output = '';
if(typeof args.name == 'string'){
output += 'name:' + args.name +'\n';
}
if(typeof args.age == 'number'){
output += 'Age:' + args.age + '\n';
}
console.log(output);
};
displayInfo({
name: 'Nicholas',
age: 29
});
displayInfo({
name: 'match'
});
以上這種傳遞參數(shù)的模式最適合需要向函數(shù)傳入大量可選參數(shù)的情況。一般來說,雖然命名參數(shù)容易處理,但有多個(gè)可選參數(shù)時(shí)就會不夠靈活。因此,對于必須值使用形參,而使用對象字面量來封裝多個(gè)可選參數(shù)
設(shè)置對象
有兩種訪問對象屬性的方法,可以用點(diǎn)表示法或中括號表示法獲取、設(shè)置或更新對象的屬性
中括號法的兩個(gè)優(yōu)點(diǎn)分別是可以通過變量來訪問屬性、屬性名稱可以為Javascript無效標(biāo)識符
[注意]變量中可以存在中文,因?yàn)橹形南喈?dāng)于字符,與英文字符同樣對待,因此可以寫成person.白或person['白']
var myObject = {
123:'zero',
class:'foo'
};
console.log(myObject['123'],myObject['class']);//'zero' 'foo'
console.log(myObject.123);//報(bào)錯(cuò)
方括號中的值若是非字符串類型會使用String()隱式轉(zhuǎn)換成字符串再輸出;如果是字符串類型,若有引號則原值輸出,否則會被識別為變量,若變量未定義,則報(bào)錯(cuò)
person[0] = 1; //[]中的數(shù)字不會報(bào)錯(cuò),而是自動(dòng)轉(zhuǎn)換成字符串 person[a] = 1; //[]中符合變量命名規(guī)則的元素會被當(dāng)成變量,變量未被定義,而報(bào)錯(cuò) person[''] = 2; //[]中的空字符串不會報(bào)錯(cuò),是實(shí)際存在的且可以調(diào)用,但不會在控制臺右側(cè)的集合中顯示 person[undefined 或 null 或 true 或 false] = 4;// 不會報(bào)錯(cuò),而是自動(dòng)轉(zhuǎn)換成字符串 person['白'] = 6; // 不會報(bào)錯(cuò)
刪除對象
delete操作符可以用于將屬性從一個(gè)對象中完全刪除。delete是將屬性從一個(gè)對象中刪除的唯一辦法,將屬性設(shè)置為undefined或null只能改變屬性的值,而不會將屬性從對象中刪除。delete只能刪除對象下的數(shù)據(jù),其他5種基礎(chǔ)類型的值是刪除不掉的
[注意]delete不會刪除在原型鏈上找到的屬性
var foo = {bar: 'bar'};
delete foo.bar;
console.log('bar' in foo);//false
var a = 123;
delete a;
console.log(a);//123
如果在全局狀態(tài)下聲明變量a,相當(dāng)于window對象下的一個(gè)數(shù)據(jù)a,可以通過window.a或a來對a賦值,且window.a和a的值總是相等,但就是無法刪除
var a; a = 10; console.log(a,window.a);//10 10 window.a = 20; console.log(a,window.a);//20 20 delete a ; console.log(a,window.a);//20 20 delete window.a; console.log(a,window.a);//20 20
如果用window.b 來聲明并賦值(b相當(dāng)于聲明在window對象下),可以刪除,且用delete b 和 delete window.b 的效果相同,刪除后,console.log(b)提示變量不存在,console.log(window.b)提示undefined
window.b = 10; console.log(b,window.b);//10 10 delete b; console.log(b);//報(bào)錯(cuò) console.log(window.b);//undefined window.b = 10; console.log(b,window.b);//10 10 delete window.b; console.log(b);//報(bào)錯(cuò) console.log(window.b);//undefined
對象嵌套
對象可以嵌套,但必須逐層取值
var student = {
name : {
chinese : 1,
englisth : 2
},
sex : 1,
age : 26
}
[注意]取值只能一層一層取,如student.name.chinese,而不能跨過name,直接用student.chinese,因?yàn)榕cname的同級下也可能有叫chinese的元素
var object1 = {
object1_1:{
object1_1_1:{foo: 'bar'},
object1_1_2:{}
},
object1_2:{
object1_2_1:{},
object1_2_2:{}
}
};
console.log(object1.object1_1.object1_1_1.foo);//bar
實(shí)例方法
constructor:保存著用于創(chuàng)建當(dāng)前對象的函數(shù)
hasOwnProperty(propertyName):用于檢查給定的屬性在當(dāng)前對象實(shí)例中(而不是在實(shí)例的原型中)是否存在。其中,propertyName必須以字符串形式指定
isPrototypeOf(object):用于檢查傳入的對象是否是傳入對象的原型
propertyIsEnumerable(propertyName):用于檢查給定的屬性是否能夠使用for-in語句來枚舉。其中,propertyName必須以字符串形式指定
toLocaleString():返回對象的字符串表示,該字符串與執(zhí)行環(huán)境的地區(qū)對應(yīng)
toString():返回對象的字符串表示
valueOf():返回對象的字符串、數(shù)值或布爾值表示,通常與toString()方法的返回值相同
var myObject = {
mark: true
};
console.log(myObject.constructor);//function Object(){}
console.log(myObject.hasOwnProperty('mark'));//true
console.log(Object.prototype.isPrototypeOf(myObject));//true
console.log(myObject.propertyIsEnumerable('mark'));//true
console.log(myObject.toLocaleString());//[object Object]
console.log(myObject.toString());//[object Object]
console.log(typeof myObject.valueOf(),myObject.valueOf());// object Object{mark:true}
小結(jié):
Object類型
對象其實(shí)就是一組數(shù)據(jù)和功能的集合。對象可以通過執(zhí)行new操作符后跟要?jiǎng)?chuàng)建的對象類型的名稱來創(chuàng)建。而創(chuàng)建Object類型的實(shí)例并為其添加屬性和(或)方法,就可以創(chuàng)建自定義對象。
var o = new Object();
Object的每個(gè)實(shí)例都具有下列屬性和方法:
● constructor——保存著用于創(chuàng)建當(dāng)前對象的函數(shù)
● hasOwnProperty(propertyName)——用于檢查給定的屬性在當(dāng)前對象實(shí)例中(而不是在實(shí)例的原型中)是否存在。其中,作為參數(shù)的屬性名(propertyName)必須以字符串形式指定(例如:o.hasOwnProperty("name"))
● isPrototypeOf(object)——用于檢查傳入的對象是否是另一個(gè)對象的原型
● propertyIsEnumerable(propertyName)——用于檢查給定的屬性是否能夠使用for-in語句來枚舉
● toString()——返回對象的字符串表示
● valueOf()——返回對象的字符串、數(shù)值或布爾值表示。通常與toString()方法的返回值相同。
- java使用JSONObject實(shí)例
- js如何獲取object類型里的鍵值
- js之ActiveX控件使用說明 new ActiveXObject()
- 刪除Javascript Object中間的key
- Javascript Object 對象學(xué)習(xí)筆記
- JavaScript中的object轉(zhuǎn)換成number或string規(guī)則介紹
- Nodejs學(xué)習(xí)筆記之Global Objects全局對象
- 淺談Javascript中的Function與Object
- javascript中Object使用詳解
- javascript 對象數(shù)組根據(jù)對象object key的值排序
- JavaScript使用ActiveXObject訪問Access和SQL Server數(shù)據(jù)庫
- js如何打印object對象
相關(guān)文章
用JS實(shí)現(xiàn)簡單的登錄驗(yàn)證功能
這篇文章主要介紹了用JS實(shí)現(xiàn)簡單的登錄驗(yàn)證功能,代碼簡單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-07-07
微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼,小程序本身對http、websocket等連接均有諸多限制,所以這次項(xiàng)目選擇了node.js自帶的ws模塊。感興趣的可以參考一下2019-02-02
bootstrap datetimepicker實(shí)現(xiàn)秒鐘選擇下拉框
這篇文章主要為大家詳細(xì)介紹了bootstrap datetimepicker添加秒鐘選擇下拉框的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
js實(shí)現(xiàn)簡單的省市縣三級聯(lián)動(dòng)效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)簡單的省市縣三級聯(lián)動(dòng)效果,以完整實(shí)例形式分析了JavaScript實(shí)現(xiàn)省市縣三級聯(lián)動(dòng)效果的具體步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-02-02
JavaScript實(shí)現(xiàn)跟隨滾動(dòng)緩沖運(yùn)動(dòng)廣告框
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)跟隨滾動(dòng)緩沖運(yùn)動(dòng)廣告框,頁面左右兩邊跟隨式廣告框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
Javascript表單特效之十大常用原理性樣例代碼大總結(jié)
開頭說這個(gè)常用原理性樣例,大家可能不太清楚,這篇文章主要是針對實(shí)際開發(fā)中常用的一些代碼分析,主要是針對表單處理方法的一些資料,推薦大家收藏2016-07-07
JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能示例
這篇文章主要介紹了JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能,涉及javascript與jQuery的事件響應(yīng)、頁面元素動(dòng)態(tài)操作等相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05

