1，前言

下面是2008年Github創(chuàng)建以來(lái)，各種編程語(yǔ)言的排名情況

其中JavaScript自2015年之后就盤踞第一名，成為github上被使用最多的語(yǔ)言，早期，JS的使用還主要集中于瀏覽器中，但是隨著node.js進(jìn)軍服務(wù)器開發(fā)和React Native逐漸向移動(dòng)端滲透，一個(gè)屬于JS的全棧時(shí)代就要來(lái)臨了。而且JS界還流傳一句名言：“所有能用JS開發(fā)的應(yīng)用程序，最終都會(huì)用JS來(lái)開發(fā)”。我就問你怕不怕？

好了，說(shuō)了這么多，我并不是想說(shuō)JS為世界上最好的語(yǔ)言（顯然PHP才是，對(duì)吧？←_←），也不是覺得JS會(huì)替代誰(shuí)，我只是覺得，JavaScript將會(huì)是一個(gè)大家(不止web端)都應(yīng)該了解和學(xué)習(xí)的語(yǔ)言工具。

2，面對(duì)對(duì)象（OOP）2.1 實(shí)現(xiàn)思路

面對(duì)對(duì)象是大家都很熟悉的程序設(shè)計(jì)思想，是對(duì)真實(shí)世界的抽象，目前主要OOP語(yǔ)言用來(lái)實(shí)現(xiàn)面對(duì)對(duì)象的基礎(chǔ)是類，通過類的封裝，繼承來(lái)映射真實(shí)世界。包括Java，C#，甚至是python等都通過類的設(shè)計(jì)來(lái)實(shí)現(xiàn)面對(duì)對(duì)象。但是細(xì)想起來(lái)也會(huì)覺得有問題，因?yàn)檎鎸?shí)世界其實(shí)沒有類這種概念，只有一個(gè)個(gè)不同的對(duì)象，真實(shí)世界中，繼承關(guān)系發(fā)生在對(duì)象和對(duì)象之間，而不是類。就比如孩子是對(duì)象，父母也是對(duì)象，孩子（對(duì)象）繼承自父母（對(duì)象）

JS也是面對(duì)對(duì)象的編程語(yǔ)言，只不過它實(shí)現(xiàn)面對(duì)對(duì)象的思路是基于原型（prototype）,而不是類。這種思路也叫對(duì)象關(guān)聯(lián)（Object Link Other Object），即在對(duì)象上直接映射那種真實(shí)世界的關(guān)系（如繼承）。

2.2 原型概念

相關(guān)的概念其實(shí)我研究了好幾天，除開原型概念本身，與之聯(lián)系的對(duì)象的產(chǎn)生，構(gòu)造函數(shù)，proto,prototype的區(qū)別，為什么對(duì)象沒有prototype這個(gè)指向原型的屬性,而是使用proto來(lái)指向原型？

好，我們先來(lái)談?wù)勗瓦@個(gè)概念。JS中一切皆對(duì)象，而每個(gè)對(duì)象都有一個(gè)原型（Object除外），這個(gè)原型，大概就像Java中的父類，所以，基本上你可以認(rèn)為原型就是這個(gè)對(duì)象的父對(duì)象，即每一個(gè)對(duì)象（Object除外）內(nèi)部都保存了它自己的父對(duì)象，這個(gè)父對(duì)象就是原型。一般創(chuàng)建的對(duì)象如果沒有特別指定原型，那么它的原型就是Object(這就很類似Java中所有的類默認(rèn)繼承自O(shè)bject類)。

2.3 對(duì)象創(chuàng)建

在JS中，對(duì)象創(chuàng)建的方法有很多種，最常見的如下：

//第一種，手動(dòng)創(chuàng)建var a={'name':'lala'}; //第二種，構(gòu)造函數(shù)function A(){ this.name='lala';}var a=new A();//第三種，class (ES6標(biāo)準(zhǔn)寫法)class A{ constructor(){super();this.name='lala'; }}var a=new A()//其實(shí)后面兩種方法本質(zhì)上是一種寫法

這三種寫法創(chuàng)建的對(duì)象的原型（父對(duì)象）都是Object,需要提到的是，ES6通過引入class ,extends等關(guān)鍵字，以一種語(yǔ)法糖的形式把構(gòu)造函數(shù)包裝成類的概念，更便于大家理解。是希望開發(fā)者不再花精力去關(guān)注原型以及原型鏈，也充分說(shuō)明原型的設(shè)計(jì)意圖和類是一樣的。

2.4 查看對(duì)象原型

當(dāng)對(duì)象被創(chuàng)建之后，查看它們的原型的方法不止一種，以前一般使用對(duì)象的proto屬性，ES6推出后，推薦用Object.getPrototypeOf()方法來(lái)獲取對(duì)象的原型

