1，前言

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

排名

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

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

2，面對對象（OOP）

2.1 實(shí)現(xiàn)思路

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

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

2.2 原型概念

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

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

2.3 對象創(chuàng)建

在JS中，對象創(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();此處沒有使用extends顯式繼承，不可使用super()this.name='lala';} } var a=new A() //其實(shí)后面兩種方法本質(zhì)上是一種寫法復(fù)制代碼

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

2.3 查看對象原型

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

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

無論對象是如何創(chuàng)建的，默認(rèn)原型都是Object，在這里需要提及的比較特殊的一點(diǎn)就是，通過構(gòu)造函數(shù)來創(chuàng)建對象，函數(shù)A本身也是一個(gè)對象，而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 () {}復(fù)制代碼

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

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

2.4 原型的用法

其實(shí)原型和類的繼承的用法是一致的：當(dāng)你想用某個(gè)對象的屬性時(shí)，將當(dāng)前對象的原型指向該對象，你就擁有了該對象的使用權(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復(fù)制代碼

---

（增補(bǔ)）

如果使用ES6來做的話則簡單許多，甚至不涉及到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"復(fù)制代碼

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

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

---

2.5 原型鏈

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

3，總結(jié)

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

4，后記（增補(bǔ)）

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

總結(jié)

以上是生活随笔為你收集整理的JavaScript原型详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。