JavaScript的面向对象编程（一）

面向过程

面向过程：面向过程就是分析出解决问题需要的步骤，然后用函数把这些步骤一个个实现，使用的时候依次调用。面向过程的核心是过程。

面向对象

面向对象：面向对象就是把需要解决的问题分解成一个个对象，建立对象不是为了实现一个步骤，而是为了描述每个对象在解决问题中的行为，面向对象的核心是对象。

1.面向对象的优势

1. 模块化更深，封装性强。
2. 更容易实现复杂的业务逻辑。
3. 更易维护、易复用、易扩展。

2.面向对象的特征

（1）封装

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

（2）继承

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

（3）多态

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

类和对象

1.类

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

2.对象

对象：而当我们拿起手里的一本真实存在的书的时候，这本书有自己的
书名、作者、页数等信息，像这种具体的事物，就是对象。

3.类和对象的关系

类是具有相同属性和行为的对象的抽象，而对象是类的具体表现。

ES5中定义类的方法

ES5中定义类：通过构造函数实现

function Student(name,age){    //构造函数，建议首字母大写，Student可以看作一个类

    this.name = name;
    this.age = age;
}

var s1 = new Student("刘备",32);    //s1就是一个对象

var s2 = new Student("小乔",18);

ES6中定义类的方法

class 类名{
    consconstructor([参数]){ //构造方法:用来初始化对象的成员
        方法体;
    }
}

1.创建对象

var 对象名 = new 类名([参数]);

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

2.对象成员(包括属性和方法)的访问

对象名.属性名

对象名.方法名([参数])

class Student{    //使用class关键字来定义类
    
    constructor(name,age){    //构造方法：用来初始化对象的成员
        
        this.name = name;    //"this.name"的name是对象的属性，"name"是构造方法的参数值
        this.age = age;
    }

    study(){    //成员方法（对象的行为）

        console.log("学生"+this.name+"在学习");
    }
    sleep(){
        
        console.log("学生"+this.name+"在休息");
    }
}

var s1 = new Student("孔明",26);

var s2 = new Student("黄忠",35)

console.log(s1.name);

s1.study();
s1.sleep();

继承

（1）父类

父类：又称为基类或超类，被继承的类

（2）子类

子类：又称为派生类。由父类派生来的类

（3）继承的实现

继承的实现：extends

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

（4）super关键字

super关键字：代表父类.用来访问和调用父类的成员

1. 调用父类的构造方法：在子类的构造方法中调用父类的构造方法：在继承中,创建子类对象时必须先调用父类的构造方法,然后再调用子类的构造方法，并且父类构造方法的调用必须是子类构造方法中第一条语句。
2. super([参数])：调用父类的构造方法
3. 调用父类的普通方法：super.方法名([参数])

例：定义一个Point类，再定义一个Circle类继承它，并显示圆心、半径和圆的面积。接着定义一个Cylinder类继承Circle类，显示圆柱体的底面圆心、半径、面积和它的体积还有表面积。

class Point{
    constructor(x,y){

        this.x = x;
        this.y = y;
    }
    showPoint(){

        return this.x+","+this.y;
    }
}

class Circle extends Point{

    constructor(point,radiu){
        super(point.x,point.y);
        this.radiu = radiu;
    }
    circleArea(){

        let b = Math.PI*Math.pow(this.radiu,2);
        return b;
    }
    showCircle(){

        console.log("圆心:",super.showPoint());
        console.log("半径:",this.radiu);
        console.log("面积:",this.circleArea());
    }

}

class Cylinder extends Circle{

    constructor(point,radiu,height){
        super(point,radiu);
        this.height = height;
    }
    vol(){

        var c = Math.PI*Math.pow(this.radiu,2)*this.height;
        return c;
    }
    cylinderArea(){

        var d = 2*Math.PI*this.radiu*this.height + super.circleArea()*2;
        return d;
    }
    showCylinder(){
        
        super.showCircle();
        console.log("高:",this.height);
        console.log("体积:",this.vol());
        console.log("表面积:",this.cylinderArea());
    }
}

var point = new Point(50,90);

var circle = new Circle(point,5);

var cylinder = new Cylinder(point,5,8)

circle.showCircle();

cylinder.showCylinder();