Klassenvererbung

class ist eine neue Funktion von ES6, die auch das Schlüsselwort „extens“ einführt, das in Bezug auf das Schreiben tatsächlich einfacher zu akzeptieren ist und für Leute, die Java gelernt haben, sehr einfach ist. Wenn dies Ihr erster Kontakt mit der Klasse ist, wird empfohlen, zu Baidu zu gehen, um die Definition und die Grundprinzipien der Klassenverwendung herauszufinden. Jetzt werde ich Sie so behandeln, als ob Sie alle Klassen gelernt hätten.

/* 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 在跑步

Sieht das nicht viel klarer aus? Werfen wir übrigens einen Blick auf die Vererbungsbeziehung. Wir können sehen, dass Mikes Prototyp eine Person ist, der Prototyp einer Person ein Objekt ist und der Prototyp des Objekts ein Objekt ist (der Pfeil kann unendlich angeklickt werden):

Das Obige ist das grundlegendste grammatikalische Format der JavaScript-Klassenvererbung. Lassen Sie mich einige Wissenspunkte zur Klasse hinzufügen:

Statische Attribute : Attribute, auf die nur über Klassen oder statische Methoden zugegriffen werden kann, verwenden statische Dekoration
Statische Methode : Eine Methode, auf die nur über die Klasse zugegriffen werden kann. Sie können auf die statischen Eigenschaften in der Klasse zugreifen und statische Dekoration verwenden
Öffentliche Attribute : Der Zugriff kann direkt über Klasseninstanzen erfolgen
Private Attribute : Auf Klasseninstanzen kann nicht zugegriffen werden, nur über Klassenmethoden, geändert mit #

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());

Konsolenausgabe:

Das ist also alles für die Vererbung von JavaScript-Klassen. Die Klasse ist wirklich einfach zu verwenden, aber nicht alle Mainstream-Browser unterstützen die ES6-Klasse, daher müssen Sie ihr mehr Aufmerksamkeit schenken und als letzten Ausweg den Prototyp verwenden!

Lassen Sie uns über die Klasse von JavaScript sprechen

Klassenvererbung

Ich denke du magst