前言

與大部分面向?qū)ο笳Z言不同，ES6之前中并沒有引入類（class）的概念，JavaScript并非通過類而是直接通過構(gòu)造函數(shù)來創(chuàng)建實(shí)例。在介紹原型和原型鏈之前，我們有必要先復(fù)習(xí)一下構(gòu)造函數(shù)的知識(shí)。

構(gòu)造函數(shù)

構(gòu)造函數(shù)模式的目的就是為了創(chuàng)建一個(gè)自定義類，并且創(chuàng)建這個(gè)類的實(shí)例。構(gòu)造函數(shù)模式中擁有了類和實(shí)例的概念，并且實(shí)例和實(shí)例之間是相互獨(dú)立的，即實(shí)例識(shí)別。
構(gòu)造函數(shù)就是一個(gè)普通的函數(shù)，但是仍然有幾點(diǎn)差別：

區(qū)別:

1.構(gòu)造函數(shù)習(xí)慣上首字母大寫
2.調(diào)用方式的不同，普通函數(shù)是直接調(diào)用，而構(gòu)造函數(shù)需要使用new關(guān)鍵字來調(diào)用。
3.執(zhí)行流程不同：
構(gòu)造函數(shù)的執(zhí)行流程：

A、立刻在堆內(nèi)存中創(chuàng)建一個(gè)新的對(duì)象
B、然后傳遞給構(gòu)造函數(shù)的this
C、逐個(gè)執(zhí)行函數(shù)中的代碼
D、將新建的對(duì)象作為返回值

4.普通函數(shù)因?yàn)闆]有返回值，所以打印常為undefined 構(gòu)造函數(shù)會(huì)馬上創(chuàng)建一個(gè)新對(duì)象，并將該新對(duì)象作為返回值返回

//普通函數(shù)
function person(){} 
var per = person();
console.log(per) //undefined
//構(gòu)造函數(shù)
function Person(){} 
var per =new Person();
console.log(per) //Person {}

5.構(gòu)造函數(shù)內(nèi)部用this 來構(gòu)造屬性和方法
栗子??

function Person(name, color) {
  this.name = name;
  this.color = color;
  this.sayHello = function () {
    console.log('hello');
  };
}

var person1 = new Person('jack', '白色');
var person2 = new Person('rose', '黑色');

person1.sayHello === person2.sayHello
// false

上面代碼中，person1和person2是同一個(gè)構(gòu)造函數(shù)的兩個(gè)實(shí)例，它們都具有sayHello方法。由于sayHello方法是生成在每個(gè)實(shí)例對(duì)象上面，所以兩個(gè)實(shí)例就生成了兩次。也就是說，每新建一個(gè)實(shí)例，就會(huì)新建一個(gè)sayHello方法。這既沒有必要，又浪費(fèi)系統(tǒng)資源，因?yàn)樗衧ayHello方法都是同樣的行為，完全應(yīng)該共享。

這個(gè)問題的解決方法，就是 JavaScript 的原型對(duì)象（prototype）。

prototype 屬性的作用

JavaScript 繼承機(jī)制的設(shè)計(jì)思想就是，原型對(duì)象的所有屬性和方法，都能被實(shí)例對(duì)象共享。也就是說，如果屬性和方法定義在原型上，那么所有實(shí)例對(duì)象就能共享，不僅節(jié)省了內(nèi)存，還體現(xiàn)了實(shí)例對(duì)象之間的聯(lián)系。

下面，先看怎么為對(duì)象指定原型。JavaScript 規(guī)定，每個(gè)函數(shù)都有一個(gè)prototype屬性，指向一個(gè)對(duì)象。

function Person() {

}
// 雖然寫在注釋里，但是你要注意：
// prototype是函數(shù)才會(huì)有的屬性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

那這個(gè)函數(shù)的 prototype 屬性到底指向的是什么呢？是這個(gè)函數(shù)的原型嗎？

其實(shí)，函數(shù)的 prototype 屬性指向了一個(gè)對(duì)象，這個(gè)對(duì)象正是調(diào)用該構(gòu)造函數(shù)而創(chuàng)建的實(shí)例的原型，也就是這個(gè)例子中的 person1 和 person2 的原型。

在聲明了一個(gè)函數(shù)后，這個(gè)構(gòu)造函數(shù)（聲明了的函數(shù)）中會(huì)有一個(gè)屬性prototype，這個(gè)屬性指向的就是這個(gè)構(gòu)造函數(shù)（聲明了的函數(shù)）對(duì)應(yīng)的原型對(duì)象；

如下圖：

image

在舉個(gè)栗子：

function Person(name) {
  this.name = name;
}
Person.prototype.color = 'white';

var person1 = new Person('大毛');
var person2 = new Person('二毛');

person1.color // 'white'
person2.color // 'white'

上面代碼中，構(gòu)造函數(shù)Person的prototype屬性，就是實(shí)例對(duì)象person1和person2的原型對(duì)象。原型對(duì)象上添加一個(gè)color屬性，結(jié)果，實(shí)例對(duì)象都共享了該屬性。
原型對(duì)象的屬性不是實(shí)例對(duì)象自身的屬性。只要修改原型對(duì)象，變動(dòng)就立刻會(huì)體現(xiàn)在所有實(shí)例對(duì)象上。

Person.prototype.color = 'yellow';
person1.color // "yellow"
person2.color // "yellow"

上面代碼中，原型對(duì)象的color屬性的值變?yōu)?strong>yellow，兩個(gè)實(shí)例對(duì)象的color屬性立刻跟著變了。這是因?yàn)閷?shí)例對(duì)象其實(shí)沒有color屬性，都是讀取原型對(duì)象的color屬性。也就是說，當(dāng)實(shí)例對(duì)象本身沒有某個(gè)屬性或方法的時(shí)候，它會(huì)到原型對(duì)象去尋找該屬性或方法。這就是原型對(duì)象的特殊之處。

