js中g(shù)etter和setter用法實(shí)例分析
本文實(shí)例講述了js中g(shù)etter和setter用法。分享給大家供大家參考，具體如下：
在學(xué)習(xí)Vue計(jì)算屬性時(shí)，有一句“計(jì)算屬性默認(rèn)只有 getter ，不過(guò)在需要時(shí)你也可以提供一個(gè) setter”。
getter和setter到底是什么？于是我查找了資料：
在Es5中可以使用getter和setter部分改寫(xiě)默認(rèn)操作，但是只能應(yīng)用在單個(gè)屬性上，無(wú)法應(yīng)用在整個(gè)對(duì)象上。getter是一個(gè)隱藏函數(shù)，會(huì)在獲取屬性值時(shí)調(diào)用。setter也是一個(gè)隱藏屬性，會(huì)在設(shè)置屬性值時(shí)調(diào)用。
例子：
var myObject = {
get a(){
return 2
}
};
Object.defineProperty(
myObject, //目標(biāo)對(duì)象
"b", //屬性名
{ //描述符
//給b設(shè)置一個(gè)getter
get:function(){
return this.a*2
},
//確保b會(huì)出現(xiàn)在對(duì)象的屬性列表中
enumerable:true
}
);
console.log(myObject.a) //2
console.log(myObject.b) //4
這里使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun，測(cè)試結(jié)果如下：
不管是對(duì)象文字語(yǔ)法中的get a( ) { ...... }，還是defineProperty(......)中的顯式定義，二者都會(huì)在對(duì)象中創(chuàng)建一個(gè)不包含值的屬性，對(duì)于這個(gè)屬性的訪(fǎng)問(wèn)會(huì)自動(dòng)調(diào)用一個(gè)隱藏函數(shù)，它的返回值會(huì)被當(dāng)作屬性訪(fǎng)問(wèn)的返回值。（也就是說(shuō)myObject.a不用加執(zhí)行括號(hào)，vue中計(jì)算屬性默認(rèn)有getter，調(diào)用計(jì)算屬性不用在后面加"( )"）
var obj = {
//給a定義一個(gè)getter
get a(){
return 2;
}
};
obj.a = 3;
console.log(obj.a); //2
使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun，測(cè)試結(jié)果如下：
由于對(duì)a只定義了getter，所以對(duì)a的set操作會(huì)忽略賦值操作，不會(huì)拋錯(cuò)。而且即便有合法的setter，由于我們自定義的getter只會(huì)返回2，所以set操作是沒(méi)有意義的。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript常用函數(shù)技巧匯總》、《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?getter?setter金字塔???????
- JavaScript對(duì)象訪(fǎng)問(wèn)器Getter及Setter原理解析
- 淺談JS對(duì)象添加getter與setter的5種方法
- JavaScript的setter與getter方法
- Javascript中的getter和setter初識(shí)
- JavaScript中setter和getter方法介紹
- JavaScript之Getters和Setters 平臺(tái)支持等詳細(xì)介紹
- JavaScript學(xué)習(xí)筆記之取值函數(shù)getter與取值函數(shù)setter詳解
相關(guān)文章
JavaScript實(shí)現(xiàn)省市聯(lián)動(dòng)效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)省市聯(lián)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
TypeScript中type和interface的區(qū)別及注意事項(xiàng)
type的類(lèi)型別用可以用戶(hù)其他的類(lèi)型,比如聯(lián)合類(lèi)型、元祖類(lèi)型、基本類(lèi)型,interface不行,下面這篇文章主要給大家介紹了關(guān)于TypeScript中type和interface的區(qū)別及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了JavaScript 拖拉時(shí)間之drag案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
使用JS監(jiān)聽(tīng)鍵盤(pán)按下事件（keydown event）
這篇文章主要介紹了使用JS監(jiān)聽(tīng)鍵盤(pán)按下事件（keydown event），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
js 毫秒轉(zhuǎn)天時(shí)分秒的實(shí)例
下面小編就為大家分享一篇js 毫秒轉(zhuǎn)天時(shí)分秒的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
弱類(lèi)型語(yǔ)言javascript中 a,b 的運(yùn)算實(shí)例小結(jié)
這篇文章主要介紹了弱類(lèi)型語(yǔ)言javascript中 a,b 的運(yùn)算,結(jié)合實(shí)例形式總結(jié)分析了js閉包函數(shù)中布爾值與字符串的a，b運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
JavaScript 中調(diào)用 Kotlin 方法實(shí)例詳解
這篇文章主要介紹了JavaScript 中調(diào)用 Kotlin 方法實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了JS如何尋找數(shù)組中心索引過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
JS對(duì)象屬性的檢測(cè)與獲取操作實(shí)例分析
這篇文章主要介紹了JS對(duì)象屬性的檢測(cè)與獲取操作,結(jié)合實(shí)例形式分析了JS針對(duì)ES5、ES6實(shí)現(xiàn)對(duì)象屬性的檢測(cè)與獲取常見(jiàn)操作技巧,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了微信小程序批量上傳圖片到七牛,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12