javascript中對(duì)象的定義、使用以及對(duì)象和原型鏈操作小結(jié)
本文實(shí)例總結(jié)了javascript中對(duì)象的定義、使用以及對(duì)象和原型鏈操作。分享給大家供大家參考,具體如下:
1. 除了5種基本類型外,JS中剩下的就是對(duì)象
(1)對(duì)象的定義:
直接定義:
var test={x:1,y:1}
new方式創(chuàng)建:
var test=new Object({x:1})
Object.create方式:
var test=Object.create({x:1})
(2)對(duì)象上的賦值與取值
舉例:
var test={ x:1, y:2 }
方法一:可以通過(guò)test['x']取值
方法二:可以通過(guò)test.x取值
本質(zhì),將[]里面的值toString之后取到,比如我們這里有賦值語(yǔ)句比如:
test[{}]=3;
可以通過(guò)test[{z:1}]取到值3,若為5大基本類型,則要通過(guò)相同值取。
簡(jiǎn)而言之,就是test內(nèi)部的值會(huì)調(diào)用toString方法后存儲(chǔ)。
2.對(duì)象與原型鏈
(1)這里涉及到了JS中的繼承,JS的對(duì)象中除了null,其他都繼承于原型對(duì)象object.prototype,也就是說(shuō)JS的大部分對(duì)象的原型鏈上的頂端都具有對(duì)象object.prototype.
JS是基于原型鏈集成的,并且對(duì)象上可以訪問(wèn)到原型鏈上對(duì)象的屬性和方法。
舉例:
function test(){ this.x=x; this.y=y } var my=new test(); test.prototype.z=3; alert(my.z); //輸出為3
test.prototype為my的直接父鏈原型,并且my也可以沿著原型鏈查找,直到object.prototype,因此可以實(shí)現(xiàn)object.prototype中的方法,比如
my.toString();//返回[object Object]
(2)原型鏈對(duì)于對(duì)象遍歷的影響
我們上述定義了一個(gè)對(duì)象my,如果對(duì)對(duì)象使用for in遍歷,那么會(huì)有
function test(){ this.x=1; this.y=2; } var my=new test(); test.prototype.z=3; console.log(my.__proto__);//會(huì)輸出test.prototype for( p in my) { console.log(my[p])//會(huì)輸出1,2,3 }
我們發(fā)現(xiàn)最后輸出了my[p]的值為1,2,3,發(fā)現(xiàn)遍歷my上的屬性時(shí)候,把my對(duì)象原型鏈上的屬性也遍歷出來(lái)了。
補(bǔ)充:并且這種遍歷是無(wú)序的。
(3)特殊賦值
針對(duì)上述例子,如果我們對(duì)my對(duì)象進(jìn)行賦值,
my.z=4; alert(my.z);//這里得到的值為4
我們發(fā)現(xiàn),如果對(duì)象上的屬性和對(duì)象原型上的對(duì)象沖突,優(yōu)先對(duì)于對(duì)象上屬性進(jìn)行賦值。
(4)在對(duì)象的原型鏈上,所有對(duì)象都繼承與object.prototype,除了null,我們可以用以下鏈?zhǔn)絹?lái)反應(yīng):
my(或者其他對(duì)象)—>test.prototype–>……..–>object.prototype——>null
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript中的作用域鏈和閉包
- javascript從作用域鏈談閉包
- 深入Javascript函數(shù)、遞歸與閉包(執(zhí)行環(huán)境、變量對(duì)象與作用域鏈)使用詳解
- javascript 詞法作用域和閉包分析說(shuō)明
- JavaScript 變量作用域及閉包
- 淺談JS原型對(duì)象和原型鏈
- js 原型對(duì)象和原型鏈理解
- Javascript之旅 對(duì)象的原型鏈之由來(lái)
- js對(duì)象繼承之原型鏈繼承實(shí)例
- JavaScript使用原型和原型鏈實(shí)現(xiàn)對(duì)象繼承的方法詳解
- 圖文詳解JavaScript的原型對(duì)象及原型鏈
- JavaScript作用域、閉包、對(duì)象與原型鏈概念及用法實(shí)例總結(jié)
相關(guān)文章
JS中節(jié)流和防抖函數(shù)的實(shí)現(xiàn)及區(qū)別示例
這篇文章主要為大家介紹了JS中節(jié)流和防抖函數(shù)的實(shí)現(xiàn)及使用區(qū)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06JavaScript中apply方法的應(yīng)用技巧小結(jié)
這篇文章給大家總結(jié)了在js中apply方法的一些應(yīng)用技巧,通過(guò)這些技巧對(duì)大家日常的使用相信會(huì)有幫助,有需要的朋友們下面來(lái)一起看看吧。2016-09-09前端知識(shí)點(diǎn)之Javascript選擇輸入框confirm用法
這篇文章主要介紹了JavaScript中的confirm方法的基本用法、功能特點(diǎn)、注意事項(xiàng)及常見(jiàn)用途,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2025-02-02JavaScript 獲取 URL 中參數(shù)值的方法
本文將詳細(xì)介紹幾種在 JavaScript 中獲取 URL 參數(shù)值的方法,包括現(xiàn)代瀏覽器支持的 URLSearchParams、正則表達(dá)式解析以及自定義函數(shù)解析方案,并討論各自的優(yōu)缺點(diǎn)及適用場(chǎng)景,感興趣的朋友一起看看吧2025-04-04JS實(shí)現(xiàn)網(wǎng)頁(yè)Div層Clone拖拽效果
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)Div層Clone拖拽效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素位置屬性及層級(jí)屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JavaScript對(duì)象解構(gòu)的用法實(shí)例解析
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z(yǔ)法將數(shù)組和對(duì)象的屬性賦給各種變量,下面這篇文章主要給大家介紹了關(guān)于JavaScript對(duì)象解構(gòu)用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01javascript插件開(kāi)發(fā)的一些感想和心得
這篇文章主要介紹了javascript插件開(kāi)發(fā)的一些感想和心得,需要的朋友可以參考下2016-02-02