這篇文章主要講解了“JavaScript的setter與getter方法的實(shí)例應(yīng)用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript的setter與getter方法的實(shí)例應(yīng)用”吧！

成都創(chuàng)新互聯(lián)是專業(yè)的陽西網(wǎng)站建設(shè)公司，陽西接單;提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行陽西網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

Javascript對象的屬性是由名字，值和一組特性構(gòu)成的。那么首先，來了解一下對象的兩種屬性：

數(shù)據(jù)屬性，我們經(jīng)常使用，應(yīng)該很熟悉
訪問器屬性，也稱存取器屬性

何為存取器屬性？就是一組獲取和設(shè)置值的函數(shù)。在ECMAScript5中，屬性值可以用一個(gè)或兩個(gè)方法設(shè)置，這兩個(gè)方法就是getter和setter；因此getter和setter定義的屬性被稱為存取器屬性。

var o = {
  get val(){
    /*函數(shù)體*/
    return ;
  },
  set val(n){
    /*函數(shù)體*/
  }
}

上面的就是一個(gè)存取器屬性定義的最簡單的方法，可以看出getter和setter方法其實(shí)就是取代function的一個(gè)函數(shù)。

var o = {
  a:3,
  get val(){
    return Math.pow(this.a,2);
  }
}

console.log(o.val);//9
o.val = 100;
console.log(o.val);//9

getter方法是無參數(shù)，并且有返回值的；當(dāng)單獨(dú)設(shè)置getter方法時(shí)，只能獲取屬性值，無法更改其定義的屬性值的，保證了數(shù)據(jù)的安全性；

var o = {
  a:3,
  set val(n){
    this.a = n;
  }
}

console.log(o.val);//undefined

setter方法是有參數(shù)，沒有返回值的；當(dāng)單獨(dú)設(shè)置setter方式時(shí)，是無法讀取屬性值的；

var o ={
  a:3,
  get val(){
    return Math.pow(this.a,n);
  },
  set val(n){
    this.a = Math.max(this.a,n);
  }
}

console.log(o.a);//3
console.log(o.val);//9
o.val = 10;
console.log(o.a);//10
console.log(o.val);//100

通過上面的代碼可以看出，其中this是指其對象（即代碼中的“o”）；

var o ={
   a:3,
  get val(){
    return Math.pow(this.a,n);
  },
  set val(n){
    this.a = Math.max(this.a,n);
  }
}

o.val = 10;
var foo = Object.create(o);
console.log(foo.val);//10
foo.val = 9;
console.log(foo.val);//10

另外，存取器屬性也是可以被繼承的；

感謝各位的閱讀，以上就是“JavaScript的setter與getter方法的實(shí)例應(yīng)用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript的setter與getter方法的實(shí)例應(yīng)用這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！