ES6：类、类的继承

一、类

1、面向对象：是一种开发思想，一切皆为对象。对象是属性和行为的结合体

2、面向过程：也是一种开发思想。开发中的每个细节，开发者都要考虑到。

3、类：具有相同属性和行为的对象的集合

4、ES5中实现类的功能：构造函数，在构造函数中封装了属性和方法。缺陷是构造函数和普通函数的定义方式是一样的

5、ES6中类的定义方式：语义性更强、语法更简洁

        ​ class 类名{

​                 属性

​                 行为

         ​ }

​ class 是关键字，专门用来定义类。

课堂练习1：

​ （1）定义一个Book类，包含ISDN、author、publish、price 4个属性，包含show()方法用于显示图书信息

​ （2）定义一个数组，在数组中存储了5个Book对象，遍历数组输出price最高的Book对象

​ （3）将数组中的5个Book对象显示在html页面的table中

6、ES6中支持getter/setter来获取属性值、设置属性值

​ （1）定义get方法、set方法的目的是：用于隐藏对象的属性名

​ （2）在使用get方法、set方法方法时不用带’()’

二、类定义时注意的问题

1、类的属性和方法（函数）：类可以有属性也没有没有属性，可以有方法也可以没有方法

2、类的属性是放在构造方法中初始化的，若类没有属性，可以不显式定义构造方法，此时，系统会自动生成一个无参的空的构造方法

三、类的继承

1、基本的概念：

​ （1）父类（基类）：可以派生子类的类

​ （2）子类(派生类)：由父类派生而来的类

2、面向对象的三大特性

​ （1）封装性：对象是属性和行为的封装体 —- 数据安全

​ （2）继承性：子类可以继承父类的属性和方法 —- 代码复用

​ （3）多态性：同一个消息传递给不同对象，出现的效果不同 —- 应用灵活、可以适应不同的需求

3、继承的实现

​ （1）ES5中继承的实现：没有类的概念

        ​ a、构造函数：构造函数名就是类名，在ES5中类的继承实际就是构造函数的继承

        ​ b、实现：通过call、apply、bind函数来实现构造函数的继承

//1.定义构造函数：基类
        function Fatcher(name){
            this.name = name
            this.age = 45
        }
        //2.定义构造函数：子类
        function Son(name){
            /* this代表是上层对象(window),name参数传递个Father构造函数。
               等于在Son函数中调用了Father函数：Son就具有了name和age属性(相当于从Father继承了name和age)
            */   
            Fatcher.call(this,name)  //函数劫持，在Son中通过call调用Father构造函数，将参数name传递给Father构造函数
            this.height = '178cm' //height是Son自己的属性
            this.show= function(){
                console.log('姓名：',this.name)
                console.log('年龄：',this.age)
                console.log('身高：',this.height)
            }
        }
        let son = new Son('赵四')
        son.show()

（2）ES6中的继承：通过关键字extends实现

//1.定义父类Fatcher
        class Fatcher{
            constructor(name,age){
                this.name = name
                this.age = age
            }
            fun(){
                console.log('我是父类中的方法......')
            }
        }
        //2.定义子类Son，继承自Father类
        class Son extends Fatcher{
            constructor(name,age){
                super(name,age); //调用父类的构造函数
            }
            hobby(){
                console.log('我喜欢篮球')
            }
            show(){
                console.log('姓名：',this.name)
                console.log('年龄：',this.age)
            }
        }
        let s1 = new Son('张三',25)
        s1.hobby()
        s1.show()

        a、super：指向父类。super([参数])表示调用父类的构造函数

        b、如果在子类的构造函数中调用父类的构造函数，那么super()必须作为子类构造函数中的第一条语句在执行子类的构造函数之前必须先执行父类的构造函数(先有父，后有子)

        c、方法覆盖(Overwrite)：在继承过程中，若父类的某个方法与子类的某个方法同名，则子类方法覆盖父类的同名方法

        d、在子类的方法中可以使用super调用父类中的某个方法

        e、不允许多继承，只能单继承

                多继承：类的直接父类有多个

                单继承：类的直接父类只有一个父类

课堂练习1：

​ （1）定义一个点类(Point)，具有x,y两个属性(表示坐标)，显示本类信息的show()方法；

​ （2） 定义一个圆类(Circle)由点类派生，增加一个新的属性半径(radiu),一个计算圆面积的area()方法，和一个同样显示本类信息的show()方法；

​ （3） 定义一个圆柱体类(Cylinder)由圆类派生，增加一个属性高度(height),一个计算圆柱形体积的方法vol()，一个计算圆柱形表面积的area2()方法，和一个同样显示本类信息的show()方法。

​ （4）测试：Circle类、Cylinder类的方法

        class Point{
            constructor(x,y){
                this.x = x
                this.y = y
            }
            show(){
                console.log('x坐标:',this.x);
                console.log('y坐标:',this.y);
            }
        }

        class Circle extends Point{
            constructor(x,y,r){
                super(x,y)
                this.r = r
            }
            
            area(){
                let S = Math.PI*this.r**2
                return S
            }
            show(){
                super.show()
                console.log('半径:',this.r);
                console.log('圆的面积是:',this.area());
            }
        }

        class Cylinder extends Circle{
            constructor(x,y,r,h){
                super(x,y,r)
                this.h = h
            }
            vol(){
                let V = Math.PI*this.r**2*this.h
                return V
            }
            area1(){
                let C = 2*Math.PI*this.r
                let S = C*this.h + 2*super.area()
                return S
            }
            show(){
                super.show()
                // console.log('圆的面积是:',super.area())
                console.log('圆柱的高是:',this.h);
                console.log('体积是:',this.vol());
                console.log('圆柱表面积:',this.area1());
            }
        }

        let p1 = new Cylinder(2,3,2,5)
        p1.show()