ES11 中解决类 init 方法和构造函数的区别

在 ES6 中引入了 class 关键字来定义类，而 init 方法被用来代替了传统的构造函数。ES11 引入了新的语法支持直接声明构造函数，这样解决了类 init 方法和构造函数的区别问题。

传统构造函数与 ES6 中的 init 方法

在 ES6 中，类定义如下：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    init() {
        console.log(`My name is ${this.name}, I'm ${this.age} years old.`);
    }
}

在该定义中，constructor 用于初始化对象的实例成员，而 init 方法可以在类的实例上直接调用，用于执行每次创建对象时的初始化操作。

类构造函数的定义

ES11 中引入了直接在类声明上定义构造函数的语法，如下所示：

class Person {
    name;
    age;

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}

与 ES6 中的定义相比，该语法允许我们在类定义上直接声明构造函数，而不需要在类定义中引入 init 方法。

类构造函数与实例构造函数

需要注意的是，在 ES6 中，init 方法被称为“实例构造函数”，该方法只能在类的实例上调用。而在 ES11 中，类定义上的构造函数被称为“类构造函数”，该方法只能在类定义上调用。

实例代码

下面是使用类构造函数和实例构造函数的示例代码，代码中定义了一个名为 Person 的类，用于描述一个人的基本信息。其中类构造函数定义了 name 和 age 属性，实例构造函数定义了 sayHello 方法。

class Person {
    name;
    age;

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}.`);
    }

    static sayHi() {
        console.log(`Hi there!`);
    }
}

const person1 = new Person('Alice', 25);
person1.init();
person1.sayHello();

const person2 = new Person('Bob', 30);
person2.sayHello();

总结

ES11 中引入的直接声明类构造函数的语法可以使类定义更加清晰明了，同时也避免了类实例构造函数和类构造函数之间的混淆。这种语法的引入对于前端开发者来说具有重要的指导意义，可以提高代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6596ac12eb4cecbf2da74a86