如果實(shí)例對(duì)象自身就有某個(gè)屬性或方法，它就不會(huì)再去原型對(duì)象尋找這個(gè)屬性或方法。

function Person(name) {
  this.name = name;
}
var person1 = new Person('大毛');
var person2 = new Person('二毛');
person1.color = 'black';
Person.prototype.color = 'yellow';

person1.color // 'black'
person2.color // 'yellow'

上面代碼中，實(shí)例對(duì)象person1的color屬性改為black，就使得它不再去原型對(duì)象讀取color屬性，后者的值依然為yellow。

總結(jié)一下，原型對(duì)象的作用，就是定義所有實(shí)例對(duì)象共享的屬性和方法。這也是它被稱為原型對(duì)象的原因，而實(shí)例對(duì)象可以視作從原型對(duì)象衍生出來的子對(duì)象。

讓我們用一張圖表示構(gòu)造函數(shù)和實(shí)例原型之間的關(guān)系：

image

對(duì)于普通函數(shù)來說，該屬性基本無用。但是，對(duì)于構(gòu)造函數(shù)來說，生成實(shí)例的時(shí)候，該屬性會(huì)自動(dòng)成為實(shí)例對(duì)象的原型。

在這張圖中我們用 Object.prototype 表示實(shí)例原型。

那么我們?cè)撛趺幢硎緦?shí)例與實(shí)例原型，也就是 person 和 Person.prototype 之間的關(guān)系呢，這時(shí)候我們就要講到第二個(gè)屬性：

proto

這是每一個(gè)JavaScript對(duì)象(除了 null )都具有的一個(gè)屬性，叫_proto_**，這個(gè)屬性會(huì)指向該對(duì)象的原型。

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

于是我們更新下關(guān)系圖：

image

既然實(shí)例對(duì)象和構(gòu)造函數(shù)都可以指向原型，那么原型是否有屬性指向構(gòu)造函數(shù)或者實(shí)例呢？

constructor

指向?qū)嵗故菦]有，因?yàn)橐粋€(gè)構(gòu)造函數(shù)可以生成多個(gè)實(shí)例，但是原型指向構(gòu)造函數(shù)倒是有的，這就要講到第三個(gè)屬性：constructor，每個(gè)原型都有一個(gè) constructor 屬性指向關(guān)聯(lián)的構(gòu)造函數(shù)。

為了驗(yàn)證這一點(diǎn)，我們可以嘗試：

function Person() {

}
console.log(Person === Person.prototype.constructor); // true

所以再更新下關(guān)系圖：

image

function Person() {

}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 順便學(xué)習(xí)一個(gè)ES5的方法,可以獲得對(duì)象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

現(xiàn)在我們就了解了構(gòu)造函數(shù)、實(shí)例原型、和實(shí)例之間的關(guān)系了

原型鏈

JavaScript 規(guī)定，所有對(duì)象都有自己的原型對(duì)象（prototype）。一方面，任何一個(gè)對(duì)象，都可以充當(dāng)其他對(duì)象的原型；另一方面，由于原型對(duì)象也是對(duì)象，所以它也有自己的原型。因此，就會(huì)形成一個(gè)“原型鏈”（prototype chain）：對(duì)象到原型，再到原型的原型……

如果一層層地上溯，所有對(duì)象的原型最終都可以上溯到Object.prototype，即Object構(gòu)造函數(shù)的prototype屬性。也就是說，所有對(duì)象都繼承了Object.prototype的屬性。這就是所有對(duì)象都有valueOf和toString方法的原因，因?yàn)檫@是從Object.prototype繼承的。

那么，Object.prototype對(duì)象有沒有它的原型呢？回答是Object.prototype的原型是null。null沒有任何屬性和方法，也沒有自己的原型。因此，原型鏈的盡頭就是null。

Object.getPrototypeOf(Object.prototype)   //null

上面代碼表示，Object.prototype對(duì)象的原型是null，由于null沒有任何屬性，所以原型鏈到此為止。Object.getPrototypeOf方法返回參數(shù)對(duì)象的原型。

image

讀取對(duì)象的某個(gè)屬性時(shí)，JavaScript 引擎先尋找對(duì)象本身的屬性，如果找不到，就到它的原型去找，如果還是找不到，就到原型的原型去找。如果直到最頂層的Object.prototype還是找不到，則返回undefined。如果對(duì)象自身和它的原型，都定義了一個(gè)同名屬性，那么優(yōu)先讀取對(duì)象自身的屬性，這叫做“覆蓋”。

注意，一級(jí)級(jí)向上，在整個(gè)原型鏈上尋找某個(gè)屬性，對(duì)性能是有影響的。所尋找的屬性在越上層的原型對(duì)象，對(duì)性能的影響越大。如果尋找某個(gè)不存在的屬性，將會(huì)遍歷整個(gè)原型鏈。

舉例來說，如果讓構(gòu)造函數(shù)的prototype屬性指向一個(gè)數(shù)組，就意味著實(shí)例對(duì)象可以調(diào)用數(shù)組方法。

var MyArray = function () {};

MyArray.prototype = new Array();

var mine = new MyArray();
mine.push(1, 2, 3);
mine instanceof Array // true

參考文獻(xiàn)：http://javascript.ruanyifeng.com/oop/prototype.html#toc3
https://github.com/mqyqingfeng/Blog/issues/2

作者：廢柴碼農(nóng)
鏈接：http://www.itdecent.cn/p/30a1a94d3fc8
來源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。