Class Public Instance Fields

  1. {
  2. // Class Public Instance Fields 公共实例字段
  3. class ES13Class {
  4. name = 'wudi'
  5. age: unknown
  6. sex: unknown
  7. }
  8. const es13class = new ES13Class()
  9. console.log('Class Public Instance Fields: ', es13class.name) // Class Public Instance Fields: wudi
  10. console.log('Class Public Instance Fields: ', es13class.age) // Class Public Instance Fields: undefined
  11. console.log('Class Public Instance Fields: ', es13class.sex) // Class Public Instance Fields: undefined
  12. }

Private Instance Fields

Private instance methods and accessors

  1. {
  2. // Private Instance Fields 私有实例字段
  3. // Private instance methods and accessors 私有实例方法和访问器
  4. class ES13Class {
  5. #name: string // 私有字段
  6. getName: string
  7. constructor(name: string) {
  8. this.#name = name
  9. this.getName = name
  10. }
  11. setName() {
  12. return `My name is: ${this.#getNameFn()}`
  13. }
  14. #getNameFn() {
  15. return this.#name
  16. }
  17. }
  18. const es13class = new ES13Class('wudi')
  19. console.log('Private instance methods and accessors: ', es13class.setName()) // "Private instance methods and accessors: My name is: wudi"
  20. console.log('Private instance methods and accessors: ', es13class.getName) // "Private instance methods and accessors: wudi"
  21. // console.log('Private instance methods and accessors: ', es13class.#getNameFn()) // error
  22. // TS18013: Property '#getNameFn' is not accessible outside class 'ES13Class' because it has a private identifier.
  23. // console.log('Private instance methods and accessors: ', es13class1.#name) // error
  24. // TS18013: Property '#name' is not accessible outside class 'Info' because it has a private identifier.
  25. }

Static class fields and methods

  1. {
  2. // Static class fields and methods 静态公共字段和方法
  3. class ES13Class {
  4. #num = 0
  5. static baseNum = 100
  6. // 静态方法可以通过 this 访问静态字段
  7. static baseNumFn = () => this.baseNum * 2
  8. }
  9. // 静态字段和方法通过类本身访问
  10. console.log('Static class fields and methods: ', ES13Class.baseNum) // Static class fields and methods: 100
  11. console.log('Static class fields and methods: ', ES13Class.baseNumFn()) // Static class fields and methods: 200
  12. // 实例不能访问静态字段和方法
  13. const es13class = new ES13Class()
  14. // console.log(es13class.baseNum) // error
  15. // TS2576: Property 'baseNum' does not exist on type 'ES13Class'. Did you mean to access the static member 'ES13Class.baseNumFn' instead?
  16. }

Class Static Block 类静态初始化块

  1. {
  2. // Class Static Block 类静态初始化块
  3. let getBaseNum: () => void
  4. let getDoubleBaseNum
  5. class ES13Class {
  6. static base = 50
  7. static #baseNum = this.base * 2
  8. #x
  9. constructor(data: number) {
  10. this.#x = { data }
  11. }
  12. static {
  13. getBaseNum = () => this.#baseNum * 2
  14. getDoubleBaseNum = (obj: any) => {
  15. obj.#x.data *= obj.#x.data
  16. return obj.#x
  17. }
  18. }
  19. }
  20. console.log('Class Static Block: ', ES13Class.base) // Class Static Block: 50
  21. console.log('Class Static Block: ', getBaseNum()) // Class Static Block: 200
  22. console.log('Class Static Block: ', getDoubleBaseNum(new ES13Class(2)).data) // Class Static Block: 4
  23. }

Ergonomic brand checks for Private Fields

  1. {
  2. // Ergonomic brand checks for Private Fields 私有字段检查
  3. class ES13Class {
  4. #phone = '189********'
  5. static phoneNumber(obj: any) {
  6. // 检查 obj 中是否存在 #phone 字段
  7. if (!(#phone in obj)) {
  8. return `Not applicable`
  9. }
  10. return `Phone number: ${obj.#phone}`
  11. }
  12. }
  13. const ES13User = { 'phone': '189********' }
  14. console.log('Ergonomic brand checks for Private Fields: ', 'phone' in ES13User) // Ergonomic brand checks for Private Fields: true
  15. const ES13NewUser = {}
  16. console.log('Ergonomic brand checks for Private Fields: ', 'phone' in ES13NewUser) // Ergonomic brand checks for Private Fields: false
  17. const phoneNo = ES13Class.phoneNumber(new ES13Class())
  18. console.log('Ergonomic brand checks for Private Fields: ', phoneNo) // Ergonomic brand checks for Private Fields: Phone number: 189********
  19. const newPhoneNo = ES13Class.phoneNumber({})
  20. console.log('Ergonomic brand checks for Private Fields: ', newPhoneNo) // Ergonomic brand checks for Private Fields: Not applicable
  21. }