以前在寫項(xiàng)目過(guò)程一直都沒(méi)有使用過(guò)Javascript的setter與getter方法，所以對(duì)其是一種要懂不懂的概念；今天看書看到這個(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

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

有關(guān)Vue.js如何實(shí)現(xiàn)無(wú)限滾動(dòng)加載

Chrome Firefox 自帶調(diào)試工具調(diào)試（詳細(xì)教程）

如何使用JS編寫Ajax請(qǐng)求函數(shù)

使用vue-cli+webpack如何搭建vue

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com