ts 类中的修饰符-Toy模板网

这篇具有很好参考价值的文章主要介绍了ts 类中的修饰符。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、修饰符是什么

修饰符：类中的 成员的修饰符，主要是描述类中的成员（属性，构造方法，方法）的 可访问性
类中的成员都有自己的 默认修饰符 public
修饰符有哪几种？
- public：公共的，任何位置都可以访问
- private：私有的，只有 自身内部可以访问，外部、子类中都无法访问该成员数据
- protected：受保护的，自身内部和子类中 可以访问，外部无法访问
- readonly： 只读，仅可在构造函数中修改
- static：静态的，修饰属性、普通方法（非构造函数）
  - 修饰后被称为 静态成员
  - 静态成员 在使用时通过 类名.静态成员 这种语法来调用的，而不是通过 this实例（实例化对象）

二、通过例子来理解以上用法

1、public

外部、内部、子类内部 都可访问

// 定义一个类
class Person {
  public name: string
  constructor(name: string) {
    this.name = name
  }
  eat () {
    // 内部访问
    console.log('eat', this.name)
  }
}

// 子类
class Student extends Person {
  constructor (name: string) {
    super(name)
  }

  play () {
    // 子类内部访问
    console.log('play', this.name)
  }
}

const person = new Person('小明')
// 内部，可访问
person.eat()
// 外部，可访问
console.log('person.name', person.name)

const stu = new Student('小红')
// 子类内部，可访问
stu.eat()
stu.play()
// 外部，可访问
console.log('stu.name', stu.name)

2、private

只有内部 可访问，外部、子类内部都不可访问

// 定义一个类
class Person {
  private name: string
  constructor(name: string) {
    this.name = name
  }
  eat () {
    // 内部访问
    console.log('eat', this.name)
  }
}
// 子类
class Student extends Person {
  constructor (name: string) {
    super(name)
  }
  play () {
    // 子类内部，不可访问
    console.log('play', this.name)
  }
}

// name 为 private 时，只有内部可访问，外部、子类内部都不可访问
const person2 = new Person('小明')
// 内部，可访问
person2.eat()
// 外部：不可访问
console.log('person2.name', person2.name)

const stu2 = new Student('小红')
// 子类内部，不可访问
stu2.eat()
stu2.play()
// 外部：不可访问
console.log('stu2.name', stu2.name)

3、protected

内部、子类内部 可访问，外部不可访问

// 定义一个类
class Person {
 protected name: string
 constructor(name: string) {
   this.name = name
 }
 eat () {
   // 内部访问
   console.log('eat', this.name)
 }
}
// 子类
class Student extends Person {
 constructor (name: string) {
   super(name)
 }
 play () {
   // 子类内部， 可访问
   console.log('play', this.name)
 }
}

const person3 = new Person('小明')
// 内部，可访问
person3.eat()
// 外部：不可访问
console.log('person3.name', person3.name)

const stu3 = new Student('小红')
// 子类内部，可访问
stu3.eat()
stu3.play()
// 外部：不可访问
console.log('stu2.name', stu3.name)

4、readonly

只读，仅在 构造函数 中可以被修改

class Person {
  // 可读可写
  name: string

  // 只读
  readonly sex: string
  readonly age: number = 16

  constructor (name: string, sex: string) {
    // 构造函数中，可以修改被设置为 readonly 的属性
    this.name = name
    this.sex = sex
    this.age = 18
  }

  sayName () {
    // 可读可写
    this.name = '猪猪'
  }

  saySex () {
    // 类中的普通方法，不能修改被设置为 readonly 的属性（编译报错）
    // this.sex = '中性'
  }
}

5、static

修饰 属性、普通方法，使用时通过 类名 调用文章来源地址https://www.toymoban.com/news/detail-473232.html

class Person {
  // 普通属性
  nameOwn: string
  // 静态属性
  static gender: string = '女'

  // 构造函数前不能添加 static
  constructor (name: string) {
    this.nameOwn = name

    // 访问静态属性，需要通过 【类名.属性】访问
    console.log(this.nameOwn, Person.gender)
  }

  // 普通方法
  sayHi () {
    console.log('hello你们好')
  }

  // 静态方法
  static sayStatic () {
    console.log(Person.gender)
  }
}
// 实例化对象
const per = new Person('佩奇')
// 访问普通方法，通过实例
per.sayHi()
// 访问静态方法，要通过 【类名.方法】访问
Person.sayStatic()