• 面向对象编程介绍
• ES6 中的类和对象
• 类的继承
• 面向对象案例

1 面向对象编程介绍

1.1 两大编程思想

• 面向过程
• 面向对象

1.2 面向过程编程 POP(Process-oriented programming)

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的

时候再一个一个的依次调用就可以了。

举个栗子：将大象装进冰箱，面向过程做法。

面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。

1.3 面向对象编程 OOP (Object Oriented Programming)

面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。

举个栗子：将大象装进冰箱，面向对象做法。
先找出对象，并写出这些对象的功能：

1. 大象对象

• 进去

1. 冰箱对象

• 打开
• 关闭

1. 使用大象和冰箱的功能

面向对象是以对象功能来划分问题，而不是步骤。

在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。

面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特性：

• 封装性
• 继承性
• 多态性

1.4 面向过程和面向对象的对比

面向过程

• 优点：性能比面向对象高，适合跟硬件联系很紧密 的东西，例如单片机就采用的面向过程编程。
• 缺点：没有面向对象易维护、易复用、易扩展

面向对象

• 优点：易维护、易复用、易扩展，由于面向对象有 封装、继承、多态性的特性，可以设计出低耦合的 系统，使系统 更加灵活、更加易于维护
• 缺点：性能比面向过程低

用面向过程的方法写出来的程序是一份蛋炒饭，而用面向对象写出来的程序是一份盖浇饭。

2 ES6 中的类和对象

2.0 面向对象

面向对象更贴近我们的实际生活, 可以使用面向对象描述现实世界事物. 但是事物分为具体的事物和抽象的事物

面向对象的思维特点:

1. 抽取（抽象）对象共用的属性和行为组织(封装)成一个类(模板)
2. 对类进行实例化, 获取类的对象

面向对象编程我们考虑的是有哪些对象，按照面向对象的思维特点,不断的创建对象,使用对象,指挥对象做事情.

2.1 对象

现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人 可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、 函数等。

对象是由属性和方法组成的：

• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

2.2 类 class

在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。

类抽象了对象的公共部分，它泛指某一大类（class）
对象特指某一个，通过类实例化一个具体的对象

面向对象的思维特点:

1. 抽取（抽象）对象共用的属性和行为组织(封装)成一个类(模板)
2. 对类进行实例化, 获取类的对象

2.3 创建类

语法：

class ClassName {
    // class body 
}

创建实例：

let xx = new ClassName();

注意： 类必须使用 new 实例化对象

2.4 类 constructor 构造函数/方法

constructor() 方法是类的构造函数(默认方法)，用于传递参数,返回实例对象，通过 new 命令生成对象实例时， 自动调用该方法。如果没有显示定义, 类内部会自动给我们创建一个constructor()

语法：

class Person {
    constructor(name,age) {   // constructor 构造方法或者构造函数
            this.name = name; 
        this.age = age;
    }
}

创建实例：

let xyb = new Person('徐晏兵', 18);
console.log(xyb.name)

面向对象概念+创建类+实例化对象.mp4
课堂代码：

 /*
   *    1：通过class关键字创建类。类名习惯性首字母大写。
   *    2: 类里面有个constructor构造方法/函数。可以接受传递过来的参数。同时返回实例对象。
   *    3：constructor构造方法只要new 生成实例的时候，就会自动调用这个函数/方法。如果我们不写这个函数，类也会自动生成这个函数。
   *    4：生成实例的时候，new 不能省略的
   *    5：注意语法规范，类名后面不加小括号。实例化对象的时候，类名后是需要假小括号的。构造函数是不需要function关键字的
   * */
    //1:创建一个汽车类，使用关键字class
    class Car{
        //构造方法用来接受传递的参数，其实就是用来初始化属性值的。很特殊，名字是固定的。每个类只能且必须有一个。如果没写，程序默认给出一个构造方法。
        //构造方法还有一个很重要的作用。返回实例对象。
        constructor(carName,price) {
            this.carName = carName;
            this.price = price;
        }
    }
//    2根据类获取对象
   let bmw =  new Car('bmw',100000);
   console.log(bmw);
   let aodi =  new Car('奥迪',20000);
   console.log(aodi);

至此：你掌握了几种创建对象的方式呢？

2.5 类添加方法

