本文實(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) //2console.log(myObject.b) //4

這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.VeVB.COm/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.VeVB.COm/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ì)有所幫助。