为什么 JavaScript 要设计原型模式

虽然 Object 构造函数或对象的字面量可以用来创建单个对象，但是这些方式有个明显的缺点，创建相同结构的对象，会产生大量的重复代码。

const person1 = {
    name: 'Zhang san',
    age: 18,
    job: 'Engineer',
    sayName: function() {
        alert(this.name);
    }
};

const person2 = {
    name: 'Li si',
    age: 18,
    job: 'Engineer',
    sayName: function() {
        alert(this.name);
    }
};
复制代码

person1 和 person2 具有相同的属性和方法，但它们之间没有复用。为了解决这个问题，有人开始使用工厂模式的一种变体。

工厂模式

工厂模式抽象了创建具体对象的过程。因为在 JavaScript 中没有类（ES6 中的类也是函数），开发人员就发明一种函数，用函数来封装以特定接口创建对象的细节，如下面的示例：

function createPerson(name, age, job) {
    let o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        console.log(this.name);
    }
    return o;
}

const person1 = createPerson('Zhang san', 18, 'Engineer');
const person2 = createPerson('Li si', 18, 'Doctor');
复制代码

函数 createPerson() 能够根据接受的参数构建一个包含所有必要信息的 Person 对象。可以无数次的调用这个函数，每次都会返回全新的 Person 对象。

然而，工厂模式虽然解决了创建多个相似对象的问题，但是没有解决对象的识别问题，即无法知道一个对象的类型。

随着 JavaScript 的发展，又出现了一种新的模式。

构造函数模式

ECMAScript 中的构造函数可以用来创建特定类型的对象。像 Object 和 Array 这样的原生构造函数，在运行时会自动在执行环境中调用。

因此，我们也可以为自定义对象设计构造函数。使用构造函数重写前面的例子。

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() {
        console.log(this.name);
    }
}

const person1 = new Person('Zhang san', 18, 'Engineer');
const person2 = new Person('Li si', 18, 'Doctor');
复制代码

Person() 函数取代了 createPerson() 函数。并且它们的代码有几个不同之处：

• 没有显式地创建对象；
• 直接将属性和方法赋值给 this 对象；
• 没有 return 语句。

要创建 Person 的新实例，必须使用 new 操作符。以这种方式调用构造函数会经历 4 个步骤：

1. 创建一个新对象；
2. 将构造函数的作用域赋值给新对象（指向 this）；
3. 执行构造函数中的代码；
4. 返回新对象。

使用 Person 构造函数创建对象时，对象会被添加一个 constructor 属性，该属性指向 Person，也就是构造函数的指针地址。

console.log(person1.constructor === Person); // true
console.log(person2.constructor === Person); // true
复制代码

对象的 constructor 属性可以用来标识对象的类型，这也是将 JavaScript 用于面向对象编程必不可少的特性。

但是在检测类型时，使用 instanceof 操作符会更可靠一些， 因为 constructor 属性有时可能会被修改。

我们来验证一下：

console.log(person1 instanceof Person); // true
console.log(person1 instanceof Object); // true
复制代码

如果测试 createPerson() 创建的对象是否是 Person 的实例，返回的会是 false。

1. 构造函数与普通函数的区别

构造函数与普通函数唯一的区别在于调用它们的方式不同。不过，构造函数毕竟也是函数，不存在定义构造函数的特殊语法。

任何函数，只要通过 new 操作符来调用，那么就可以作为构造函数；而任何函数，如果不通过 new 操作符来调用，那它跟普通的函数也没有什么两样。

例如，前面例子定义的 Person() 函数可以通过下列任何一种方式调用。

// 作为构造函数使用
const person = new Person('Zhang san', 18, 'Engineer');
person.sayName(); // Zhang san

// 作为普通函数调用
Person('Li si', 18, 'Doctor');
global.sayName(); // Li si
复制代码

使用 new 操作符来创建新对象时，Person() 作为构造函数。而不使用 new 操作符直接调用，属性和方法会被添加给 global 对象。

当在全局作用域中调用一个函数时，this 对象总是指向 global 对象（浏览器中是 window 对象）。因此，在调用完函数之后，可以通过 window/global 对象来调用 sayName() 方法，并且返回正确的值。

2. 构造函数的问题

构造函数虽然好用但也有缺点。使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。

我们来看一下 Person 构造函数的定义：

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    **this.sayName = new Function('console.log(this.name)');**
}

const person1 = new Person('Zhang san', 18, 'Engineer');
const person2 = new Person('Li si', 18, 'Doctor');
复制代码

用这个函数创建 person1 和 person2 都有一个名为 sayName() 的方法，但这两个方法不是同一个 Function 实例。

以这种方式创建函数，会导出现不同的作用域链和标识符解析，虽然它们做的事情是一样的，但不同的实例没有得到共享。

console.log(person1.sayName == person2.sayName); // false
复制代码

创建两个完成相同任务的 Function 实例，实属浪费内存。有 this 对象在，其实我们并不需要在构造函数的时候就将函数绑定到特定对象上。因此，大可像下面这样，通过函数定义转移到构造函数外部来解决这个问题。

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

function sayName() {
    console.log(this.name);
}
复制代码

我们把 sayName() 函数的定义转移到构造函数外部。而在构造函数内部，我们将 Person 的 sayName 属性设置成等于全局的 sayName 函数。这样一来，由于 sayName 包含的是一个指向函数的指针，因此 person1 和 person2 对象就共享了在全局作用域定义的同一个 sayName() 函数。

这样做确实解决了两个函数做同一件事的问题，但是又引入了两个新的问题：

1. 全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域变得名不副实。
2. 如果对象需要定义很多方法，那么就要定义很多个全局函数，于是我们这个自定义的对象类型就毫无封装性可言了。

原型模式的出场很好地解决了这个问题。

原型模式

我们创建的每一个函数其实都有一个 prototype 属性，这个属性是一个指针，指向一个对象，这个对象的属性和方法被由这个函数创建的所有实例共享。prototype 对象被称为这些实例的原型对象。

这样我们就可以把构造函数中定义对象的方法，直接添加到原型对象上，如下实例所示。

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

Person.prototype.sayName = function() {
    console.log(this.name);
}
复制代码

我们将 sayName() 方法和所有属性直接添加到 Person 的 prototype 属性中，Person 的所有实例就共用了同一个方法，同时又保证该方法只在 Person 作用域内上生效。