返回

前端基础精讲：原型篇（上）

前端

在这篇文章中，我们将讨论 JavaScript 中的原型是什么，以及在 JavaScript 中如何实现面向对象编程。

JavaScript 是一种基于原型的语言，这意味着它不使用类，而是使用原型来创建对象。原型是用于创建新对象的模板，它包含了对象的属性和方法。

当您使用 new 创建新对象时，JavaScript 引擎会创建一个该构造函数的拷贝，然后将该拷贝作为新对象的原型。这使得您可以通过原型向对象添加属性和方法，而无需修改构造函数本身。

例如，以下代码创建了一个名为 Person 的构造函数，该构造函数具有一个名为 name 的属性和一个名为 greet 的方法：

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

  this.greet = function() {
    console.log(`Hello, my name is ${this.name}.`);
  };
}

当执行上面的代码之后，JavaScript 引擎将会创建两个该构造函数的拷贝，一个是 person1 另一个是 person2。从图中可以看出，每个对象都拥有自己的 name 属性和 greet 方法。

const person1 = new Person('John');
const person2 = new Person('Mary');

person1.greet(); // Hello, my name is John.
person2.greet(); // Hello, my name is Mary.

原型还可以用于实现继承。当您创建一个新的构造函数时，您可以将另一个构造函数作为其原型。这使得您可以复用另一个构造函数的属性和方法，而无需重新编写它们。

例如，以下代码创建了一个名为 Employee 的构造函数，该构造函数继承了 Person 构造函数：

function Employee(name, title) {
  Person.call(this, name);

  this.title = title;
}

Employee 构造函数继承了 Person 构造函数的 name 属性和 greet 方法。此外，Employee 构造函数还添加了一个新的 title 属性。

const employee = new Employee('John', 'Software Engineer');

employee.greet(); // Hello, my name is John.
console.log(employee.title); // Software Engineer

原型是 JavaScript 中一个非常重要的概念。它允许您创建对象、添加属性和方法，以及实现继承。如果您想在 JavaScript 中编写面向对象代码，那么您需要对原型有一个很好的理解。