Class在ts和es6中的异同

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情

类的基本用法

先来个es6的栗子，基本方法走一走。

class Boy {
  gender = 'male';
  get sex(){
    return this.gender === 'male'?'爷们':'未知';
  }
  set sex(val){
    this.gender = val;
  }
}

class HansomeBoy extends Boy{
  static skill = 'Fighting'
  constructor() {
    super();
    this.name = 'oldIron';
  }
  sayHello() {
    console.log('你瞅啥');
  }
}

let jack = new HansomeBoy();
console.log(jack.gender) //male
console.log(jack.name) //oldIron
console.log(jack.sayHello()) //你瞅啥
console.log(HansomeBoy.skill) //Fighting
console.log(jack.sex) //爷们
jack.sex = '???';
console.log(jack.sex) //未知

关于ts中的class

ts里class增加了一些修饰符 public，protected，private以及readonly。

• public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
• private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
• protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

简单来说，根据开放性排序是这样的

public > protected > private

再来个栗子：

class Boy {
  public gender = '爷们';
  protected  skill = '上课挖鼻屎'
  private secret = '银行卡密码：10000'
  readonly name = '小宝贝'
}

class HansomeBoy extends Boy{
  constructor(){
    super();
  }
  sayMessage(){
    console.log(this.gender) // 爷们
    console.log(this.skill) //上课挖鼻屎
    console.log(this.secret)  //error : Property 'secret' is private and only accessible within class 'Boy'
  }
  changeName(){
    name = '糙老爷们'; //error
  }
}

let jack = new HansomeBoy();
console.log(jack.gender) //爷们
console.log(jack.skill) //error : Property 'skill' is protected and only accessible within class 'Boy' and its subclasses
console.log(jack.secret) //error : Property 'secret' is private and only accessible within class 'Boy'

子类访问父级属性 gender是public 拿得到，skill是protected 也拿得到，但是secret这个字段父亲怕你用他的手机给女主播刷礼物，所以银行卡密码不告诉你。

然后对于实例化以后的jack，和子类访问的区别就是protected是拿不到的，protected只能自己的儿子访问，到外部，抠鼻屎这种事对于爱形象的父亲来说就不好张扬了。