欢迎光临
我的个人博客网站

让你彻底理解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 = '大可爱' 

让你彻底理解TypeScript中的readonly

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('小可爱'); 

让你彻底理解TypeScript中的readonly

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)进行修改的 在类的普通方法中不能够被修改的哈! 
赞(0) 打赏
未经允许不得转载:张拓的天空 » 让你彻底理解TypeScript中的readonly
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