js中getter和setter用法實例分析
本文實例講述了js中getter和setter用法。分享給大家供大家參考，具體如下：
在學習Vue計算屬性時，有一句“計算屬性默認只有 getter ，不過在需要時你也可以提供一個 setter”。
getter和setter到底是什么？于是我查找了資料：
在Es5中可以使用getter和setter部分改寫默認操作，但是只能應用在單個屬性上，無法應用在整個對象上。getter是一個隱藏函數(shù)，會在獲取屬性值時調用。setter也是一個隱藏屬性，會在設置屬性值時調用。
例子：
var myObject = {
get a(){
return 2
}
};
Object.defineProperty(
myObject, //目標對象
"b", //屬性名
{ //描述符
//給b設置一個getter
get:function(){
return this.a*2
},
//確保b會出現(xiàn)在對象的屬性列表中
enumerable:true
}
);
console.log(myObject.a) //2
console.log(myObject.b) //4
這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun，測試結果如下：
不管是對象文字語法中的get a( ) { ...... }，還是defineProperty(......)中的顯式定義，二者都會在對象中創(chuàng)建一個不包含值的屬性，對于這個屬性的訪問會自動調用一個隱藏函數(shù)，它的返回值會被當作屬性訪問的返回值。（也就是說myObject.a不用加執(zhí)行括號，vue中計算屬性默認有getter，調用計算屬性不用在后面加"( )"）
var obj = {
//給a定義一個getter
get a(){
return 2;
}
};
obj.a = 3;
console.log(obj.a); //2
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun，測試結果如下：
由于對a只定義了getter，所以對a的set操作會忽略賦值操作，不會拋錯。而且即便有合法的setter，由于我們自定義的getter只會返回2，所以set操作是沒有意義的。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript常用函數(shù)技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
取一個DOM元素的兄弟節(jié)點,仿jQuery的siblings方法,用原生JS代碼完成2011-08-08
這篇文章主要介紹了繼承行為在 ES5 與 ES6 中的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
之前項目使用騰訊地圖，不利于開發(fā)者查找，這篇文章主要介紹了vue 集成騰訊地圖實現(xiàn)api，具有一定的參考價值，感興趣的可以了解下2021-07-07
一個用js實現(xiàn)過濾重復字符的函數(shù)...2007-08-08
這篇文章主要介紹了JS使用數(shù)組實現(xiàn)的隊列功能,結合實例形式分析了javascript基于數(shù)組的隊列定義、元素添加、讀取等相關操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)水平垂直滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
JavaScript實現(xiàn)擦玻璃效果分析鼠標移動響應時間粒度問題
這篇文章主要為大家介紹了JavaScript實現(xiàn)擦玻璃效果分析鼠標移動響應時間粒度問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
使用BootStrap建立響應式網頁——通欄輪播圖（carousel）
這篇文章主要介紹了使用BootStrap建立響應式網頁通欄輪播圖（carousel）的相關資料,需要的朋友可以參考下2016-12-12
JavaScript構造函數(shù)原理及實現(xiàn)流程解析
這篇文章主要介紹了JavaScript構造函數(shù)原理及實現(xiàn)流程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
Javascript中實現(xiàn)String.startsWith和endsWith方法
這篇文章主要介紹了Javascript中實現(xiàn)String.startsWith和endsWith方法,這兩個很好用的方法在JS中沒有,本文就自己編碼實現(xiàn)了這兩個方法,需要的朋友可以參考下2015-06-06