function A(){ this.name='lala';}var a=new A();console.log(a.__proto__) //輸出：Object {}//推薦使用這種方式獲取對(duì)象的原型console.log(Object.getPrototypeOf(a)) //輸出：Object {}

無(wú)論對(duì)象是如何創(chuàng)建的，默認(rèn)原型都是Object，在這里需要提及的比較特殊的一點(diǎn)就是，通過構(gòu)造函數(shù)來(lái)創(chuàng)建對(duì)象，函數(shù)A本身也是一個(gè)對(duì)象，而A有兩個(gè)指向表示原型的屬性，分別是proto和prototype，而且兩個(gè)屬性并不相同

function A(){ this.name='lala';}var a=new A();console.log(A.prototype) //輸出：Object {}console.log(A.__proto__) //輸出：function () {}console.log(Object.getPrototypeOf(A))//輸出：function () {}

函數(shù)的的prototype屬性只有在當(dāng)作構(gòu)造函數(shù)創(chuàng)建的時(shí)候，把自身的prototype屬性值賦給對(duì)象的原型。而實(shí)際上，作為函數(shù)本身，它的原型應(yīng)該是function對(duì)象，然后function對(duì)象的原型才是Object。

總之，建議使用ES6推薦的查看原型和設(shè)置原型的方法。

2.5 原型的用法

其實(shí)原型和類的繼承的用法是一致的：當(dāng)你想用某個(gè)對(duì)象的屬性時(shí)，將當(dāng)前對(duì)象的原型指向該對(duì)象，你就擁有了該對(duì)象的使用權(quán)了。

function A(){ this.name='world ';}function B(){ this.bb="hello" }var a=new A();var b=new B();Object.setPrototypeOf(a,b);//將b設(shè)置為a的原型,此處有一個(gè)問題，即a的constructor也指向了B構(gòu)造函數(shù)，可能需要糾正a.constructor=A;console.log(a.bb)//輸出 hello

（增補(bǔ)）

如果使用ES6來(lái)做的話則簡(jiǎn)單許多，甚至不涉及到prototype這個(gè)屬性

class B{ constructor(){this.bb='hello' }}class A extends B{ constructor(){super()this.name='world' }}var a=new A();console.log(a.bb+" "+a.name);//輸出hello worldconsole.log(typeof(A))//輸出 "function"

怎么樣？是不是已經(jīng)完全看不到原型的影子了？活脫脫就是類繼承，但是你也看得到實(shí)際上類A 的類型是function，所以說(shuō)，本質(zhì)上class在JS中是一種語(yǔ)法糖，JS繼承的本質(zhì)依然是原型，不過，ES6引入class，extends 來(lái)掩蓋原型的概念也是一個(gè)很友好的舉動(dòng)，對(duì)于長(zhǎng)期學(xué)習(xí)那些類繼承為基礎(chǔ)的面對(duì)對(duì)象編程語(yǔ)言的程序員而言。

我的建議是，盡可能理解原型，盡可能用class這種語(yǔ)法糖。

2.6 原型鏈

這個(gè)概念其實(shí)也變得比較簡(jiǎn)單，可以類比類的繼承鏈條，即每個(gè)對(duì)象的原型往上追溯，一直到Object為止，這組成了一個(gè)鏈條，將其中的對(duì)象串聯(lián)起來(lái)，當(dāng)查找當(dāng)前對(duì)象的屬性時(shí)，如果沒找到，就會(huì)沿著這個(gè)鏈條去查找，一直到Object，如果還沒發(fā)現(xiàn)，就會(huì)報(bào)undefined。那么也就意味著你的原型鏈不能太長(zhǎng)，否則會(huì)出現(xiàn)效率問題。

3，總結(jié)對(duì)于原型概念的理解類比類的繼承，對(duì)象的原型可以理解為對(duì)象的父對(duì)象原型的運(yùn)用盡可能使用ES6的標(biāo)準(zhǔn)，使用class，extends,Object.getPrototype(),Object.setPrototype()等等需要注意的點(diǎn)原型繼承鏈條不要太長(zhǎng)指定原型時(shí)，注意constructor也會(huì)改變。4，后記（增補(bǔ)）

還有人覺得我的分析很抽象，所以，我再總結(jié)一下，如果要一句話理解JS中的原型是什么，那就是，對(duì)象的原型就指的對(duì)象的父對(duì)象。每個(gè)對(duì)象都有父對(duì)象，父對(duì)象本身也有父對(duì)象（爺對(duì)象？）。而原型鏈呢，很像過去家譜的概念，可以從你往上追溯你父親，到爺爺，到太爺爺一直到頭，這就形成了一個(gè)鏈條，如果其中每個(gè)人都比作一個(gè)對(duì)象，那么這個(gè)鏈條就是原型鏈。