class inheritance

class is a new feature of ES6, which also introduces the extends keyword, which is indeed easier to accept in terms of writing, and it is very easy for people who have learned Java. If this is your first contact with class, it is recommended to go to Baidu to find out the definition and basic principles of use of class. Now I will treat you as if you have all learned class.

/* class 语法格式：
class ClassName {
    constructor() { ... }
    method_name1() { ... }
    method_name2() { ... }
} 

注意：class 不是对象，而是对象的模板！


继承 语法格式：
class son extends father{
    constructor() { ... }
    method_name3() { ... }
} */

//测试案例，还是最开始的 example
'use strict'

class Person {
    
    
    //使用 class 的时候，实例的属性必须定义在类的构造函数里，注意是实例属性，不是静态之类的
    constructor(name) {
    
    
        this.name = name;
    }

    //父类方法，不需要使用 function 关键字哦
    eat() {
    
    
        console.log(this.name + " 在吃饭");
    }
}

//编写子类，继承父类
class College_student extends Person {
    
    
    constructor(name, age) {
    
    
        //使用 super 调用父类的构造函数，是不是和 Java 类似
        super(name);
        this.age = age;
    }

    //子类方法
    run() {
    
    
        console.log(this.name + " 在跑步");
    }

}

//创建实例
let Mike = new College_student("Mike", 21);
Mike.eat();									//输出 Mike 在吃饭
Mike.run();									//输出 Mike 在跑步

Doesn't this way look a lot clearer! Let's take a look at the inheritance relationship by the way, and we can see that Mike's prototype is Person, Person's prototype is Object, and Object's prototype is Object (the arrow can be infinitely clicked):

The above is the most basic grammatical format of JavaScript class inheritance. Let me add some knowledge points about class:

Static attributes : attributes that can only be accessed through classes or static methods, use static decoration
Static method : a method that can only be accessed through the class, you can access the static properties in the class, use static decoration
Public properties : can be accessed directly using class instances
Private attributes : cannot be accessed using class instances, only through class methods, modified with #

class Test {
    
    
    
    variable_1 = 10;			//带初值的公有属性，前面不要手贱写 let 或者 var
    variable_2;					//不带初值的私有属性
    #variable_3 = 20;			//带初值的私有属性，前面使用 # 代表私有
    #variable_4;				//不带初值的私有属性

    constructor(value_1, value_2, value_3, value_4) {
    
    
        //这里我们将所有的属性都重新赋值，只需要注意私有属性在赋值的时候也需要带上 #
        this.variable_1 = value_1;
        this.variable_2 = value_2;
        this.#variable_3 = value_3;
        this.#variable_4 = value_4;
    }

    //静态属性，使用 static 修饰
    static variable_5 = "Hello World";

    //静态方法，使用 static 修饰
    static getVariable_5() {
    
    
        return this.variable_5;
    }

    /*这里我们想要获取私有属性，只能通过类中的方法。如果学习过 Java，完全按照 Java 中 get() 和 		set() 的写法就行。get() 用于获取私有属性，set() 用于设置私有属性的值 */
    getVariable_3() {
    
    
        return this.#variable_3;
    }

    getVariable_4() {
    
    
        return this.#variable_4;
    }
}

//创建类实例
let test = new Test(10, 20, 30, 40);
//1、公有属性直接通过类实例获取
console.log("variable_1 = " + test.variable_1);
console.log("variable_2 = " + test.variable_2);
//2、私有属性通过类的 get() 方法获取
console.log("variable_3 = " + test.getVariable_3());
console.log("variable_4 = " + test.getVariable_4());
//3、静态属性通过类名访问
console.log("(Use class, not an instance)variable_5 = " + Test.variable_5);
//4、静态属性通过类静态方法访问
console.log("(Use static function)variable_5 = " + Test.getVariable_5());

Console output:

So that's all for JavaScript class inheritance. class is really easy to use, but not all mainstream browsers support ES6 class, so you need to pay more attention to it, and you have to use prototype as a last resort!

Let’s talk about JavaScript’s class

class inheritance

Guess you like