为何 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 做用域内上生效。

小结

本文涉及到的内容：

• 检查一个对象的类型；
• 如何使用 new 关键字定义函数（不是调用）；
• 如何正确地建立自定义构造函数。