TypeScript（九）ES6、ES7类的定义和类的继承

一、ES6、ES7类的定义

在学习TypeScript类的用法之前，我们先来复习一下ES6、ES7类的用法。

//ES6类的定义
class Person {
  public name;
  constructor() {
    this.name = '张三'
  }
  say() {
    return "我的名字是" + this.name
  }
}


//ES7类的定义
class Person {
  name = '张三'
  say() {
    return "我的名字是" + this.name
  }
}

可以看到ES6和ES7在定义类的时候最明显的区别在于constructor构造函数的使用，ES6在定义一个属性时要通过在constructor里面this.xxx = "yyy",而ES7则简化了一些，可以直接在类中定义属性xxx = "yyy"。

二、类的继承

我们使用extend关键字去继承父类，写法如下

class Person {
  name = '张三'
  say() {
    return "我的名字是" + this.name
  }
}

class Child extends Person {

}

let obj = new Child();
console.log(obj.name);   //张三
console.log(obj.say())   //我的名字是张三

在上面的代码中，我们使用ES7的写法去定义了一个类名叫Person,然后我们定义一个叫Child 的类去继承它，最后把这个对象实例化赋给obj,可以打印出Person的属性和方法，这代表Child已经继承了Person的属性和方法。

如果我们在继承中重新赋值呢？

class Person {
  name = '张三'
  say() {
    return "我的名字是" + this.name
  }
}

class Child extends Person {
  name = "李四";
  say() {
    return super.say() + "嘿嘿嘿";
  }
}

let obj = new Child();
console.log(obj.name);   //李四
console.log(obj.say())   //我的名字是李四嘿嘿嘿

可以看到当我们把name属性和say方法重新赋值时，打印的结果就是新定义的属性和方法。

这里我们用到了super关键字，它代表父类中的方法，以上就是ES6、ES7类的定义和类的继承。