JS – 原型與原型鏈

JS – 原型與原型鏈

這篇文章,我覺得是新手在一開始入門JS最難的部分。想當初剛開始看的時候,一直都搞不懂,最後放棄。等真的工作後,慢慢了解JS,似乎才懂了。在這邊快點筆記一下,也方便未來查閱。

首先,在ES6之前,我們要寫 類(class) 都是通過構造涵式,來寫的,像這樣。

function Star(name,age){
    this.name = name;
    this.age = age;
    this.sing = function(){
       console.log("我會唱歌")
    }
}

var ldh = new Star('劉德華',28)

但這樣寫構造函數會有一個問題。Star 涵數中的 sing方法,每當創建一個實例出來,它就會在堆內存中開僻一塊空間,來存放這涵數引用的地址。如果實例非常多個,這樣就會造成資源浪費。如果要解決這問題就是要使用prototype了!讓涵數共享,而非每個實例調用自己的函數。

那甚麼是prototype呢?

javascript 規定。每個構造函數都會有一個 prototype屬性。可以把一些不變的方法定義在 prototype 上。這樣就可以讓 每個物件實例來共享這些方法。

因此,我們的程式可以改成這樣,sing涵數就變成每個實例對象可共用的函數了。

 function Star(name,age){
    this.name = name;
    his.age = age; 
}
Star.prototype.sing = function(){
    onsole.log("我會唱歌")
}

var ldh = new Star('劉德華',28)

另外,每個實例物件都會有__proto__屬性,它指向的是 構造涵中的 prototype 物件,也因為有__proto__ 所以每個實例才能調用 sing 方法。如果用圖來表示,會是這樣:

理解原型後,在看一張圖表。事實上,構造函數與原型之間,會有一層鏈式結構,稱之原型鍊。