js 中类 class 的基本知识

西涯三锋

已于 2022-10-18 00:17:33 修改

阅读量492

点赞数

分类专栏：前端实践文章标签： javascript 前端开发语言

于 2022-10-18 00:14:31 首次发布

本文链接：https://blog.csdn.net/assokoo123/article/details/127379566

版权

前端实践专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

类简单介绍
类的基础知识
类的继承

类简单介绍

JavaScript 语言中，生成实例对象的传统方法是通过构造函数，其实也就是个函数而已，只是为了更接近类，把函数名称进行大驼峰命名（即：函数名称每一个单词的首字母都采用大写字母）。请看下面这个例子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>类的基本知识</title>
</head>

<body>
    <script type="text/javascript">
        // 通过传统的构造函数创建 Peron 类
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }

        // 给 Person 类添加一般方法
        Person.prototype.speak = function () {
            console.log(`我叫${this.name}，我年龄是${this.age}岁！`);
        }

        //  创建 Person 类的实例
        const p = new Person('乔治', 3);
        console.log(p);

        // 通过实例调用方法
        p.speak();
    </script>
</body>

</html>

运行结果（浏览器控制台）如下：
在这里插入图片描述

ES6 引入了 Class（类）这个概念，通过 class 关键字来定义类，提供了更接近传统语言的写法，新的 class 写法使得对象原型的写法更加清晰、更像面向对象编程的语法。
上面的代码用 ES6 的 class 改写，就是下面这样。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>类的基本知识</title>
</head>

<body>
    <script type="text/javascript">
        // 创建一个 Person 类
        class Person {
            // 构造方法
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            // 一般方法
            speak() {
                console.log(`我叫${this.name}，我年龄是${this.age}岁！`)
            }
        }

        //  创建 Person 类的实例
        const p = new Person('乔治', 3);
        console.log(p);

        // 通过实例调用方法
        p.speak();
    </script>
</body>

</html>

运行结果（浏览器控制台）如下：
在这里插入图片描述
我们看到了，不一样的写法，完全一致的结果。

类的基础知识

先准备一个类 class 的代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>类的基本知识</title>
</head>

<body>
    <script type="text/javascript">
        // 创建一个 Person 类
        class Person {
            // 构造方法
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            // 一般方法
            speak() {
                console.log(`我叫${this.name}，我年龄是${this.age}岁！`)
            }

        }

        // 创建 Person 类的实例对象
        const p1 = new Person('乔治', 3);
        const p2 = new Person('佩奇', 4);

        console.log(p1);
        console.log(p2);
        p1.speak();
        p2.speak();
    </script>
</body>

</html>

上面的代码运行结果如下：
在这里插入图片描述
科普几个基础且重要的知识点：

类中构造器不是必须要写的，只有在要对实例进行一些初始化的操作，如添加指定属性时才写。
构造器中的 this 就是类的实例对象。
一般方法 speak 放在了 Person 类的原型对象上，供 Person 类及其子类的实例对象使用。
通过 Person 类的实例调用 speak 方法时，speak 方法中的 this 就是 person 类的实例。

类的继承

类的继承是面向对象编程中极其重要的一个特性。通过继承，子类既可以继承父类的属性和方法直接使用，子类还可以通过重写来扩展父类。
代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>类的基本知识</title>
</head>

<body>
    <script type="text/javascript">
        // 创建一个 Person 类
        class Person {
            // 构造方法
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            // 一般方法
            speak() {
                console.log(`我叫${this.name}，我年龄是${this.age}岁！`)
            }

        }
        
        // 创建一个 Student 类，继承于 Person 类
        class Student extends Person {
            constructor(name, age, grade) {
                super(name, age); 
                this.grade = grade;
            }

            // 重写从父类继承过来的方法
            speak() {
                console.log(`我叫${this.name}，我年龄是${this.age}岁，我是${this.grade}！`)
            }
            study() {
                console.log("我正在坚持学习画画！");
            }
        }

        const s1 = new Student('苏西', 4, '小学一年级');
        console.log(s1);
        s1.speak();
        s1.study();
    </script>
</body>

</html>