让你完全理解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)进行修改的
在类的普通方法中不可以被修改的哈！
复制代码