上篇講到可以用屬性描述符來對屬性做一些描述，以及用來描述屬性的四個屬性(value，configurable，enumerable，writable)。這篇講的存取器屬性就是在屬性描述符中配置get()和set()方法，配置這兩個方法之后，該屬性就不是一個普通屬性了。存取器屬性最大的意義，在于可以控制屬性的讀取和賦值。

如果一個屬性是存取器屬性，則讀取該屬性時，會運行get方法，將get方法得到的返回值作為屬性值，如果給該屬性賦值，則會運行set方法。舉個栗子來理解一下叭~

【例1】

const obj = {b:2 } Object.defineProperty(obj,'a',{get() {console.log("運行了屬性a的get函數")},set() {console.log("運行了屬性a的set函數")} }) obj.a = 10; console.log(obj.a)

【結果】可以看到，在對a進行賦值時，運行了set()，在訪問a時，運行了get()，且因為get函數沒有返回值，所以得到的值為undefined

要想實現上面的效果，即賦的值等于讀取到的值，可以借用第三參數，如下

const obj = {b:2 } Object.defineProperty(obj,'a',{get() {console.log("運行了屬性a的get函數");return obj._a;},set(val) {console.log("運行了屬性a的set函數");obj._a = val;} }) //以下代碼相當于set(10) obj.a = 10; console.log(obj.a);

?【結果】

【注】get函數不能傳參，set函數可以傳一個參數

【例2】小練習：輸入年齡，限定年齡范圍在0-200歲，且輸入必須為數字類型，輸出XX歲。

obj = {name: 'jwh' } Object.defineProperty(obj, 'age', {get() {return `${obj._age}歲`;},set(val) {if (typeof val !== "number") {throw new TypeError("年齡必須是一個數字");}if (val < 0) {val = 0;} else if (val > 200) {val = 200;}obj._age = val;} }) obj.age = 33; console.log(obj.age); obj.age = -10; console.log(obj.age); obj.age = 222; console.log(obj.age); obj.age = "aaa"; console.log(obj.age);

【結果】

總結

以上是生活随笔為你收集整理的JS —— 存取器属性get()和set()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。