讓你完全理解TypeScript中的readonly

本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！

1.readonly的講解

readonly修飾符，首先是一個關鍵字
對類中的屬性成員進行修飾
修飾以後，該屬性成員就不能修改了。
只可以進行訪問
在構造函數中是能夠對只讀屬性(readonly)進行修改的
複製代碼

2.何時使用readonly

在不少時候，咱們對用戶登陸後；
會對用戶的信息進行存儲
這個時候咱們是容許在對值進行修改
就是說：一旦確認後就不可以再次進行修改就能夠使用readonly

需求:一旦實例化後，
就不可以對實例化的對象【name】屬性進行修改值。
看下面的代
複製代碼

3.readonly的基本使用

class Person {
    readonly name:  string
    constructor(name: string) {
        this.name=name
    }
    say() {
        console.log(`個人名字叫${this.name}`)
    }
}
let person = new Person('小可愛');
console.log(person);
// ps：這裏報錯了
person.name = '大可愛'
複製代碼

4.有新的發現

有細心的小夥伴可能發現了。
我在let person = new Person('小可愛');
這個時候並無報錯；
你不是說readonly修飾以後，該屬性成員就不能修改了。
爲啥構造函數中的就能夠去設置值了；
機智的小夥伴可能就會這樣去操做，
在類中的普通方法去修改被readonly的屬性
複製代碼

5.這樣能夠成功嗎？

class Person {
    readonly name:  string
    constructor(name: string) {
        this.name=name
    }
    say() {
        console.log(`個人名字叫${this.name}`)
    }
    //報錯了
    updtaName() {
        this.name='張三'
    }
}
let person = new Person('小可愛');
複製代碼

6.readonly 修飾參數屬性

構造函數中的name參數，
一旦使用readonly進行修飾後，
那麼該name參數就能夠叫作參數屬性

構造函數中的name參數,一旦使用readonly進行修飾後,
那麼Person中就有了一個name屬性成員

對上面這一句話的講解
{ 原本咱們是沒有name屬性的在Person類中，那爲啥能夠this.name=name  }
也就是說 Person中就有了一個name屬性成員；
所以咱們才能夠 this.name=name
複製代碼

class Person {
    constructor(readonly name: string='大可愛') {
        this.name=name
    }
}
let person = new Person('小可愛');

console.log(person)
// Person { name: '小可愛' }
// 經過這個輸出語句
// 咱們能夠說明
// 構造函數中的name參數,一旦使用readonly進行修飾後,
//那麼Person中就有了一個name屬性成員

console.log( person.name)
//輸出 【小可愛】
複製代碼

7.能夠省略構造中的this.name=name

class Person {
    constructor(readonly name: string='大可愛') {
    }
}
let person = new Person('小可愛');
console.log(person)
//輸出 Person { name: '小可愛' }
//咱們發現與上面的效果同樣
複製代碼

8.readonly的總結

經過上面的栗子，
咱們知道
readonly修飾符，首先是一個關鍵字
對類中的屬性成員進行修飾
修飾以後，該屬性成員就不能修改了。
只可以進行訪問
在構造函數中是能夠對只讀屬性(readonly)進行修改的
在類的普通方法中不可以被修改的哈！
複製代碼