摘要:深入理解中的屬性和特性中屬性和特性是完全不同的兩個(gè)概念,這里我將根據(jù)自己所學(xué),來(lái)深入理解中的屬性和特性。其中第三個(gè)參數(shù)描述符對(duì)象是對(duì)象字面量的方法創(chuàng)建的,里面的屬性和屬性值實(shí)際上保存的是要修改的特性和特性值。
深入理解JavaScript中的屬性和特性
JavaScript中屬性和特性是完全不同的兩個(gè)概念,這里我將根據(jù)自己所學(xué),來(lái)深入理解JavaScript中的屬性和特性。
主要內(nèi)容如下:
理解JavaScript中對(duì)象的本質(zhì)、對(duì)象與類的關(guān)系、對(duì)象與引用類型的關(guān)系
對(duì)象屬性如何進(jìn)行分類
屬性中特性的理解
第一部分:理解JavaScript中對(duì)象的本質(zhì)、對(duì)象與類的關(guān)系、對(duì)象與引用類型的關(guān)系對(duì)象的本質(zhì):ECMA-262把對(duì)象定義為:無(wú)序?qū)傩缘募希鋵傩钥梢园局?、?duì)象或者函數(shù)。即對(duì)象是一組沒(méi)有特定順序的值,對(duì)象的每個(gè)屬性或方法都有一個(gè)名字,而這個(gè)名字都映射到一個(gè)值。故對(duì)象的本質(zhì)是一個(gè)散列表:其中是一組名值對(duì),值可以是數(shù)據(jù)或函數(shù)。
對(duì)象和類的關(guān)系:在JavaScript中,對(duì)象和類沒(méi)有任何關(guān)系。這是因?yàn)镋CMAScript中根本就沒(méi)有類的概念,它的對(duì)象與其他基于類的語(yǔ)言中的對(duì)象是不同的。
對(duì)象和引用類型的關(guān)系:對(duì)象和引用類型并不是等價(jià)的,因?yàn)槊總€(gè)對(duì)象都是基于一個(gè)引用類型創(chuàng)建的。
第二部分:對(duì)象屬性如何進(jìn)行分類由構(gòu)造函數(shù)或?qū)ο笞置媪糠椒▌?chuàng)建的對(duì)象中具有屬性和方法(只要提到屬性和方法,它們一定是屬于對(duì)象的;只要提到對(duì)象,它一定是具有屬性和方法的(自定義除外)),其中屬性又可分為數(shù)據(jù)屬性和訪問(wèn)器屬性,他們的區(qū)別如下:
數(shù)據(jù)屬性一般用于存儲(chǔ)數(shù)據(jù)數(shù)值,訪問(wèn)器屬性不包含數(shù)據(jù)值
訪問(wèn)器屬性多用于get/set操作
第三部分:屬性中特性的理解ECMAScript為了描述對(duì)象屬性(property)的各種特征,定義了特性(attribute)這個(gè)概念。也就是說(shuō)特性不同于屬性,特性是為了描述屬性的。下面,我將分別講解:
數(shù)據(jù)屬性及其特性
訪問(wèn)器屬性及其特性
如何利用Object.defineProperties()方法定義多個(gè)特性
如何利用Object.getOwnPropertyDescripter()方法讀取屬性的描述符以讀取屬性的特性
1.數(shù)據(jù)屬性及其特性
剛剛我們說(shuō)過(guò),數(shù)據(jù)屬性是用于存儲(chǔ)數(shù)據(jù)數(shù)值的,因此數(shù)據(jù)屬性具有一個(gè)數(shù)據(jù)值的位置,在這個(gè)位置可以讀取和寫入值。數(shù)據(jù)屬性有4個(gè)描述其行為的特性,由于ECMAScript規(guī)定:在JavaScript中不能直接訪問(wèn)屬性的特性(注意:不是不能訪問(wèn)),所以我們把它放在兩組方括號(hào)中。如下:
[[Configurable]]:默認(rèn)值為true,a、表示能否通過(guò)delete刪除屬性從而重新定義屬性 b、能否修改屬性的特性
c、能夠把屬性由數(shù)據(jù)屬性修改為訪問(wèn)器屬性
[[Enumerable]]:默認(rèn)值為true,表示能否通過(guò)for-in循環(huán)返回該屬性(所以:如果為false,那么for-in循環(huán)沒(méi)法枚舉它所在的屬性)
[[Writable]]:默認(rèn)值為true,表示能否修改屬性的值,這是與[[Configurable]]不同之處。
[[Value]]:默認(rèn)值為undefined,這個(gè)值即為屬性的屬性值,我們可以在這個(gè)位置上讀取屬性值,也可以在這個(gè)位置上寫入屬性值。
注意:上述的默認(rèn)是指通過(guò)構(gòu)造函數(shù)或?qū)ο笞置媪縿?chuàng)建的對(duì)象所自身?yè)碛械膶傩裕皇窍旅嬉榻B的Object.defineProperty()方法
這些特性都具有默認(rèn)值,但是如果這些默認(rèn)值不是我們想要的,該怎么辦呢?當(dāng)然就是修改啦!我們可以通過(guò)Object.defineProperty()方法來(lái)修改屬性默認(rèn)的特性。英文difineProperty即為定義屬性的意思。這個(gè)方法接收三個(gè)參數(shù):屬性所在的對(duì)象、屬性的名字和一個(gè)描述符對(duì)象。其中第三個(gè)參數(shù)描述符對(duì)象是對(duì)象字面量的方法創(chuàng)建的,里面的屬性和屬性值實(shí)際上保存的是要修改的特性和特性值。
下面通過(guò)幾個(gè)例子來(lái)深入理解。
a
var person={}; Object.defineProperty(person,"name",{ writable:false, value:"zhuzhenwei" }); console.log(person.name);//zhuzhenwei person.name="heting"; console.log(person.name);//zhuzhenwei
這里我用對(duì)象字面量的方法創(chuàng)建了一個(gè)對(duì)象,但是沒(méi)有同時(shí)創(chuàng)建方法和屬性。而是利用了Object.defineProperty()方法來(lái)創(chuàng)建了屬性和修改了默認(rèn)值。這里將writable設(shè)置為false,于是后面我試圖修改person.name時(shí),是無(wú)效的。
b
var person={}; Object.defineProperty(person,"name",{ value:"zhuzhenwei" }); console.log(person.name);//zhuzhenwei person.name="heting"; console.log(person.name);//zhuzhenwei
注意看這個(gè)例子,這個(gè)例子中我刪去了writable:false,為什么還是不能修改呢?這是因?yàn)橹拔以诮榻B特性時(shí),前三個(gè)默認(rèn)為ture,是在創(chuàng)建對(duì)象并創(chuàng)建屬性的情況下得到的。對(duì)于通過(guò)調(diào)用Object.defineProperty()方法創(chuàng)建的屬性,其前三個(gè)特性的默認(rèn)值均為false,這里需要注意。
c
var person={}; Object.defineProperty(person,"name",{ value:"zhuzhenwei", configurable:false }); console.log(person.name);//zhuzhenwei delete person.name; console.log(person.name);//zhuzhenwei
這里我們將新建的屬性name的特性設(shè)置為了configurable:false;因此下面刪除屬性的操作是無(wú)效的。根據(jù)b,可知configurable,默認(rèn)就是false,即使去掉也不可修改。
d
var person={}; Object.defineProperty(person,"name",{ value:"zhuzhenwei", configurable:true }); console.log(person.name);//zhuzhenwei delete person.name; console.log(person.name);//undefined
在這里我將默認(rèn)的configurable的值由默認(rèn)的false修改為了true,于是變成了可配置的,那么最后就成功刪除了。
e
var person={}; Object.defineProperty(person,"name",{ value:"zhuzhenwei", configurable:false }); console.log(person.name);//zhuzhenwei Object.defineProperty(person,"name",{ value:"zhuzhenwei", configurable:true }); console.log(person.name);//Uncaught TypeError: Cannot redefine property: name(…)
如果之前已經(jīng)設(shè)置成為了false,那么后面再改成true也是徒勞的,即:一旦把屬性設(shè)置成為不可配置的,就不能再把它變回可配置了。
f
console.log(person.name);//Uncaught TypeError: Cannot redefine property: name(…) var person={}; Object.defineProperty(person,"name",{ value:"zhuzhenwei", }); console.log(person.name);//zhuzhenwei Object.defineProperty(person,"name",{ value:"zhuzhenwei", configurable:true }); console.log(person.name);//Uncaught TypeError: Cannot redefine property: name(…)
這里可以說(shuō)明,即使前一步我們不管默認(rèn)的configurable:false,后面得到的仍是不可配置。于是,可以得出結(jié)論,為了可配置,必須在第一次調(diào)用Object.defineProperty()函數(shù)時(shí)就將默認(rèn)的值修改為true。
2.訪問(wèn)器屬性及其特性
之前提到,訪問(wèn)器屬性不包含數(shù)據(jù)值,他們包含一對(duì)getter函數(shù)和setter函數(shù)(這兩個(gè)函數(shù)不是必須的)。在讀取訪問(wèn)器屬性時(shí),會(huì)調(diào)用getter函數(shù),這個(gè)函數(shù)負(fù)責(zé)返回有效的值;在寫入訪問(wèn)器屬性是,會(huì)調(diào)用setter函數(shù)并傳入新值,這個(gè)函數(shù)負(fù)責(zé)決定如何處理數(shù)據(jù)。同樣,由于不能通過(guò)JavaScript來(lái)直接訪問(wèn)得到訪問(wèn)器屬性的特性,所以下面列出的特性將由[[]]括起來(lái)以作區(qū)分。
[[Configurable]]:默認(rèn)值為true,a、表示能否通過(guò)delete刪除屬性從而重新定義屬性 b、能否修改屬性的特性c、能夠把屬性由訪問(wèn)器屬性修改為數(shù)據(jù)屬性
[[Enumerable]]:默認(rèn)值為true,表示能否通過(guò)for-in循環(huán)返回該屬性(所以:如果為false,那么for-in循環(huán)沒(méi)法枚舉它所在的屬性)
[[Get]]:在讀取屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值為undefined 關(guān)鍵:特性可以是一個(gè)函數(shù)
[[Set]]: 在寫入屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值為undefined 關(guān)鍵:特性可以是一個(gè)函數(shù)
由于get和set函數(shù)也屬于屬性的特性,那么他們就有可能(說(shuō)有可能是因?yàn)檫@兩個(gè)函數(shù)也不是必須的)出現(xiàn)在Object.defineproperty的第三個(gè)參數(shù)描述符對(duì)象的屬性中。
注意:1.相對(duì)于數(shù)據(jù)屬性,我們發(fā)現(xiàn)訪問(wèn)器屬性中沒(méi)有writable特性和value特性。這是因?yàn)樵L問(wèn)器屬性不包含數(shù)據(jù)值,那么我們?cè)趺串?dāng)然就不可修改屬性的值(用不到writable特性),更不用考慮value了。
2.訪問(wèn)器屬性不能直接定義,必須是用Object.defineProperty()來(lái)定義。(通過(guò)這個(gè)規(guī)定我們就能準(zhǔn)確地判斷出訪問(wèn)器屬性和數(shù)據(jù)屬性了)
通過(guò)下面這個(gè)例子來(lái)深入理解:
var book={ _year:2004, edition:1 }; Object.defineProperty(book,"year",{ get:function(){
return this._year; }, set:function(newValue){ if(newValue>2004){ this._year=newValue; this.edition+=newValue-2004; } } }); book.year=2005; console.log(book.edition);//2
幾個(gè)需要深入理解的地方:
1.訪問(wèn)器屬性不能直接定義,必須使用Object.defineProperty()來(lái)定義,且該屬性具有set和get特性,于是可以判斷,_year和edition是數(shù)據(jù)屬性,而year是訪問(wèn)器屬性。
2.我們看到_year這個(gè)數(shù)據(jù)屬性前面是以_(下劃線)開(kāi)頭的,這個(gè)一種常用的記號(hào),用于表示只能通過(guò)對(duì)象方法訪問(wèn)的屬性。從上面的例子中可以看到get相當(dāng)于描述符對(duì)象的一個(gè)方法,而_year正是在這個(gè)對(duì)象方法訪問(wèn)的屬性。而edition既可以通過(guò)對(duì)象方法訪問(wèn),也可以由對(duì)象直接訪問(wèn)。
book.year表示正在讀取訪問(wèn)器屬性,這時(shí)會(huì)調(diào)用get函數(shù),并返回了2004這個(gè)有效的值。
book.year=2005表示寫入訪問(wèn)器屬性,這時(shí)會(huì)調(diào)用set函數(shù)并傳入新值,即將2005傳給newValue,這個(gè)函數(shù)決定如何處理數(shù)據(jù)。
這時(shí)使用訪問(wèn)器屬性的常見(jiàn)方法-即設(shè)置一個(gè)屬性的值會(huì)導(dǎo)致其他屬性發(fā)生變化。
3.如何利用Object.defineProperties()方法定義多個(gè)特性
顯然,一個(gè)對(duì)象不可能只具有一個(gè)屬性,因此,定義多個(gè)屬性的可能性很大,于是JavaScript提供了Object.defineProperties()方法解決這個(gè)問(wèn)題。這個(gè)方法接收兩個(gè)參數(shù),第一個(gè)是要定義屬性所在的對(duì)象,第二個(gè)是一個(gè)對(duì)象字面量方法創(chuàng)建的對(duì)象,對(duì)象的屬性名即為要定義的特姓名,對(duì)象的屬性值又是一個(gè)對(duì)象,這個(gè)對(duì)象里的屬性名和屬性值分別是特性名和特性值(這里不是很好理解,看例子即可)。
var book={}; Object.defineProperties(book,{ _year:{ writable:true, value:2004 }, edition:{ writable:true, value:1 }, year:{ get:function(){ return this._year; }, set:function(){ if(newValue>2004){ this._year=newValue; this.edition+=newValue-2004; } } } });4.如何利用Object.getOwnPropertyDescripter()方法讀取屬性的描述符以讀取屬性的特性
我們可以使用Object.getOwnPropertyDescripter()方法來(lái)取得給定屬性的描述符。getOwnPropertyDescripter即為取得自身屬性描述符的意思。這個(gè)方法接收兩個(gè)參數(shù):屬性所在的對(duì)象要要讀取其描述符的屬性名稱。返回一個(gè)對(duì)象。
對(duì)于訪問(wèn)器屬性而言,這個(gè)對(duì)象的屬性有configurable、enumerable、get和set;
對(duì)于數(shù)據(jù)屬性而言,這個(gè)對(duì)象的屬性有configurable、enumerable、writable和value。
var book={}; Object.defineProperties(book,{ _year:{ value:2004 }, edition:{ value:1 }, year:{ get:function(){ return this._year; }, set:function(){ if(newValue>2004){ this._year=newValue; this.edition+=newValue-2004; } } } }); var descriptor=Object.getOwnPropertyDescriptor(book,"_year"); console.log(descriptor.value);//2004 console.log(descriptor.configurable);//false 因?yàn)橥ㄟ^(guò)Object.defineProperties()方法創(chuàng)建的屬性的特性configurable enumerable都是false console.log(typeof descriptor.get);//undefined 注意:這是數(shù)據(jù)屬性,是不具有g(shù)et特性的 var descriptor=Object.getOwnPropertyDescriptor(book,"year"); console.log(descriptor.value);//undefined console.log(descriptor.enumerable);//false console.log(typeof descriptor.get);//function get雖然是屬性的一個(gè)特性,但是它也是函數(shù)。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/102070.html
摘要:理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型,雖然這經(jīng)常被當(dāng)作缺點(diǎn)提及,但是只要善于運(yùn)用,其實(shí)基于原型的繼承模型比傳統(tǒng)的類繼承還要強(qiáng)大。中文指南基本操作指南二繼續(xù)熟悉的幾對(duì)方法,包括,,。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。 怎樣使用 this 因?yàn)楸救藢儆趥吻岸?,因此文中只看懂?8 成左右,希望能夠給大家?guī)?lái)幫助....(據(jù)說(shuō)是阿里的前端妹子寫的) this 的值到底...
摘要:返回值被傳遞給函數(shù)的對(duì)象。描述該方法允許精確添加或修改對(duì)象的屬性。描述符必須是兩種形式之一不能同時(shí)是兩者。可以是任何有效的值數(shù)值,對(duì)象,函數(shù)等。該方法返回值被用作屬性值。該方法將接受唯一參數(shù),并將該參數(shù)的新值分配給該屬性。 Object.defineProperties() Object.defineProperty() 方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性,或者修改一個(gè)對(duì)象的現(xiàn)有屬性...
摘要:函數(shù)是對(duì)象理解函數(shù)是對(duì)象,是準(zhǔn)確理解函數(shù)的第一步。在中,函數(shù)對(duì)象和其他對(duì)象一樣,均被視為一等公民。當(dāng)函數(shù)執(zhí)行完畢,其執(zhí)行環(huán)境從棧中彈出并銷毀。此時(shí)的函數(shù)充當(dāng)構(gòu)造器的角色。調(diào)用函數(shù)對(duì)象的方法并將結(jié)果賦給。 函數(shù)是javascript中最重要的內(nèi)容,也是其相對(duì)其他語(yǔ)言來(lái)說(shuō)在設(shè)計(jì)上比較有意思的地方。javascript許多高級(jí)特性也或多或少和函數(shù)相關(guān)。本文將以函數(shù)為中心,對(duì)函數(shù)的各個(gè)關(guān)鍵知識(shí)...
摘要:設(shè)計(jì)模式是以面向?qū)ο缶幊虨榛A(chǔ)的,的面向?qū)ο缶幊毯蛡鹘y(tǒng)的的面向?qū)ο缶幊逃行┎顒e,這讓我一開(kāi)始接觸的時(shí)候感到十分痛苦,但是這只能靠自己慢慢積累慢慢思考。想繼續(xù)了解設(shè)計(jì)模式必須要先搞懂面向?qū)ο缶幊蹋駝t只會(huì)讓你自己更痛苦。 JavaScript 中的構(gòu)造函數(shù) 學(xué)習(xí)總結(jié)。知識(shí)只有分享才有存在的意義。 是時(shí)候替換你的 for 循環(huán)大法了~ 《小分享》JavaScript中數(shù)組的那些迭代方法~ ...
摘要:原型中聲明的屬性和對(duì)象自帶的屬性原型中聲明的屬性和對(duì)象自帶的屬性其實(shí)這些屬性也是在原型中的可以認(rèn)為是帶有特性的,無(wú)法被刪除。注意內(nèi)置對(duì)象的一些屬性擁有內(nèi)部屬性,因此不能被刪除特殊的變量活化對(duì)象的屬性擁有任何函數(shù)實(shí)例的返回形參長(zhǎng)度屬性也擁有。 http://bubkoo.com/2014/01/23/... 原型中聲明的屬性和對(duì)象自帶的屬性 ==原型 prototype 中聲明的屬性和對(duì)...
閱讀 3998·2021-09-23 11:51
閱讀 3134·2021-09-22 15:59
閱讀 1007·2021-09-09 11:37
閱讀 2158·2021-09-08 09:45
閱讀 1341·2019-08-30 15:54
閱讀 2152·2019-08-30 15:53
閱讀 557·2019-08-29 12:12
閱讀 3362·2019-08-29 11:15