一、寫(xiě)在前面

第一天

寫(xiě)在前面，先看幾段代碼，用你的大腦編譯運(yùn)行一下試試？ No errors, no warnings!

const config = new Config()
config.version = '1.0.0'
console.log(config.version)

乍一看，這代碼會(huì)打印 1.0.0，于是跑一下試試？

于是打開(kāi) Config 類(lèi)看看，好家伙

export class Config {
  private _version!: string

  public get version(): string {
    return this._version
  }

  public set version(value: string) {
    this._version = '莫挨勞資'
  }
}

原來(lái)是 getter/setter 啊！這玩意我熟！原來(lái) config.version = '1.0.0' 不是給 Config 的 version 字段賦值，而是調(diào)用了一個(gè) version 的 set 方法。

這點(diǎn)我可是很不喜歡的，這已經(jīng)讓人產(chǎn)生了心智負(fù)擔(dān)，賦值、方法調(diào)用傻傻分不清楚，還得看了實(shí)現(xiàn)才知道。

第二天

你再問(wèn)我上面的問(wèn)題，我可不敢拍著胸脯說(shuō)答案了。

于是第二個(gè)問(wèn)題又來(lái)了

const user = new User()
user.name = '彭于晏'
user.age = 33
user.length = '15cm'
console.log(JSON.stringify(user))

憑我三十余年生活經(jīng)驗(yàn)，這不是在序列化JSON到字符串嗎？分分鐘在腦海里編譯運(yùn)行，肯定輸出這個(gè)?。?/p>

{"name":"彭于晏","age":33,"length":"15cm"}

因?yàn)樽蛱焐袭?dāng)了，今天還是驗(yàn)證跑一下看看結(jié)果：

額，這是什么時(shí)候走漏的風(fēng)聲？

表示不服，再一次打開(kāi) User 類(lèi)看看究竟，不看不知道，一看好家伙～

export class User {
  /**
   * # 昵稱(chēng)
   */
  private nickname!: string

  public get name(): string {
    return this.nickname
  }

  public set name(value: string) {
    this.nickname = 'Hamm'
  }

  /**
   * # 年齡
   */
  private year!: number

  public get age(): number {
    return this.year
  }

  public set age(value: number) {
    this.year = 22
  }

  /**
   * # 長(zhǎng)度
   */
  private len!: string

  public get length(): string {
    return this.len
  }

  public set length(value: string) {
    this.len = `${parseInt(value.replace('cm', '')) + 3}cm`
  }
}

這誰(shuí)干的！干得漂亮?。?！

以上劇情純屬事實(shí)，如有雷同，你也很棒！

二、我不太喜歡Getter和Setter

1. vscode自動(dòng)重構(gòu)的屬性名帶下劃線

vscode 提供了屬性一鍵自動(dòng)生成 getter/setter，為了保持屬性名和方法名不重復(fù)，于是會(huì)自動(dòng)生成一個(gè)屬性名前面加下劃線的新屬性，然后將原屬性干掉并生成 get set 兩個(gè)方法。

生成的最終結(jié)果如下圖

雖然在生成過(guò)程中可以新起一個(gè)自定義屬性名，但我真的很煩，如果使用默認(rèn)，我的 eslint 規(guī)則又會(huì)認(rèn)為 屬性名不符合規(guī)范。。。

2. 調(diào)用方的心智負(fù)擔(dān)

如下面之前貼過(guò)的代碼：

const config = new Config()
config.version = '1.0.0'
console.log(config.version)

在不閱讀 Config 類(lèi)的情況下，會(huì)主觀認(rèn)為 config.version = "1.0.0" 是在給 屬性賦值，而調(diào)用 let version = config.version 會(huì)認(rèn)為是將剛才賦的值取出來(lái)使用。

3. Get/Set方法和普通方法區(qū)別對(duì)待

在有 private protected public 等訪問(wèn)修飾符的情況下，類(lèi)本身有 屬性、方法、構(gòu)造 就已經(jīng)足夠滿足需求了，這里非得上一個(gè) get set 連寫(xiě)法都要區(qū)別對(duì)待的特殊方法形式，構(gòu)造方法 constructor 表示第一個(gè)不服，勞資都沒(méi)特殊對(duì)待，憑什么它倆要特殊對(duì)待？

4. 我理解的屬性

屬性應(yīng)該是一個(gè)類(lèi)上最基礎(chǔ)的最終數(shù)據(jù)存儲(chǔ)，設(shè)置到屬性上的值是什么，那取出來(lái)的值也一定得是什么：

老張，我這瓶水放你這，一會(huì)我來(lái)拿。

這里我其實(shí)是調(diào)用了老張的一個(gè)賦值。所以一會(huì)回來(lái)拿到的水，還是那瓶水：

const store = new Store()
store.water = "哇哈哈"

// a few moments later

console.log(store.water) // 哇哈哈

所以，上面的輸出一定得是 哇哈哈 才合理, 第一天碰到的問(wèn)題，就不應(yīng)該存在。

5. 我理解的方法

方法應(yīng)該是一個(gè)類(lèi)上的 委托事項(xiàng)流程 的整合體，不管是普通方法，還是get/set，甚至是 構(gòu)造方法。

只是構(gòu)造方法比較特殊，也應(yīng)該是整個(gè)類(lèi)中唯一的特殊。

get / set 方法都應(yīng)該只是從規(guī)范上形成的一些約定俗成的方法，而且既然是方法，get / set 的調(diào)用都應(yīng)該加上 括號(hào) ()，才會(huì)便于理解。而且方法名和屬性名也沒(méi)有一定不重復(fù)的限定。

三、Getter/Setter的優(yōu)勢(shì)

簡(jiǎn)單說(shuō)一些吧。

1. 數(shù)據(jù)攔截

利用 get set 方法來(lái)做數(shù)據(jù)攔截，這個(gè)點(diǎn)這篇文章中不過(guò)多講，可以參考一些前端框架的雙向數(shù)據(jù)綁定實(shí)現(xiàn)來(lái)學(xué)習(xí)。

2. 數(shù)據(jù)轉(zhuǎn)換

在前后端數(shù)據(jù)轉(zhuǎn)換時(shí)，除了我們之前使用的 基于裝飾器-我是這么處理TypeScript項(xiàng)目數(shù)據(jù)轉(zhuǎn)換的 之外，使用 get set 來(lái)做數(shù)據(jù)轉(zhuǎn)換可能也會(huì)是一個(gè)很棒的方式（當(dāng)然，屬性名 和 get/set 不能重復(fù)的問(wèn)題，還可以再思考思考）。

以上就是TypeScript中Getter/Setter用法詳解的詳細(xì)內(nèi)容，更多關(guān)于TypeScript Getter/Setter的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論