文章目录

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


类简单介绍

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

运行结果(浏览器控制台)如下:

less js定义参数_开发语言

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

运行结果(浏览器控制台)如下:

less js定义参数_开发语言


我们看到了,不一样的写法,完全一致的结果。

类的基础知识

先准备一个类 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>

上面的代码运行结果如下:

less js定义参数_less js定义参数_03


科普几个基础且重要的知识点:

  • 类中构造器不是必须要写的,只有在要对实例进行一些初始化的操作,如添加指定属性时才写。
  • 构造器中的 this 就是类的实例对象。
  • 一般方法 speak 放在了 Person 类的原型对象上,供 Person 类及其子类的实例对象使用。
  • less js定义参数_开发语言_04

  • 通过 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>

运行结果如下:

less js定义参数_javascript_05

关于 super 方法:

如果 A 类继承了 B 类,且 A 类中写了构造器,那么 A 类构造器中的 super 是必须要调用的,而且要写在 A 类构造器中的第一行。

OK!js 中类的基础就先介绍到这里~~