TypeScript教程(八)类的修饰符

来源:程序思维浏览:1801次
TypeScript教程类的修饰符
TypeScript类的使用方式和ES6类似,但是比ES6类的功能更加丰富,首先先看一下类的修饰符,在TypeScript中类的修饰符有public、private和protected这三个修饰符,接下来看一下这三个修饰符的说明:
  • public修饰的属性或方法是共有的,可以在任何地方被访问到,默认所有的属性或者方法都public的。
  • private修饰的属性或方法是私有的,不能在声明它的类外面访问,只能在本类内部访问使用。
  • protected修饰的属性或者方法是受保护的,它和private类似,唯一的区别是可以在继承的类中访问,比如父类的protected成员成为子类的protected成员,只允许子类成员访问。
接下来先看一下public修饰符的代码示例:

class Person{
         name="张三";//当一个类成员属性没有修饰的时候,外界是可以进行访问的,默认就是public进行修饰
         public score=100;
         //带有公共修饰符的成员方法
public say(){
            console.log("我的名字:"+this.name+"")
         }
}
let p=new Person();
console.log(p.name);//结果:张三
console.log(p.score)//结果:100
p.say();

定义成员属性或成员方法修饰符只需要在属性前面加上修饰符的关键字比如public score和public say(),这样score成员属性和say()成员方法就是public的,Person类的成员属性name没有任何修饰符默认为public的,如果成员方法say()没有任何修饰符默认也是public的,实例化Person对象并赋予变量p,使用p.name,p.score和p.say()可以在类的外面访问public的成员属性和成员方法,如果设置为private或protected在类的外面是不能访问的。

接下来看一下private修饰符的代码示例:

class Person{
    name="张三";//当一个类成员变量没有修饰的时候,外界是可以进行访问的,默认就是public进行修饰
    public score=100;
    private gender="男";//私有属性只能在类内部访问
    public say(){
         this.gender;//只能在类内部访问
        console.log("我的名字:"+this.name+",我的性别"+this.gender+"")
    }
}

在Person类声明修饰符为private的成员属性gender,这个属性只能在类内部访问,比如在say()成员方法中访问,不能在类的外面访问。
接下来看一下protected修饰符的代码示例:

class Person{
    name="张三";//当一个类成员变量没有修饰的时候,外界是可以进行访问的,默认就是public进行修饰
    public score=100;
    private gender="男";//私有属性只能在类内部访问
    protected height="175";//受保护的属性,可以在本类和子类访问,不能在外部访问
    public say(){
     this.gender;//只能在类内部访问
     this.height;//可以访问受保护的属性
        console.log("我的名字:"+this.name+",我的性别"+this.gender+"")
    }
}

//子类Child继承父类Person
class Child extends Person{
callParent(){       
        console.log(this.height);//访问父类中受保护的属性
    }
}

父类Person中height成员属性的修饰符为protected的,可以在类Person的say()成员方法中访问,也可以在子类Child中的callParent()方法中访问,private修饰的成员属性是不能在子类Child中访问的。
精品好课
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
收藏
扫一扫关注我们