回到顶部

「 初音未来：歌姬计划 Mega39's+\游戏档案馆 」2023-06-07 「 戴拿&盖亚奥特曼\皮套摄影 」2024-08-02 「 宝可梦：白金\游戏档案馆 」2023-08-06 「 闪焰王牌/模玩摄影 」2024-08-06 「 多龙巴鲁托\模玩摄影 」2023-06-05 「 泽塔奥特曼\皮套摄影 」2023-06-07 「 阿尔宙斯\模玩摄影 」2023-06-07

如何在js中使用class #149

Anuluca Date : 2024-08-21 Tags : 2

在 JavaScript 中，class 是用来创建对象的模板，它提供了一个更直观的语法，用来定义面向对象编程中的类，本质上是 JavaScript 原型机制的语法糖。

使用 class 的基本示例

class Pokemon {
    constructor(name, type) {
        this.name = name;
        this.type = type;
    }

    intro() {
        console.log(`${this.name} is ${this.type} type.`);
    }
}

let pokemon1 = new Pokemon('Riolu', 'Fighting');
pokemon1.intro();  // 输出: Riolu is Fighting type.

一、class 的用法：

构造函数 (constructor)： class 中的 constructor 方法是一个特殊的方法，用于初始化类的实例。每次使用 new 操作符创建一个类的实例时，constructor 会被自动调用。
实例方法： 可以在 class 内定义方法，这些方法会被添加到类的原型对象上，因此可以被所有实例共享。
继承 (extends)： class 可以通过 extends 关键字继承另一个类，子类可以继承父类的属性和方法，并可以通过 super 关键字调用父类的构造函数和方法。

class Anuluca extends Pokemon {
    constructor(name, type, level) {
        super(name, type);
        this.level = level;
    }

    describe() {
        console.log(`${this.name} is Anuluca's pokemon, it's ${this.type} type and Lv.${this.level}.`);
    }
}

let pokemon2 = new Employee('Riolu', 'Fighting', 25);
pokemon1.intro();  // 输出: Riolu is Fighting type.
pokemon1.describe();  // 输出: Riolu is Anuluca's pokemon, it's Fighting type and Lv.25.

二、class 与 function 的相似点与区别

相似点：

类与构造函数： class 和 function 都可以用来创建对象。例如，通过函数构造器定义的函数和通过 class 定义的类在功能上是相似的：

function PokemonFunction(name, type) {
    this.name = name;
    this.type = type;
}

PokemonFunction.prototype.intro = function() {
    console.log(`${this.name} is ${this.type} type.`);
};

let pokemon1 = new PokemonFunction('Riolu', 'Fighting');
pokemon1.intro();  // 输出: Riolu is Fighting type.

原型机制： class 和 function 创建的对象都依赖于 JavaScript 的原型机制。通过 class 定义的方法实际上是被添加到 prototype 对象上的，类似于通过构造函数手动定义的原型方法。
实例化： 通过 new 操作符实例化对象，无论是 class 还是函数构造器，都可以使用 new 来创建新对象。

区别：

语法简洁性： class 提供了更简洁和直观的语法，尤其在定义继承关系和静态方法时，比函数构造器更为简单和易读。
严格模式： class 定义的代码自动运行在严格模式下，无需手动添加 “use strict”。而函数构造器默认不在严格模式下运行，除非你显式声明。
函数提升： 函数声明有函数提升，意味着你可以在定义函数之前调用它；而 class 声明没有提升，你必须在声明之后使用。

// 函数声明的提升
func();  // 输出: Hello from func

function func() {
    console.log('Hello from func');
}

// 类声明不会提升
const cla = new Cla();  // ReferenceError: Cannot access 'Cla' before initialization

class Cla {}

不可调用 class 本身： class 必须通过 new 操作符实例化后调用，而函数构造器可以直接调用（虽然通常也是通过 new 来调用以创建实例）。

function func() {
    console.log('This is a function');
}

func();  // 输出: This is a function

class Cla {
    constructor() {
        console.log('This is a class');
    }
}

Cla();  // TypeError: Class constructor MyClass cannot be invoked without 'new'