盤點(diǎn)JavaScript中g(shù)etter()和setter()函數(shù)的使用
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
大家好，我是進(jìn)階學(xué)習(xí)者。
一、前言
有兩種類型的屬性。
第一種是 數(shù)據(jù)屬性。已經(jīng)知道如何使用它們了。到目前為止，使用過的所有屬性都是數(shù)據(jù)屬性。
第二種類型的屬性是新東西。它是 訪問器屬性（accessor properties）。它們本質(zhì)上是用于獲取和設(shè)置值的函數(shù)，但從外部代碼來看就像常規(guī)屬性。
二、Getter 和 setter
訪問器屬性由 “getter” 和 “setter” 方法表示。在對象字面量中，它們用 get和 set表示：
let obj = {get propName() { // 當(dāng)讀取 obj.propName 時(shí)，getter 起作用}, set propName(value) {// 當(dāng)執(zhí)行 obj.propName = value 操作時(shí)，setter 起作用}};
當(dāng)讀取 obj.propName時(shí)，getter 起作用，當(dāng) obj.propName被賦值時(shí)，setter 起作用。
例：
有一個(gè)具有 name和 surname屬性的對象 user：添加一個(gè) fullName屬性，該屬性值應(yīng)該為 "John Smith"。當(dāng)然，不想復(fù)制粘貼已有的信息，因此可以使用訪問器來實(shí)現(xiàn)：
let user = {name: "John",surname: "Smith",get fullName() {return `${this.name} ${this.surname}`;}};alert(user.fullName); // John Smith
從外表看，訪問器屬性看起來就像一個(gè)普通屬性。
這就是訪問器屬性的設(shè)計(jì)思想。不以函數(shù)的方式 調(diào)用 user.fullName，正常 讀取 它：getter 在幕后運(yùn)行。
截至目前，fullName只有一個(gè) getter。如果嘗試賦值操作 user.fullName=，將會(huì)出現(xiàn)錯(cuò)誤：
let user = {get fullName() {return `...`;}};user.fullName = "Test"; // Error（屬性只有一個(gè) getter）
讓通過為 user.fullName添加一個(gè) setter 來修復(fù)它：
let user = {name: "John",surname: "Smith",get fullName() {return `${this.name} ${this.surname}`;},set fullName(value) {[this.name, this.surname] = value.split(" ");}};// set fullName 將以給定值執(zhí)行user.fullName = "Alice Cooper";alert(user.name); // Alicealert(user.surname); // Cooper
現(xiàn)在，就有一個(gè)“虛擬”屬性。它是可讀且可寫的。
三、訪問器描述符
例：
要使用 defineProperty創(chuàng)建一個(gè) fullName訪問器，可以使用 get和 set來傳遞描述符：
let user = {name: "John",surname: "Smith"};Object.defineProperty(user, 'fullName', {get() {return `${this.name} ${this.surname}`;},set(value) {[this.name, this.surname] = value.split(" ");}});alert(user.fullName); // John Smithfor(let key in user) alert(key); // name, surname
注：
一個(gè)屬性要么是訪問器（具有 get/set方法），要么是數(shù)據(jù)屬性（具有 value），但不能兩者都是。
四、更聰明的 getter/setter
Getter/setter 可以用作“真實(shí)”屬性值的包裝器，以便對它們進(jìn)行更多的控制。
例：
如果想禁止太短的 user的 name，可以創(chuàng)建一個(gè) setter name，并將值存儲(chǔ)在一個(gè)單獨(dú)的屬性 _name中：
let user = {get name() {return this._name;},set name(value) {if (value.length < 4) {alert("Name is too short, need at least 4 characters");return;}this._name = value;}};user.name = "Pete";alert(user.name); // Peteuser.name = ""; // Name 太短了……
注：
從技術(shù)上講，外部代碼可以使用 user._name直接訪問 name。但是，這兒有一個(gè)眾所周知的約定，即以下劃線 "開頭的屬性是內(nèi)部屬性，不應(yīng)該從對象外部進(jìn)行訪問。
五、兼容性
訪問器的一大用途是，它們允許隨時(shí)通過使用 getter 和 setter 替換“正常的”數(shù)據(jù)屬性，來控制和調(diào)整這些屬性的行為。
開始使用數(shù)據(jù)屬性 name和 age來實(shí)現(xiàn) user 對象：
function User(name, age) {this.name = name;this.age = age;}let john = new User("John", 25);alert( john.age ); // 25
但情況可能會(huì)發(fā)生變化。
可能會(huì)決定存儲(chǔ) birthday，而不是 age，因?yàn)樗_，更方便：
現(xiàn)在應(yīng)該如何處理仍使用 age屬性的舊代碼呢？
可以嘗試找到所有這些地方并修改它們，但這會(huì)花費(fèi)很多時(shí)間，而且如果其他很多人都在使用該代碼，那么可能很難完成所有修改。
為 age添加一個(gè) getter 來解決這個(gè)問題：
function User(name, birthday) {this.name = name;this.birthday = birthday;// 年齡是根據(jù)當(dāng)前日期和生日計(jì)算得出的Object.defineProperty(this, "age", {get() {let todayYear = new Date().getFullYear();return todayYear - this.birthday.getFullYear();}});}let john = new User("John", new Date(1992, 6, 1));alert(john.birthday); // birthday 是可訪問的alert(john.age); // ……age 也是可訪問的
現(xiàn)在舊的代碼也可以工作，而且還擁有了一個(gè)不錯(cuò)的附加屬性。
六、總結(jié)
本文基于JavaScript基礎(chǔ)，介紹了getter 和 setter函數(shù)的使用。對于其中的屬性，通過案例的樣式，運(yùn)行效果圖的展示，進(jìn)行詳細(xì)的講解。同時(shí)拓展相對于的內(nèi)容，希望能夠幫助你更好的理解。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡單，希望對你學(xué)習(xí)有幫助。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請?jiān)诤笈_(tái)回復(fù)【入群】
萬水千山總是情，點(diǎn)個(gè)【在看】行不行