JavaScript對(duì)象詳解之對(duì)象屬性的添加
一,什么是對(duì)象?
英文名object,翻譯成中文就是對(duì)象。用英語(yǔ)的角度來(lái)說(shuō)object就是物體實(shí)體,即使他看不見(jiàn)摸不著。中文的對(duì)象指的是女朋友。在計(jì)算機(jī)中,用英語(yǔ)的角度理解對(duì)象,就是說(shuō):放在內(nèi)存里面的復(fù)雜數(shù)據(jù)集合,也叫做數(shù)據(jù)與方法的封裝,是一種編程邏輯概念。
函數(shù)是對(duì)數(shù)據(jù)與代碼的封裝,假如再把函數(shù)及函數(shù)外的數(shù)據(jù)進(jìn)行封裝,那就是object,即對(duì)象。
二,創(chuàng)建一個(gè)對(duì)象
將一些函數(shù)與對(duì)象封裝起來(lái)就是對(duì)象,所謂封裝在語(yǔ)法層面就是,把函數(shù)和變量用英文大括號(hào){}包起來(lái)。使用:key:value的形式,value可以是對(duì)象的值,也可以是對(duì)象的地址。
key的值可以不符合標(biāo)識(shí)符的命名規(guī)范,但是必須使用引號(hào)引起來(lái),比如'12qw'=1。每個(gè)鍵值對(duì)之間使用英文逗號(hào)隔開(kāi)。
//創(chuàng)建一個(gè)obj對(duì)象 var obj1 = { str1: 'woaini', "10p": 10 };
function f() { console.log(1) }; var obj1 = { str1: 'woaini', "10p": 10, fun: f, fun1: function() { console.log(2) } }; obj1.fun(); obj1.fun1();
如果一個(gè)鍵的值是一個(gè)函數(shù),則稱(chēng)這個(gè)鍵名為這個(gè)對(duì)象的方法。如果一個(gè)鍵的值是基本數(shù)據(jù)類(lèi)型,則稱(chēng)這個(gè)鍵名為這個(gè)對(duì)象的屬性。
三,對(duì)象的嵌套
即對(duì)象的屬性仍然可以是一個(gè)對(duì)象。運(yùn)算符.表示getattr的意思,即訪問(wèn)對(duì)象屬性。
var obj1 = { str1: 'woaini', "10p": 10, fun1: function() { console.log(2) }, obj_inn: obj2 = { num: 1 } }; console.log(obj1.obj_inn.num);
四,對(duì)象的屬性與修改
1,使用點(diǎn).運(yùn)算符
var obj1 = { str1: 'woaini', }; console.log(obj1.str1);
2,使用[]符號(hào)
var obj1 = { str1: 'woaini', }; console.log(obj1['str1'])
記住鍵需要加上引號(hào)。
3,修改屬性
var obj1 = { str1: 'woaini', }; obj1.str1 = 666 console.log(obj1['str1'])
五,給對(duì)象添加屬性
var obj1 = { }; obj1.name = 'xiaoming'; obj1['age'] = 10; console.log(obj1.age, obj1.name);
六,查看與刪除對(duì)象的屬性
1,使用Object.keys(obj)方法查看對(duì)象所有屬性
var obj1 = { str1: 'woaini', }; obj1.str1 = 666 obj1.age = 18 console.log(Object.keys(obj1)) // [ 'str1', 'age' ]
2,使用delete()方法刪除對(duì)象屬性
var obj1 = { str1: 'woaini', }; obj1.str1 = 666 obj1.age = 18 console.log(delete obj1.age) // true
刪除一個(gè)對(duì)象里不存在的屬性不僅不會(huì)報(bào)錯(cuò)而且還會(huì)返回true。當(dāng)試圖刪除一個(gè)無(wú)法刪除的屬性時(shí),則會(huì)返回false。刪除對(duì)象屬性:實(shí)際上是與相關(guān)的對(duì)象進(jìn)行解綁。
3,使用增強(qiáng)版for循環(huán)遍歷對(duì)象元素
var obj1 = { str1: 'woaini', }; obj1.str1 = 666 obj1.age = 18 for (var item in obj1) { console.log(obj1[item]) }
七,Object對(duì)象方法
這里講解關(guān)于Object對(duì)象的一些知識(shí),它類(lèi)似于基類(lèi),是所有對(duì)象的老大。
1,Object對(duì)象的本身方法
Object本身就是一個(gè)對(duì)象,可以給他添加屬性和方法。利用鍵值對(duì)形式給對(duì)象添加的方法叫做Object本身方法。只能使用Object.funcname()來(lái)執(zhí)行。
Object.add = function() { console.log(1) } Object.add()
2,Object對(duì)象自己的實(shí)例方法
使用Object.prototype.name()形式添加的方法稱(chēng)為對(duì)象的實(shí)例方法??梢员蝗我鈱?duì)象使用。
function f() { console.log(1) }; Object.prototype.fun = f; var obj = {} obj.fun()
八,函數(shù)與對(duì)象注意點(diǎn)
1,函數(shù)體里調(diào)用其他函數(shù)
可以再一個(gè)函數(shù)的函數(shù)體里面調(diào)用另一個(gè)函數(shù),即函數(shù)名+()。
2,函數(shù)體行數(shù)不超過(guò)50行
每個(gè)函數(shù)的函數(shù)體不超過(guò)50行,如果超過(guò)的話(huà)最好拆分,使用函數(shù)搭積木實(shí)現(xiàn)功能。
總結(jié)
到此這篇關(guān)于JavaScript對(duì)象詳解之對(duì)象屬性添加的文章就介紹到這了,更多相關(guān)js對(duì)象屬性添加內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
script標(biāo)簽中的defer和async使用技巧說(shuō)明
這篇文章主要介紹了script標(biāo)簽中的defer和async使用技巧,包含他們的下載順序和執(zhí)行順序,以及使用場(chǎng)景需要的朋友可以參考下2023-02-02JS通過(guò)ajax + 多列布局 + 自動(dòng)加載實(shí)現(xiàn)瀑布流效果
這篇文章主要介紹了JS通過(guò)ajax + 多列布局 + 自動(dòng)加載來(lái)實(shí)現(xiàn)瀑布流效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05微信小程序 導(dǎo)入圖標(biāo)實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了微信小程序 導(dǎo)入圖標(biāo)實(shí)現(xiàn)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10JS網(wǎng)頁(yè)在線(xiàn)獲取鼠標(biāo)坐標(biāo)值的方法
這篇文章主要介紹了JS網(wǎng)頁(yè)在線(xiàn)獲取鼠標(biāo)坐標(biāo)值的方法,涉及javascript操作頁(yè)面窗口位置元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02使用JavaScript實(shí)現(xiàn)輪播圖特效
這篇文章主要為大家詳細(xì)介紹了使用JavaScript實(shí)現(xiàn)輪播圖特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09