一、寫在前面

第一天

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

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

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

于是打開 Config 類看看，好家伙

export class Config {
  private _version!: string

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

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

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

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

第二天

你再問我上面的問題，我可不敢拍著胸脯說答案了。

于是第二個問題又來了

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

憑我三十余年生活經(jīng)驗，這不是在序列化JSON到字符串嗎？分分鐘在腦海里編譯運行，肯定輸出這個啊：

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

因為昨天上當了，今天還是驗證跑一下看看結(jié)果：

額，這是什么時候走漏的風聲？

表示不服，再一次打開 User 類看看究竟，不看不知道，一看好家伙～

export class User {
  /**
   * # 昵稱
   */
  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
  }

  /**
   * # 長度
   */
  private len!: string

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

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

這誰干的！干得漂亮?。?！

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

二、我不太喜歡Getter和Setter

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

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

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

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

2. 調(diào)用方的心智負擔

如下面之前貼過的代碼：

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

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

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

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

4. 我理解的屬性

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

老張，我這瓶水放你這，一會我來拿。

這里我其實是調(diào)用了老張的一個賦值。所以一會回來拿到的水，還是那瓶水：

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

// a few moments later

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

所以，上面的輸出一定得是 哇哈哈 才合理, 第一天碰到的問題，就不應該存在。

5. 我理解的方法

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

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

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

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

簡單說一些吧。

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

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

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

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

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

最新評論