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
這里使用在線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è)屬性的訪問(wèn)會(huì)自動(dòng)調(diào)用一個(gè)隱藏函數(shù)，它的返回值會(huì)被當(dā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
使用在線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)容感興趣的讀者可查看本站專題：《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ì)有所幫助。
相關(guān)文章
取一個(gè)DOM元素的兄弟節(jié)點(diǎn),仿jQuery的siblings方法,用原生JS代碼完成2011-08-08
這篇文章主要介紹了繼承行為在 ES5 與 ES6 中的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue 集成騰訊地圖實(shí)現(xiàn)api(附DEMO)
之前項(xiàng)目使用騰訊地圖，不利于開(kāi)發(fā)者查找，這篇文章主要介紹了vue 集成騰訊地圖實(shí)現(xiàn)api，具有一定的參考價(jià)值，感興趣的可以了解下2021-07-07
一個(gè)用js實(shí)現(xiàn)過(guò)濾重復(fù)字符的函數(shù)
一個(gè)用js實(shí)現(xiàn)過(guò)濾重復(fù)字符的函數(shù)...2007-08-08
JS使用數(shù)組實(shí)現(xiàn)的隊(duì)列功能示例
這篇文章主要介紹了JS使用數(shù)組實(shí)現(xiàn)的隊(duì)列功能,結(jié)合實(shí)例形式分析了javascript基于數(shù)組的隊(duì)列定義、元素添加、讀取等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)水平垂直滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
JavaScript實(shí)現(xiàn)擦玻璃效果分析鼠標(biāo)移動(dòng)響應(yīng)時(shí)間粒度問(wèn)題
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)擦玻璃效果分析鼠標(biāo)移動(dòng)響應(yīng)時(shí)間粒度問(wèn)題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
使用BootStrap建立響應(yīng)式網(wǎng)頁(yè)——通欄輪播圖（carousel）
這篇文章主要介紹了使用BootStrap建立響應(yīng)式網(wǎng)頁(yè)通欄輪播圖（carousel）的相關(guān)資料,需要的朋友可以參考下2016-12-12
JavaScript構(gòu)造函數(shù)原理及實(shí)現(xiàn)流程解析
這篇文章主要介紹了JavaScript構(gòu)造函數(shù)原理及實(shí)現(xiàn)流程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
Javascript中實(shí)現(xiàn)String.startsWith和endsWith方法
這篇文章主要介紹了Javascript中實(shí)現(xiàn)String.startsWith和endsWith方法,這兩個(gè)很好用的方法在JS中沒(méi)有,本文就自己編碼實(shí)現(xiàn)了這兩個(gè)方法,需要的朋友可以參考下2015-06-06