面试题：JavaScript类与构造函数协同运作基础

类和构造函数的关系：
- 在JavaScript中，类是一种基于原型继承的语法糖，而构造函数是创建对象实例的传统方式。类本质上是对构造函数的包装，提供了更简洁、清晰的面向对象编程语法。
- 当使用new关键字调用构造函数时，它会创建一个新对象，该对象的[[Prototype]]指向构造函数的prototype属性。类在ES6引入后，也遵循类似的原型继承机制。
使用构造函数初始化类的实例代码示例：
- 构造函数方式：

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function () {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    };
}
let person1 = new Person('Alice', 30);
person1.sayHello();

类方式（等价实现）：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}
let person2 = new Person('Bob', 25);
person2.sayHello();

类的属性和方法在构造函数和类定义中的不同表现形式：
- 属性：
  - 构造函数中：实例属性直接在构造函数内部通过this关键字定义，每个实例都有自己独立的一份。例如this.name = name;。这种方式定义的属性属于实例本身。
  - 类定义中：实例属性也是在constructor方法中通过this定义，如this.name = name;。在类的公共字段提案（还未完全标准化，但一些环境已支持）中，可以直接在类体中定义实例属性，如name;然后在constructor中赋值this.name = name;。类定义方式更清晰地组织了属性定义和初始化逻辑。
- 方法：
  - 构造函数中：方法通常在构造函数内部定义为函数表达式，这意味着每个实例都会创建一个新的函数实例，占用更多内存。例如this.sayHello = function () {... };。
  - 类定义中：方法定义在类体中，以简洁的方法声明形式出现，如sayHello() {... }。这些方法会被添加到类的原型上，所有实例共享这些方法，节省内存空间。这是因为类语法下方法实际是定义在类的prototype对象上。

星途面试题库

面试题：JavaScript类与构造函数协同运作基础

知识考点

面试题答案