深刻理解javascript原型和閉包（3）——prototype原型

既typeof以後的另外一位老朋友！

prototype也是咱們的老朋友，即便不瞭解的人，也應該都聽過它的大名。若是它仍是您的新朋友，我估計您也是javascript的新朋友。

 

在我們的第一節（深刻理解javascript原型和閉包（1）——一切都是對象）中說道，函數也是一種對象。他也是屬性的集合，你也能夠對函數進行自定義屬性。

不用等我們去試驗，javascript本身就先作了表率，人家就默認的給函數一個屬性——prototype。對，每一個函數都有一個屬性叫作prototype。

這個prototype的屬性值是一個對象（屬性的集合，再次強調！），默認的只有一個叫作constructor的屬性，指向這個函數自己。

如上圖，SuperType是是一個函數，右側的方框就是它的原型。

原型既然做爲對象，屬性的集合，不可能就只弄個constructor來玩玩，確定能夠自定義的增長許多屬性。例如這位Object大哥，人家的prototype裏面，就有好幾個其餘屬性。

咦，有些方法怎麼似曾類似？

對！彆着急，以後會讓你知道他們爲什麼似曾相識。

接着往下說，你也能夠在本身自定義的方法的prototype中新增本身的屬性

        function Fn() { }
        Fn.prototype.name = '王福朋';
        Fn.prototype.getYear = function () {
            return 1988;
        };

看到沒有，這樣就變成了

沒問題！

可是，這樣作有何用呢？ —— 解決這個問題，我們仍是先說說jQuery吧。

var $div = $('div');
$div.attr('myName', '王福朋');

以上代碼中，$('div')返回的是一個對象，對象——被函數建立的。假設建立這一對象的函數是 myjQuery。它實際上是這樣實現的。

        myjQuery.prototype.attr = function () {
            //……
        };
        $('div') = new myjQuery();

不知道你們有沒有看明白。

若是用我們本身的代碼來演示，就是這樣

        function Fn() { }
        Fn.prototype.name = '王福朋';
        Fn.prototype.getYear = function () {
            return 1988;
        };

        var fn = new Fn();
        console.log(fn.name);
        console.log(fn.getYear());

即，Fn是一個函數，fn對象是從Fn函數new出來的，這樣fn對象就能夠調用Fn.prototype中的屬性。

由於每一個對象都有一個隱藏的屬性——「__proto__」，這個屬性引用了建立這個對象的函數的prototype。即：fn.__proto__ === Fn.prototype

這裏的"__proto__"成爲「隱式原型」，下回繼續分解。

 

---------------------------------------------------------------------------

本文已更新到《深刻理解javascript原型和閉包》的目錄，更多內容可參見《深刻理解javascript原型和閉包》。

另外，歡迎關注個人微博。

學習做者教程：《前端JS高級面試》《前端JS基礎面試題》《React.js模擬大衆點評webapp》《zepto設計與源碼分析》《json2.js源碼解讀》