ES6的Class本质是语法糖，本质上还是ES5的原型和原型链

2023-11-15 07:38:30

ES6 的 class 基本上可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

对象原型

在 JavaScript 中，每个对象都有一个原型对象，原型对象也是一个对象，它包含了该对象的所有属性和方法。当访问对象不存在的属性或方法时，JavaScript 会在该对象的原型对象中查找。如果在原型对象中找到了该属性或方法，则直接使用它；如果在原型对象中找不到，则继续在原型对象的原型对象中查找，依此类推，直到找到该属性或方法为止。

原型链

原型链是指对象之间的继承关系链。在 JavaScript 中，每个对象都有一个原型对象，原型对象也有一个原型对象，依此类推，直到遇到 null 为止。对象的原型链可以追溯到 Object.prototype，Object.prototype 是所有对象的最终原型对象。

ES6 Class

在 ES6 中，class 用于定义一个类。类是一种特殊的函数，它可以创建对象实例。类与函数的区别在于，类可以定义属性和方法，而函数只能定义方法。

ES6 的 class 语法只是为了让对象原型的写法更加清晰，让代码看起来更像面向对象编程的语法而已。ES5 中的原型和原型链机制也可以实现同样的功能。

ES5 实现类

在 ES5 中，可以使用以下步骤实现一个类：

定义一个构造函数。构造函数的名称就是类的名称。构造函数用于创建对象实例。
在构造函数中定义属性和方法。
使用 prototype 属性将属性和方法添加到类的原型对象中。

示例

以下是一个 ES5 中实现类的示例：

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

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

const person = new Person('John Doe', 30);

person.greet(); // Hello, my name is John Doe and I am 30 years old.