讓你徹底理解TypeScript中的readonly

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)進行修改的
在類的普通方法中不能夠被修改的哈！