面试题：JavaScript中原型继承与类的区别之基础认知

Question

请简要阐述JavaScript中通过原型继承创建对象和使用ES6类创建对象在语法和工作原理上的主要区别。

Answer 1

语法区别

1. 原型继承创建对象：
   • 先定义构造函数，在构造函数内部使用 this 来定义实例属性。例如：

function Animal(name) {
    this.name = name;
}
// 通过原型添加方法
Animal.prototype.speak = function() {
    console.log(this.name +'makes a sound.');
};
// 创建实例
let dog = new Animal('Buddy');

- 使用 `prototype` 来添加共享的属性和方法，实例通过 `__proto__` 链接到原型对象。

2. ES6类创建对象： - 使用 class 关键字定义类，在 constructor 方法中定义实例属性。例如：

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name +'makes a sound.');
    }
}
// 创建实例
let dog = new Animal('Buddy');

- 类的方法直接定义在类体中，看起来更像是传统面向对象语言的语法。

工作原理区别

1. 原型继承创建对象：

   • 构造函数本身是一个函数，通过 new 关键字调用构造函数时，会创建一个新的空对象，该对象的 __proto__ 会指向构造函数的 prototype 属性。
   • 构造函数内部的 this 指向新创建的对象，在构造函数执行完毕后，返回这个新对象。
   • 所有实例共享构造函数 prototype 上的属性和方法，这是一种基于原型链的动态查找机制。如果实例本身没有某个属性或方法，会沿着原型链向上查找。

2. ES6类创建对象：

   • ES6类本质上是对原型继承的一种语法糖。
   • 同样使用 new 关键字创建实例，在后台仍然是基于原型链的机制。class 内部定义的方法实际上会被添加到类的 prototype 上。
   • 类在创建时会进行一些额外的语法检查和处理，使得代码结构更清晰，更符合面向对象编程的习惯。同时，类的定义是块级作用域，提升了代码的可读性和可维护性。