一次性精通 JavaScript 原型/继承/构造函数/类的原理（上）

前言

最近面试了很多前端同学，发现有不少同学的前端基础很薄弱，会使用 React/Vue 等库或框架，但对一些前端最核心的概念，如原型、继承、作用域、事件循环等却掌握的模棱两可。所以很多时候你问深入点的问题，或者涉及到原理时，就支支吾吾答不出来。

今天我们讲 JavaScript 里最核心的几个概念：原型、继承、构造函数和类。

原型

在 JavaScript 中，每个对象都有一个原型对象。原型对象是用于查找对象属性和方法的一个特殊对象。当您访问一个对象的属性或方法时，JavaScript 首先会在该对象中查找该属性或方法。如果没有找到，则会继续在该对象的原型对象中查找，依此类推。

原型对象可以是另一个对象，也可以是 null。如果一个对象的原型对象是 null，则该对象没有原型对象。

原型对象可以通过以下方式访问：

object.__proto__

例如：

const obj = {};
console.log(obj.__proto__ === Object.prototype); // true

在上面的示例中，obj 的原型对象是 Object.prototype。Object.prototype 是所有 JavaScript 对象的默认原型对象。

继承

继承是指一个对象可以从另一个对象继承属性和方法。在 JavaScript 中，继承可以通过以下方式实现：

• 原型继承： 原型继承是最常见的继承方式。当一个对象被创建时，它会自动继承其原型对象的所有属性和方法。
• 构造函数继承： 构造函数继承允许一个构造函数从另一个构造函数继承属性和方法。
• 类继承： 类继承是 JavaScript ES6 中引入的一种新的继承方式。类继承与构造函数继承类似，但语法更简洁。

构造函数

构造函数是一个用于创建对象的函数。当一个构造函数被调用时，它会创建一个新的对象。新对象会自动继承构造函数的原型对象的所有属性和方法。

构造函数可以通过以下方式定义：

function ConstructorFunction() {
  // 构造函数的代码
}

例如：

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

在上面的示例中，Person 是一个构造函数。当 Person 构造函数被调用时，它会创建一个新的 Person 对象。新的 Person 对象会自动继承 Person 构造函数的原型对象的所有属性和方法。

类

类是 JavaScript ES6 中引入的一种新的语法结构。类可以用来创建对象。类与构造函数类似，但语法更简洁。

类可以通过以下方式定义：

class ClassName {
  constructor() {
    // 类的方法
  }
}

例如：

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

在上面的示例中，Person 是一个类。当 Person 类被调用时，它会创建一个新的 Person 对象。新的 Person 对象会自动继承 Person 类的原型对象的所有属性和方法。

总结

原型、继承、构造函数和类是 JavaScript 中非常重要的概念。理解这些概念对于理解 JavaScript 的工作原理至关重要。在下一篇文章中，我们将继续探讨这些概念，并演示如何使用它们来创建自己的对象和类。