JavaScript中类与构造函数与普通函数之间的区别

1. Class 语法糖

class语法糖引入于ES6，用于创建类。它使得创建和管理对象原型更清晰和更接近传统面向对象编程语言的语法。

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

    greet() {
        console.log(`my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const john = new Person('zzz', 30);
john.greet();  // Hello, my name is zzz and I am 30 years old.

 

特点：

• 更清晰的语法：class语法看起来更像其他面向对象语言，如Java、C++。
• 方法定义简洁：在类中定义方法时，不需要使用function关键字。
• constructor方法：构造函数，专门用于初始化对象。
• 继承：使用extends和super关键字更加便捷的实现继承。

2. 构造函数

在ES6之前，JavaScript使用构造函数来创建对象。

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

Person.prototype.greet = function() {
    console.log(`my name is ${this.name} and I am ${this.age} years old.`);
};

const john = new Person('zzz', 30);
john.greet();  // Hello, my name is zzz and I am 30 years old.

特点：

• 使用function关键字：构造函数本质上是一个普通的函数，但通过new关键字调用时会创建一个新的对象实例。
• 原型链：方法需要手动添加到构造函数的原型上，凭借此来实现对象之间方法的共享。
• 没有class语法的简洁性：没有class语法的简洁和结构化，但功能上等价。

3. 普通函数

普通函数与构造函数唯一的区别是调用方式。普通函数不会使用new关键字来调用，因此不会创建新的对象实例。

function greet() {
    console.log('Hello, world!');
}

greet();  // Hello, world!

特点：

• 无实例化能力：调用普通函数时，不会创建新的对象实例。
• 没有this的特殊行为：在普通函数中，this的值取决于调用的上下文，而不是固定指向新创建的实例。

总的来比较的话：

从语法和可读性上来说class语法更清晰和结构化，更接近传统面向对象编程语言，并且方法的定义上在class中，方法定义更简洁，不需要使用function关键字。在继承上class语法提供了更简单和直观的继承机制（extends和super关键字）。在对于对象的实例化上普通的构造函数和通过Class语法糖创建出来的 “类” 都需要通过new关键字实例化对象，但在构造函数中如果想要设置方法的话，需要手动设置方法到原型上，而class语法则会自动处理这个细节。