• 面向对象基础

    编程思想

    • 面向过程POP (Process Oriented Programming)

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

    例如：将大象装进冰箱，面向过程的做法是

    1.把冰箱门打开
    2.把大象装进去
    3.关上冰箱门

    面向过程，就是按照我们分析好的步骤，按步骤来执行就可以了。

    • 面向对象OOP (Object Oriented Programming)

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

    例如：将大象装进冰箱，面向对象的做法是：先找出对象，并写出这些对象的功能

    1.大象对象 -> 进去
    2.冰箱对象 -> 打开、关闭
    3.使用大象和冰箱的功能

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

    面向对象的特性

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

    类

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

    • 类：可以以理解成做房子的图纸
    • 实例化：将房子做出来这个过程
    • 对象：房子

    类的定义和属性

    来看一个例子

    doctype html>
<html>
<head>
    <meta charset="UTF-8">
head>
<body>
<script>
    // 1、定义一个老师类
    class Teacher {
        // 3、构造函数使用 name 和 age 这两个参数，接收实例化传过来的值
        constructor(name, age) {
            // 4、赋值给当前对象的属性 name 和 age
            this.name = name
            this.age = age
        }
    }

    // 2、类通过实例化(new) 变成对象，并传了两个值
    const teacherH = new Teacher('黄老师', 18)
    // var teacherL = new Teacher('刘老师', 20)
    // 5、输出这个对象
    console.log(teacherH)

    // console.log(teacherL)
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    请添加图片描述

    • constructor：构造方法，当类被实例化时，会自动运行。构造方法中，可以接收参数，用于初始化属性。
    • 一个类可以实例化多个对象
    • name 和 age 是这个类的共有属性

    类的公共方法

    doctype html>
<html>
<head>
    <meta charset="UTF-8">
head>
<body>
<script>
    class Teacher {
        // 1、定义公共方法
        teach() {
            console.log('我会讲课')
        }

        // 1、定义公共方法
        program() {
            console.log('我会写代码')
        }
    }

    // 2、通过 new 实例化两个对象
    const teacherH = new Teacher()
    const teacherL = new Teacher()

    // 3、通过对象去调用类里面的方法
    teacherH.teach()
    teacherL.program()

script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    请添加图片描述

    练习：修改上述代码，输出结果是 黄老师今年 18 岁了，会讲课；刘老师今年 20 岁了，会写代码

    类的方法参数

    doctype html>
<html>
<head>
    <meta charset="UTF-8">
head>
<body>
<script>
    class Teacher {
        constructor(name) {
            this.name = name
        }

        // 2、接收参数并输出结果
        teach(courses) {
            console.log(this.name + '会讲' + courses)
        }
    }

    const teacherH = new Teacher('黄老师')

    // 1、调用方法的时候传入参数值
    teacherH.teach('全栈课程')
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    请添加图片描述

    类的继承

    使用 extends 可以实现类的继承，继承后的子类，拥有父类所有的属性、方法。

    extends的使用

    doctype html>
<html>
<head>
    <meta charset="UTF-8">
head>
<body>
<script>
    // 1、定义一个父类
    class Animal {
        eat() {
            console.log('我会吃')
        }

        run() {
            console.log('我会跑')
        }
    }

    // 2、定义一个子类，子类继承父类
    class Bird extends Animal{
        fly(){
            console.log('我会飞')
        }
    }

    // 3、实例化子类
    const bird = new Bird()
    // 4、调用方法
    bird.eat()
    bird.run()
    bird.fly()

    // 5、实例化父类
    const pig = new Animal()
    // pig.eat()
    // pig.run()
    // pig.fly()
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 子类实例化后，可以调用父类和自己的方法
    • 父类实例化后，只能调用自己的方法，不能调用其子类的方法

    在extends中使用constructor

    doctype html>
<html>
<head>
    <meta charset="UTF-8">
head>
<body>
<script>
    class Animal {
        // 2、在父类的构造方法中接收 name 参数
        constructor(name) {
            this.name = name
        }

        eat() {
            // 3、输出结果
            console.log('我是' + this.name + '，我会吃')
        }
    }

    class Bird extends Animal {
        fly() {
            console.log('我会飞')
        }
    }

    // 1、实例化子类并传参数值
    const bird = new Bird('鹦鹉波利')
    // 4、调用方法
    bird.eat()
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 由于子类继承了父类，在实例化子类时传入的参数会自动赋值给父类的构造方法中的属性
    • 通过子类对象去调用父类的方法，输出结果

    如果我想把 鹦鹉波利 传给子类的构造方法该怎么办呢？这时，我们就得用到 super 关键词

    super

    doctype html>
<html>
<head>
    <meta charset="UTF-8">
head>
<body>
<script>
    class Animal {
        constructor(name) {
            this.name = name
        }

        eat() {
            // 3、输出结果
            console.log('我是' + this.name + '，我会吃')
        }
    }

    class Bird extends Animal {
        // 1、子类构造方法接收参数
        constructor(name) {
            // 2、使用 super 关键字去调用父类的 constructor，并把 name 值传过去
            super(name)
        }

        // fly() {
        //     // 3、在子类的方法中去调用父类的方法
        //     super.eat()
        // }

        // eat() {
        //     console.log('我是子类，我会吃')
        // }
    }

    const bird = new Bird('鹦鹉波利')
    bird.eat()
    // bird.fly()
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    当子类和父类有相同的方法名时，子类会将父类的方法覆盖掉。如果需要保留父类方法的内容，并且在子类增加新的功能，可以使用 super

  • 相关阅读:
    LiveGBS流媒体平台GB/T28181功能-报警预案配置告警触发报警时截图及录像摄像头通过GB28181上报报警
    计算机网络-物理层
    CSS特效002：花样的鼠标悬停效果
    npm install 出错，‘proxy‘ config is set properly. See: ‘npm help config‘
    Excel 导入实例
    一文读懂微服务架构的分解设计
    【数据结构】顺序查找，折半查找，分块查找的知识点总结及相应的代码实现
    Java Collection接口中的常用方法总结
    ant-design版本升级从V4到V5
    http1和http2的主要区别
  • 原文地址：https://blog.csdn.net/huangdj321/article/details/126540929