JavaScript进阶十一（JS面向对象编程及类的定义）

---

一、JavaScript的面向对象编程

1、面向过程：核心是解决问题的过程
2、面向对象：核心是对象。关注每个对象在解决问题中的行为。特征为：

（1）封装性：对象是属性(静态特征)和行为(动态特征)的结合体(封装体)。

（2）继承性：父类(基类)的属性和行为可以派生到子类中。子类不需要重复定义。

（3）多态性：同一个消息传递给不同的对象,得到的结果不同。

二、ES5面向对象语法

1、类的基本语法
通过构造函数来实现，构造函数创建对象我们以前学习过，这里不再赘述。

三、ES6面向对象语法

1、类和对象

类：事物分为具体的事物和抽象的事物，当我们脑中出现“书”这个词的时候，可以大致现象到书的基本样貌特征，这个过程就是抽象，抽象出来的结果就是类。即具有相同属性和行为的对象的抽象。

对象：当我们拿起一本真实的书时，这本书有自己的书名、作者等信息，像这样具体的事物就是对象。即是类的实例（类的具体体现）。

2、类的基本语法

class关键字：用来定义一个类，在类中可以定义constructor()构造方法，用来初始化对象的成员。 基本格式：

class 类名{
	constructor([参数]){ //构造方法:用来初始化对象的成员
		方法体;
	}
}
//创建对象
var 对象名 = new 类名([参数]);
//对象成员(包括属性和方法)的访问
对象名.属性名;
对象名.方法名([参数]);

注意：在ES6中constru构造方法不能显式调用。

举例如下：

//ES6里的定义
class Person{ //使用class关键字定义类
    constructor(name,age){ //构造方法：用来初始化对象的成员
        this.name = name;
        this.age = age;
    }
    study(){
        console.log(this.name+"在学习"); //成员方法（对象的行为）
    }
    sleep(){
        console.log(this.name+"在睡觉");
    }
}
var p1 = new Person('heihei',12);
var p2 = new Person('haha',11);
console.log(p1.name);
console.log(p2.age);
p1.study();
p2.sleep();
//输出为：
heihei
11
heihei在学习
haha在睡觉

3、类的练习

设计雇员Employee类，记录雇员的情况，包括姓名、年薪、受雇时间，要求定义MyDate类作为受雇时间，其中包括工作的年、月、日，并用相应的方法(构造方法、显示信息的方法)对Employee类进行设置。

//练习：设计雇员Employee类，记录雇员的情况，包括姓名、年薪、受雇时间，
//要求定义MyDate类作为受雇时间，其中包括工作的年、月、日，并用
//相应的方法(构造方法、显示信息的方法)对Employee类进行设置。
class MyDate{
    constructor(year,month,day){
        this.year = year;
        this.month = month;
        this.day = day;
    }
    show(){
        console.log("受雇时间是： "+this.year+"年"+this.month+"月"+this.day+'日');
    }
}
class Employee{
    constructor(name,salary,workTime){
        this.name = name;
        this.salary = salary;
        this.workTime = workTime;
    }
    display(){
        console.log("姓名为"+this.name);
        console.log("年薪为"+this.salary);
        this.workTime.show();
    }
}
var workt = new MyDate(2020,12,12);
var e = new Employee('张三',100000,workt);
e.display();
//输出为：
姓名为张三
年薪为100000
受雇时间是： 2020年12月12日

4、继承

在JS中，继承用来表示两个类之间的关系，子类可以继承父类的一些属性和方法，在继承后还可以增加自己独有的属性和方法。
（1）父类：又称为基类或超类，被继承的类。
（2）子类：又称为派生类。由父类派生来的类。

（1）继承的实现

使用关键字extends，基本格式为：

 class 子类名 extends 父类名{
     constructor(){
     }
     其他的成员方法
 }

（2）super关键字

