JS進階之原型

以前有在本身的文章中談到對象，而說到對象咱們就不可避免的要扯到原型，而且原型也是咱們必須得理解到位的一個點，那接下來咱們就來聊一聊js的原型吧。

JS中一切皆爲對象，那麼原型也是一種對象。因此它有對象的特性，無非也是一系列無序鍵值對的集合，接着咱們就來具體看看吧

function person(name,age)
{
    this.name=name;
    this.age=age;   
}
var a=typeof person.prototype//object
var b=typeof person.prototype.constructor//function
var c=person.prototype.constructor==person//true

咱們能夠看到咱們建立了一個構造函數person，經過prototype找到了原型對象，咱們能夠看到如下幾點

• 用typeof能夠看到原型確實是一個對象
• 這個對象有一個constructor屬性，屬性值是function
• 這個function就等於構造函數person

此處咱們首先能夠明確了構造函數和原型對象的關係了吧

接着咱們再來看看原型和構造函數建立的對象的關係

function person(name,age)
{
    this.name=name;
    this.age=age;   
}
var pengl=new person("pengl",100);
var flag=person.prototype.constructor==pengl.constructor;//true

咱們依然能夠看到新建對象的構造函數就是原型對象的構造函數。

本質：原型對象中的原型兩字是對誰的原型，其實是對於新建的這些對象的原型，是這些對象中那些不變的，共有的東西，好比構造函數，各個對象的區別只是在於經過構造函數新建該對象時，傳入的參數不一樣。而像構造函數或者一些其餘創建在原型上的方法和屬性都是屬於原型級別的，只是新建的對象做爲它的具體實例能夠用而已。

咱們能夠從這樣一個角度來理解

function person(name,age)
{
    this.name=name;
    this.age=age;
    this.func=objFunc;
    function objFunc (argument) {
        alert("我是屬於新建對象的方法")  
    }   
}
var pengl=new person("pengl",100);
pengl.func();

另外一段代碼

function person(name,age)
{
    this.name=name;
    this.age=age;   
}
person.prototype.func=function (argument) {
      alert("我是屬於新建對象原型上的方法") 
}
var pengl=new person("pengl",100);
pengl.func();

第一段和第二段的區別就是是否把func方法建立在構造函數中，第一段就是直接在新建對象的級別上建立了一個方法，第二段是在新建對象的原型上建立的方法。從內存的角度看，對於第一段每建立一個對象，就要同時再建立一個func方法，而第二段是，不管建立多少個對象，都只須要一個func方法，這個方法是全部對象所共有的。

最後咱們就要引出原型鏈了

從原型鏈的鏈字咱們就能夠猜到大概是什麼意思，好比咱們使用一個方法，先從該對象上找，若是沒有那麼就從該對象的原型上找，若是該原型沒有，就從該原型的原型上找，以此類推。若是最後都沒找到，則返回undefined

上面例子中的原型鏈：

pengL->person.prototype->object.prototype->null

---

至此原型就到此爲止啦，咱們最後進行一下總結吧

• 原型是對象
• 原型包含了新建對象的各類共有的方法和屬性
• 使用對象的方法或屬性流程是：先從該對象找，沒有則從它的原型上找，再沒有，就從原型的原型上找，以此類推

PS：若是以上表述有問題，歡迎你們留言指正。