在es6之前，传统的方式是通过构造函数的形式实现类的，通过原型链的方式实现继承

es6、es7中的类

  1. // es6定义类：必须在构造函数里面定义属性
  2. class Person1{
  3.      constructor(){
  4.       this.name = '张三'
  5.   }
  6. }
  7. // es7定义类：可以直接在类中定义属性，当然也有构造函数
  8. class Person2{
  9.      name = '李四' 
  10.   constructor(){
  11.   }
  12. }

继承：

  1. class Parent{
  2.     name='zhangsan'
  3.     age = 18
  4.     run(){
  5.         return this.name + this.age
  6.     }
  7. }
  8. class Child extends Parent{ // Child类继承Parent类
  9.     name='lisi'
  10.     run(){
  11.         return super.run() + 'aaa' // super是拿到父元素的属性和方法
  12.     }
  13. }
  14. let child = new Child()
  15. console.log(child.run()); // 打印出：lisi18aaa

super关键字：

  1. 子类constructor(){}构造器中要使用super() ```javascript class Parent{

} class Child extends Parent{ constructor(){ super() } }

  2. 2. 子类中访问父类的方法，可以使用super关键字
  3. ```javascript
  4. class Parent{
  5.   run(){
  6.       return '123'
  7.   }
  8. }
  9. class Child extends Parent{
  10.      run(){
  11.        return super.run() 
  12.   }
  13. }

TypeScript中的类

TypeScript除了实现es6以及es7的提案，还添加了一些新的用法

三种访问修饰符

  • public：公开的（公有的），可以在任何地方被访问到

    1. class Parent{
    2.   public name: string
    3.   public age: number
    4.   constructor(){
    5.       this.name = 'parents'
    6.       this.age = 18
    7.   }
    8.   public run() {
    9.       return this.name + this.age
    10.   } 
    11. }

  • private：私有的，不能在声明他的类的外部调用。子类也无法使用 ```javascript class Parent{ private name: string // private name私有属性不能通过实例化的parents.name访问 age: number constructor(){

    1.   this.name = 'parents'
    2.   this.age = 18

    } run() {

    1.   // 内部：访问本类中private属性
    2.   return this.name + this.age

    } }

let parents = new Parent() // 外部 console.log(parents.run()) // 外部 打印：parents18

  2. - protected：受保护的，和private类似，区别在于他可以在子类访问
  3. ```javascript
  4. class Parent{
  5.     protected name: string
  6.     age: number
  7.     constructor(){
  8.         this.name = 'parents'
  9.         this.age = 18
  10.     }
  11. }
  12. class Child extends Parent{
  13.     run(){
  14.         return this.name // 在子类中访问父类中protected属性
  15.     }
  16. }
  17. let child = new Child()
  18. console.log(child.run()) // 打印：parents

类的存取器

存取器：getter 和 setter
getter：读取
setter：赋值
使用场景：类中有私有属性，如果在外部要想访问私有属性可以通过setter、getter构造器实现，构造器的作用是保护内部变量。

  1. class Parent{
  3.     private _name:string //  私有属性，通常以_开头
  4.     constructor(name:string){
  5.         this._name = name
  6.     }
  8.     // get后name是一个属性：get要return返回值
  9.     get name(){
  10.         return this._name
  11.     }
  13.     // set后newName是一个属性：set不能return值
  14.     set newName(value:string){
  15.         this._name = value
  16.     }
  17. }
  18. let parents = new Parent('zhangsan')
  19. console.log(parents.name) // 打印：zhangsan
  20. parents.newName = 'lisi'
  21. console.log(parents.name) // 打印：lisi

抽象类

  • 使用abstract来定义抽象类或抽象方法。
  • 抽象类：不可以实例化的（不能new的），要使用抽象类的属性和方法要使用继承。简单理解抽象类：就是把一个类抽离出来，这个类是共同的、相似的。例如：小猫、小狗都属于动物，就可以把动物类抽离出来。
  • 抽象方法：共性，但是具体到某个对象又有不同。例如：小狗和小猫都会叫，但是叫起来的声音又不一样。因此，抽象方法是要传值的，定义了抽象方法，子类一定要调用，否则报错。 ```javascript // 抽象类 abstract class Animal{ name:string; constructor(name:string){
    1.   this.name = name
    } getType(){
    1.   return 'animal'
    } // 抽象方法：定义了抽象方法，必须在子类中使用 abstract call():string }

// 子类 class Dog extends Animal{ call(){ return ‘旺旺’ } } // 子类 class Cat extends Animal{ call(){ return ‘喵喵’ } }

let dog = new Dog(‘dog’) let cat = new Cat(‘cat’)

console.log(dog.call()) // 打印：旺旺 console.log(cat.call()) // 打印：喵喵 ```