语法：

class Person { 
    constructor(name,age) {   // constructor 构造器或者构造函数 
        this.name = name;
                this.age = age;
        }
    say() { 
          console.log(this.name + '你好');
    }
}

创建实例：

let xyb = new Person('徐晏兵', 18); 
xyb.say()

注意： 方法之间不能加逗号分隔，同时方法不需要添加 function 关键字。
类中添加方法.mp4

3 类的继承

3.1 继承

现实中的继承：子承父业，比如我们都继承了父亲的姓。
程序中的继承：子类可以继承父类的一些属性和方法。

语法：

class Father{   // 父类
}
class  Son extends Father {  // 子类继承父类
}

实例：

  /*
    * 继承是存在父子类之间的关系：子类继承父类。那么子类就具备了父类的功能。
    * 继承的关键字是extends
    * */
    //    1：创建一个动物类。
    class Animal {
        constructor(leg, color) {
            this.leg = leg;
            this.color = color;
        }
        //    抽取动物共有的功能
        speak(){
            console.log('动物都会叫唤');
        }
    }
    //    2：创建一个狗类。
    class Dog extends Animal{
        //子类中虽然没有写代码.但是只要有继承关系.就会把父类中有的内容.继承过来.
    }
//    创建子类的实例。测试验证，子类具备了父类的方法了吗？
    let dog = new Dog(4,'green');
    console.log(dog.leg);
    dog.speak();

继承关键字extends.mp4

3.2 super 关键字

super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数

语法：

   /*
    *  在子类构造函数中,使用this之前.必须先调用父类的构造函数一下 使用关键字super
    * */
//    1：创建一个动物类。作为父类
    class Animal {
        constructor(leg, color) {
            this.leg = leg;
            this.color = color;
        }
        //    抽取动物共有的功能
        speak() {
            console.log('动物都会叫唤');
        }
    }
//   3:创建一个鸟类 鸟类应该继承动物类但是鸟类还有自己的属性.假设有些鸟有2个翅膀,有些有4个翅膀,有些有6个翅膀.六翼天使.
    class Bird extends Animal {
        constructor(leg,color,chiBang) {
            super(leg,color);
            this.chiBang = chiBang;
        }
    }
    //    实例化一个六翼天使
    let lyts = new Bird(2,'金黄色',6);
    console.log(lyts.leg);
    console.log(lyts.chiBang);

注意: 子类在构造函数中使用super, 必须放到 this 前面 (必须先调用父类的构造方法,在使用子类构造方法)

super关键字在构造函数中的使用.mp4

super关键字 用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数

语法：

 /*
    * 调用父类中构造函数使用super()
    * 调用父类中构造函数:super.方法名
    * */
    class Teacher{
        say(){
            console.log('父类中的say方法');
        }
    }
    class Student extends  Teacher{
        //父类中已经有个功能了.但是子类不满意.想要重写改功能.或者增强该方法.
        say(){
            //先让父类的say方法执行一下子
            super.say();
            console.log('子类中的say方法');
        }
    }
   let stu =  new  Student();
    stu.say();
    /*
    * 继承中属性或者方法的查找原则:就近原则
    *   1:继承中,实例化子类后.调用方法. 先观察子类有没有这个方法.如果有就执行子类的.
    *   2:如果子类没有这个方法.那就查找父类中这个方法,然后调用.
    *   3:如果父子类都没有这个方法,你在干什么?
    * */

super调用父类普通方法.mp4
子类扩展自己的方法.mp4

三个注意点:

1. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象.
2. 类里面的共有属性和方法一定要加this使用.
3. 类里面的this指向问题.
4. constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者

    let that;
    class Star {
        constructor(username, age) {
            this.uname = username;
            this.age = age;
            //    为了让点击按钮的时候,可以调用类中的方法.我把这个按钮绑定到类的属性中
            this.btn = document.querySelector('button');
            this.btn.onclick = this.dance;
        }
        sing() {
            console.log(this);
        }
        dance() {
            console.log('跳舞的方法被执行了')
            console.log(this);
            that = this;
        }
    }
    let mby = new Star('毛不易', 25);
    mby.dance();
    console.log(that === mby);

实用类的注意事项.mp4

扩展

自行学习何为静态！静态属性，静态方法。