JS中Class类是什么

什么是类？

类是用于创建一类对象的模板，而通过这个模板创建出来的对象叫做实例。

类的定义

定义一个类为 Person，每个Person都会跑，都有名字

类中封装的并不是变量和函数，因此不能使用关键字 let、const 或 var

class Person {
    constructor(surname, name) {
        this.surname = surname;
        this.name = name;
    }
    work() {
        console.log("打工人，打工魂，打工都是人上人");
    }
    getName() {
        return this.surname + this.name;
    }
}

const p1 = new Person("张", "三");
p1.work();
console.log(p1.getName());

语法中constructor为创建的实例对象添加了属性和方法。

语法中的work和getName我称之为共用的方法，所有的实例对象都可以使用。主要有以下三个特征：

• 公共的方法不属于任何一个实例对象，但是所有的实例对象都可以调用。
• 公共的方法中的this指向调用该方法的实例对象。
• 实例对象调用方法的时候优先调用实例自身的方法，如果实例本身没有该方法，才会去调用公共方法。

使用类创建对象——new 类名{}

注意：

1. 在类中声明方法的时候，方法前不加 function 关键字
2. 方法之间不要用逗号分隔，否则会报错
3. 类的内部所有定义的方法，都是不可枚举的（non-enumerable）
4. 一个类中只能拥有一个 constructor 方法，否则将抛出 一个 SyntaxError

类关键字

关键字	描述
extends	继承一个类
static	在类中定义一个静态方法
super	调用父类的构造方法

1.extends

extends 关键字用于创建一个类，该类是另一个类的子类。子类继承了另一个类的所有方法。

2.static

类（class）通过 static 关键字定义静态方法。

静态方法调用直接在类上进行，不能在类的实例上调用。

静态方法通常用于创建实用程序函数。

// 语法
class 类名 {
    static 静态属性名 = 静态属性值;
    static 静态方法名() {
        // 实例方法code
    }
}

// 案例
class SayHi {
    constructor(name) {
        this.name = name;
    }
    static hello() {
        return "Hello";
    }
}

let p1 = new SayHi("World");

// 可以在类中调用 'hello()' 方法
SayHi.hello(); //Hello

// 不能通过实例化后的对象调用静态方法
// p1.hello();
// 以上代码会报错

3.super

super用于访问和调用一个对象的父对象上的函数

class Site {
    constructor(name) {
        this.sitename = name;
    }
    present() {
        return "我喜欢" + this.sitename;
    }
}

class Work extends Site {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
    show() {
        return this.present() + ", 我已经工作了 " + this.age + " 年。";
    }
}

let works = new Work("前端开发", 5);

类的继承

• 类的继承子类可以使用父类的实例属性和实例方法（需要注意的是在实例调用方法的时候，会优先调用自身的方法，如果没有则会调用类的公共方法，如果类没有该方法则会调用父类的公共方法）
• 如果子类有构造函数，要先使用super()方法调用父类的构造函数,否则会报语法错误

class 子类名 extends 父类名 {
    constructor (父类构造函数的参数...,子类构造函数的参数) {
        // super方法调用父类的构造函数
        super(父类构造函数的参数);
    }
}

扩展：实现单例模式

let isOperate = false;

//普通构造函数方法，不能异步处理
function OpenDenoiseEngines(that, callback) {
    console.log(that, "that");
    console.log(this, "this");
    isOperate = true;
    callback(isOperate);
}

OpenDenoiseEngines.getInstance = function (that, callback) {
    console.log(this.instance, "this.instance");
    if (!this.instance) {
        this.instance = new OpenDenoiseEngines(that, callback);
    }
    return this.instance;
};
const openDenoiseEngine1 = (that, callback) => OpenDenoiseEngines.getInstance(that, callback);

// class构造函数
class Engine {
    constructor(that, callback) {
        this._this = that;
        this.fn = callback;
    }
    async OpenDenoiseEngines() {
        await 1111111;
        console.log(this._this, "that");
        console.log(this, "this");
        isOperate = true;
        this.fn(isOperate);
    }
}

Engine.getInstance = function (that, callback) {
    console.log(this.instance, "this.instance");
    if (!this.instance) {
        this.instance = new Engine(that, callback).OpenDenoiseEngines();
    }
    return this.instance;
};

const openDenoiseEngine2 = (that, callback) => Engine.getInstance(that, callback);