前端面试必备 | 使用原型和构造函数创建对象（原型篇：上）

本文翻译自 https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b，作者 Rupesh Mishra，翻译时有删改，标题有改动。

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

使用构造函数 constructor 创建对象的问题

看看下面的代码：

function Human(firstName, lastName) {
  this.firstName = firstName,
  this.lastName = lastName,
  this.fullName = function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = new Human("Virat", "Kohli");
console.log(person1)

我们使用 Human 构造函数创建 person1 和 person2 两个对象：

var person1 = new Human("Virat", "Kohli");
var person2 = new Human("Sachin", "Tendulkar");

当执行上面的代码之后，JavaScript 引擎将会创建两个该构造函数的拷贝，一个是 person1 另一个是 person2。

构造函数创建对象

从图中可以看出，每个对象都拥有 firstName lastName fullName 这三个属性。每个使用构造函数创建的对象都会拥有自己的属性和方法，但是我们没有必要声明多个 fullName 函数，这会浪费内存。接下来，我们看看如何解决这个问题。

原型

在 JavaScript 中创建一个函数的时候，JavaScript 引擎会添加一个 prototype 属性给这个函数，这个 prototype 属性指向一个对象，这就是我们所说的原型对象。原型对象默认会有一个 constructor 属性，这个 constructor 指向的就是有 prototype 属性的函数。看下面的图示：

如上图，Human 构造函数有一个 prototype 属性指向原型对象。而原型对象有一个 constructor 属性又指回了这个构造函数。让我们看下面的代码：

function Human(firstName, lastName) {
  this.firstName = firstName,
  this.lastName = lastName,
  this.fullName = function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = new Human("Virat", "Kohli");
console.log(person1)

输出的结果

通过下面的代码访问 Human 构造函数的原型属性：

console.log(Human.prototype)

从上面的图片可以看出，函数的原型属性是一个有两个属性的对象（原型对象&