作为前端，你应该知道的JS构造函数和原型

什么是构造函数？

在面向对象编程（OOP）语言中，类是一种用来创建对象的模板。对象是类的实例，它具有类的所有属性和方法。在 ES6 之前，JavaScript 中并没有类的概念，而是使用构造函数来创建对象。

构造函数是一个特殊的函数，它可以在创建对象时调用。构造函数的名称通常以大写字母开头，以便与其他函数区分开来。例如，以下是一个创建 Person 对象的构造函数：

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

在上面的例子中，Person 构造函数有两个参数：name 和 age。当我们创建一个 Person 对象时，我们必须传递这两个参数。例如，以下代码创建了一个名为 "John Doe"、年龄为 30 岁的 Person 对象：

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

现在，我们可以使用 person 对象的属性和方法。例如，以下代码输出 "John Doe"：

console.log(person.name); // John Doe

什么是原型？

原型是 JavaScript 中的一个概念，它允许对象继承其他对象的属性和方法。每个对象都有一个原型，原型是一个对象，它包含该对象的所有属性和方法。

对象的原型可以通过 Object.getPrototypeOf() 方法获得。例如，以下代码获取 person 对象的原型：

const prototype = Object.getPrototypeOf(person);

现在，我们可以使用 prototype 对象的属性和方法。例如，以下代码输出 "object"：

console.log(prototype.constructor.name); // object

如何使用构造函数和原型

构造函数和原型是 JavaScript 中创建和操作对象的重要工具。我们可以使用它们来创建具有相同属性和方法的对象，并可以继承其他对象的属性和方法。

例如，以下代码创建了一个 Student 构造函数，它继承了 Person 构造函数：

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

Student.prototype = Object.create(Person.prototype);

在上面的例子中，Student 构造函数继承了 Person 构造函数的属性和方法。这意味着我们可以使用 Student 对象的属性和方法，以及 Person 对象的属性和方法。

例如，以下代码创建了一个名为 "Jane Doe"、年龄为 20 岁、专业为 "计算机科学" 的 Student 对象：

const student = new Student("Jane Doe", 20, "Computer Science");

现在，我们可以使用 student 对象的属性和方法。例如，以下代码输出 "Jane Doe"：

console.log(student.name); // Jane Doe

以下代码输出 "20"：

console.log(student.age); // 20

以下代码输出 "计算机科学"：

console.log(student.major); // 计算机科学

结语

构造函数和原型是 JavaScript 中创建和操作对象的重要工具。我们可以使用它们来创建具有相同属性和方法的对象，并可以继承其他对象的属性和方法。这使得 JavaScript 非常适合创建复杂的应用程序。