快捷導(dǎo)航

JavaScript的setter與getter方法

更新時(shí)間：2017年11月29日 08:39:35 作者：hawk_zz

這篇文章主要為大家詳細(xì)介紹了JavaScript的setter與getter方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

以前在寫(xiě)項(xiàng)目過(guò)程一直都沒(méi)有使用過(guò)Javascript的setter與getter方法，所以對(duì)其是一種要懂不懂的概念；今天看書(shū)看到這個(gè)知識(shí)點(diǎn)，還是模模糊糊的，于是就打算研究研究；

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

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

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

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

上面的就是一個(gè)存取器屬性定義的最簡(jiǎn)單的方法，可以看出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方法是無(wú)參數(shù)，并且有返回值的；當(dāng)單獨(dú)設(shè)置getter方法時(shí)，只能獲取屬性值，無(wú)法更改其定義的屬性值的，保證了數(shù)據(jù)的安全性；

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

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

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

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

通過(guò)上面的代碼可以看出，其中this是指其對(duì)象（即代碼中的“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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用json對(duì)象轉(zhuǎn)化為key,value的對(duì)象數(shù)組
這篇文章主要介紹了使用json對(duì)象轉(zhuǎn)化為key，value的對(duì)象數(shù)組方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
前端如何控制并發(fā)請(qǐng)求舉例詳解
在項(xiàng)目中我們會(huì)遇到一次請(qǐng)求多個(gè)接口,當(dāng)所有請(qǐng)求結(jié)束后進(jìn)行操作,也會(huì)遇到多個(gè)請(qǐng)求（大量）同時(shí)進(jìn)行請(qǐng)求資源,這篇文章主要給大家介紹了關(guān)于前端如何控制并發(fā)請(qǐng)求舉例的相關(guān)資料,需要的朋友可以參考下
2024-09-09
一文搞懂如何避免JavaScript內(nèi)存泄漏
SPA的興起，促使我們更加關(guān)注與內(nèi)存相關(guān)的JavaScript編碼實(shí)踐。如果應(yīng)用使用的內(nèi)存越來(lái)越多，就會(huì)嚴(yán)重影響性能，甚至導(dǎo)致瀏覽器的崩潰。下面就來(lái)看看JavaScript中常見(jiàn)的內(nèi)存泄漏以及如何避免內(nèi)存泄漏
2022-05-05
JS如何設(shè)置iOS中微信瀏覽器的title
本文給大家分享js設(shè)置ios中微信瀏覽器中的title的解決方法，實(shí)現(xiàn)原理比較簡(jiǎn)單，對(duì)js微信瀏覽器title相關(guān)知識(shí)感興趣的朋友一起通過(guò)本文學(xué)習(xí)吧
2016-11-11
微信小程序?qū)崿F(xiàn)禁止分享代碼實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)禁止分享代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
讓alert不出現(xiàn)彈窗的兩種方法
這篇文章主要介紹了讓alert不出現(xiàn)彈窗的兩種方法,需要的朋友可以參考下
2014-05-05
你知道該如何捕獲js報(bào)錯(cuò)前的用戶行為嗎
這篇文章主要給大家介紹了該如何捕獲js報(bào)錯(cuò)前的用戶行為的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-06-06
簡(jiǎn)易的投票系統(tǒng)以及js刷票思路和方法
這篇文章主要介紹了簡(jiǎn)易的投票系統(tǒng)以及js刷票思路和方法，文章十分的詳盡，思路也很清晰，是篇非常不錯(cuò)的文章，這里推薦給大家，有需要的小伙伴可以參考下。
2015-04-04
Bootstrap每天必學(xué)之縮略圖與警示窗
Bootstrap每天必學(xué)之縮略圖與警示窗，對(duì)Bootstrap縮略圖與警示窗小編也了解的很少，希望通過(guò)這篇文章和大家更多的去學(xué)習(xí)Bootstrap縮略圖與警示窗，從中得到收獲。
2015-11-11
JS中實(shí)現(xiàn)淺拷貝和深拷貝的代碼詳解
JavaScript的變量中包含兩種類型的值：基本類型值和引用類型值，這篇文章主要介紹了JS中實(shí)現(xiàn)淺拷貝和深拷貝,需要的朋友可以參考下
2019-06-06