Hablemos de la clase de JavaScript

herencia de clase

class es una nueva característica de ES6, que también introduce la palabra clave extends, que es más fácil de aceptar en términos de escritura y es muy fácil para las personas que han aprendido Java. Si este es tu primer contacto con la clase, se recomienda ir a Baidu para conocer la definición y los principios básicos de uso de la clase. Ahora te trataré como si hubieras aprendido toda la clase.

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

¿No se ve mucho más claro de esta manera? Por cierto, echemos un vistazo a la relación de herencia. Podemos ver que el prototipo de Mike es Persona, el prototipo de Persona es Objeto y el prototipo de Objeto es Objeto (la flecha se puede hacer clic infinitamente):

Lo anterior es el formato gramatical más básico de la herencia de clase de JavaScript. Permítanme agregar algunos puntos de conocimiento sobre la clase:

• Atributos estáticos : atributos a los que solo se puede acceder a través de clases o métodos estáticos, use decoración estática
• Método estático : un método al que solo se puede acceder a través de la clase, puede acceder a las propiedades estáticas en la clase, use decoración estática
• Propiedades públicas : se puede acceder directamente usando instancias de clase
• Atributos privados : no se puede acceder usando instancias de clase, solo a través de métodos de clase, modificado con #

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

Salida de la consola:

Eso es todo para la herencia de clases de JavaScript. La clase es realmente fácil de usar, pero no todos los navegadores principales son compatibles con la clase ES6, por lo que debe prestarle más atención y debe usar el prototipo como último recurso.