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

如果一個(gè)屬性是存取器屬性，則讀取該屬性時(shí)，會(huì)運(yùn)行g(shù)et方法，將get方法得到的返回值作為屬性值，如果給該屬性賦值，則會(huì)運(yùn)行set方法。舉個(gè)栗子來理解一下叭~

【例1】

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

【結(jié)果】可以看到，在對(duì)a進(jìn)行賦值時(shí)，運(yùn)行了set()，在訪問a時(shí)，運(yùn)行了get()，且因?yàn)間et函數(shù)沒有返回值，所以得到的值為undefined

要想實(shí)現(xiàn)上面的效果，即賦的值等于讀取到的值，可以借用第三參數(shù)，如下

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

?【結(jié)果】

【注】get函數(shù)不能傳參，set函數(shù)可以傳一個(gè)參數(shù)

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

obj = {name: 'jwh' } Object.defineProperty(obj, 'age', {get() {return `${obj._age}歲`;},set(val) {if (typeof val !== "number") {throw new TypeError("年齡必須是一個(gè)數(shù)字");}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);

【結(jié)果】

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。