ES6 面向对象封装、继承、多态案例

浅浅的花香味﹌ 2022-10-29 05:25 259阅读 0赞

类 Class

类(Class) : 定义了一切事物的抽象特点

对象(Object)：类的实例

面向对象(OOP)三大特性：封装、继承、多态

封装就是将数据操作的细节隐藏起来，只暴露对外的接口，外界调用端不需要也不可能知道细节，只能通过通过对外暴露的接口来访问该对象；

继承表示子类继承父类，子类除了拥有父类所有的特征以外，还有一些更具体的特性；

多态：由继承产生的多个不同的类，对同一个方法可以有不同的响应，比如猫和狗都可以继承自Animal，但是它们分别实现了自己的eat（吃）方法；此时针对某一个实例，我们无需了解它是猫还是狗，我们可以直接调用eat方法，程序会字段判断应该如何执行这个方法；

# 封装 #

创建一个Animal基本类，然后new一个对象，我们在调用一下这个对象下面的run方法，我们发现lily is running已经出现了。

class Animal {
      readonly name: string;
      constructor(name) {
        this.name = name
      }
      run() {
        return `${this.name} is running`
      }
    }
    const snake = new Animal('lily')
    console.log(snake.run())

# 继承 #

创建第二个类Dog（狗狗）类，然后继承上面的Animal类，Dog类除了可以继承上面Animal类的run方法之外我们还可以给他创建新的方法，如bark;

继承了以后它自然有了上面类的属性和方法；

class Dog extends Animal {
      bark() {
        return `${this.name} is barking`
      }
    }
    
    const xiaobao = new Dog('xiaobao')
    console.log(xiaobao.run())
    console.log(xiaobao.bark())

我们发现可以打印出来

lily is running

xiaobao is running

xiaobao is barking

# 多态 #

class Cat extends Animal {
      static categories = ['mammal'] // 类上面直接加的静态属性
      constructor(name) { // 对constructor进行了重写
        super(name) // 注意：重写构造函数的话要使用super方法，
        console.log(this.name)
      }
      run() { // 对run方法进行重写
        return 'Meow, ' + super.run()
      }
    }
    const maomao = new Cat('maomao')
    console.log(maomao.run())
    console.log(Cat.categories) // 类上的属性不用实例化，直接调用即可

我们可以打印出来

lily is running

xiaobao is  running

xiaobao is running

maomao

Neow, maomao is running

——————————————————————————————————————————————————————————————————————————————————————

Public: 修饰的属性或方法是共有的

Private：修饰的属性或方法是私有的

Protected：修饰的属性或方法是受保护的