代表父类，用来访问和调用父类的成员。
A、调用父类的构造方法：在子类的构造方法中调用父类的构造方法，在继承中，创建子类对象时必须先调用父类的构造方法,然后再创建子类的构造方法，并且父类构造方法的调用必须是子类构造方法中第一条语句。
B、super([参数])：调用父类的构造方法。
C、调用父类的普通方法：super.方法名([参数])。

举例如下：

//先准备一个父类
class Father{
    constructor(sex){ //无参的构造方法
        this.sex = sex;
    }
    show(){
        console.log("年龄为"+12);
        console.log("性别为"+this.sex);
    }
}
class Son extends Father{
    constructor(father,name){
        super(father.sex);//继承父类的sex属性
        this.name = name;
    }
    display(){
        super.show();//继承父类的show方法
        console.log("姓名为"+this.name);
    }
}
var father1 = new Father('男');
var son1 = new Son(father1,'haha')
son1.display();//调用自己的方法

//输出为：
年龄为12
性别为男
姓名为haha

5、实例成员和静态成员

（1）实例成员：指实例对象的成员，即构造函数内部通过this添加的成员。它只能通过实例化的对象来访问，不可以使用构造函数来访问实例成员。
（2）静态成员：在构造函数本身上添加的成员，通过类或构造函数访问，是所有对象共享的成员，不属于某个具体的对象。又称为类成员。
创建方法：

类名.成员名 – ES6
构造方法名.成员名 – ES5
举例如下：

//静态成员举例
class Student{
    constructor(name){
        this.name = name;
    }
    show(){
        console.log("学校："+Student.school);
        console.log("姓名："+this.name);
    }
}
Student.school = '北京大学';//静态成员
var p1 = new Student('张三');
var p2 = new Student('李四');
p1.show();
p2.show();
//输出为：
学校：北京大学
姓名：张三
学校：北京大学
姓名：李四

举例

通过一个点类(Point)，具有自己的坐标位置(x,y),和显示本类信息的show()方法；一个圆类(Circle)由点类派生，增加一个新的属性半径(radiu)，一个计算圆面积的area()方法，和一个同样显示本类信息的show()方法；一个圆柱体类(Cylinder)由圆类派生，增加一个属性高度(height)，一个计算圆柱形体积的方法vol()，一个计算圆柱形表面积的area()方法，和一个同样显示本类信息的show()方法。建立一个主类，调用相关类的方法，并打印出相应的信息。

class Point{
    constructor(coordinatesx,coordinatesy){
        this.coordinatesx = coordinatesx;
        this.coordinatesy = coordinatesy;
    }
    show(){
        console.log("圆心为：" +"(" +this.coordinatesx + ","+this.coordinatesy+")");
    }
}

class Circle extends Point{
    constructor(point,radiu){
        super(point.coordinatesx,point.coordinatesy); //调用父类的属性
        this.radiu = radiu;
    }
    area(){
        let sa = Math.PI*Math.pow(this.radiu,2);
        return sa; //记得返回值给area（）
    }
    show(){
        super.show();
        console.log("圆的半径为",this.radiu);
        console.log("圆的面积为",this.area());
    }
}

class Cylinder extends Circle{
    constructor(point,radiu,height){
        super(point,radiu);
        this.height = height;
    }
    vol(){
        let v = super.area()*this.height;
        return v;
    }
    Cylinder_area(){
        let a = 2*super.area() + 2*Math.PI*this.radiu*this.height;
        return a;
    }
    show(){
        super.show();
        console.log("圆柱体的高度为：",this.height);
        console.log("圆柱体的体积为：",this.vol());
        console.log("圆柱体的表面积为：",this.Cylinder_area())
    }
}
//定义一个点：
var point = new Point(50,90);
var circle =new Circle(point,5);

var cylinder = new Cylinder(point,5,8);
cylinder.show();
//输出为：
圆心为：(50,90)
圆的半径为 5
圆的面积为 78.53981633974483
圆柱体的高度为： 8
圆柱体的体积为： 628.3185307179587
圆柱体的表面积为： 408.4070449666731