面向对象基础

最新推荐文章于 2023-09-26 18:56:21 发布

Holyzq

最新推荐文章于 2023-09-26 18:56:21 发布

阅读量323

点赞数 1

分类专栏： js 面向对象文章标签： javascript 前端面向对象

本文链接：https://blog.csdn.net/huangdj321/article/details/126540929

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

面向对象

1 篇文章 0 订阅

订阅专栏

编程思想

面向过程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>

请添加图片描述

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>

请添加图片描述

练习：修改上述代码，输出结果是 黄老师今年 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>

请添加图片描述

类的继承

使用 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>

子类实例化后，可以调用父类和自己的方法
父类实例化后，只能调用自己的方法，不能调用其子类的方法

在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>

由于子类继承了父类，在实例化子类时传入的参数会自动赋值给父类的构造方法中的属性
通过子类对象去调用父类的方法，输出结果

如果我想把 鹦鹉波利 传给子类的构造方法该怎么办呢？这时，我们就得用到 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>

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

Holyzq

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向对象基础

来看一个例子 < html > < head > < meta charset = " UTF-8 " > < body > < script > // 1、定义一个老师类 class Teacher {// 3、构造函数使用 name 和 age 这两个参数，接收实例化传过来的值 constructor(name , age) {
复制链接

扫一扫