摘要：可能因為先入為主，在編程之中，往往不由自主地以的邏輯編程思路設計模式進行開發。這是原型模式很重要的一條原則。關于閉包與內存泄露的問題，請移步原型模式閉包與高階函數應該可以說是設計模式的基礎要領吧。在下一章，再分享一下的幾種常用設計模式。

在學習使用Javascript之前，我的程序猿生涯里面僅有接觸的編程語言是C#跟Java——忽略當年在大學補考了N次的C與VB。

從靜態編程語言，轉到動態語言JS，剛開始的時候，遇到不少困難與錯誤。可能因為先入為主，在JS編程之中，往往不由自主地以C#的邏輯、編程思路、設計模式進行JS開發。

時間長了，漸漸發現JS設計模式對于前端開發的重要性，但在分享JS設計模式之前，希望首先分享幾點個人覺得很重要的JS設計模式基礎。有些地方，可能研究得也不是很深入，有什么錯誤的話，望指正。

靜態類型語言，在編譯階段，就需要確定變量的類型。但動態類型語言，只有程序運行時，根據當時語言執行環境，變量才會賦予其類型。

所以C#，不能拋開runtime與編譯器多帶帶運行，Java也離不開JVM。同時也有一大堆問題需要考慮的，跨平臺、類型轉換、反射、Ioc、接口編程、抽象化、動態代理等等一大堆概念技術的產生，還不是因為靜態語言的強類型特性，需要更多的手段讓其得到靈活多態的特性。

    public class Main
    {
        public void Function()
        {
            //在編譯的時候，.net runtime必須要知道dog是一只狗
            Dog dog = new Dog();
            Console.WriteLine(dog.Name);
        }
    }

但，JS只需要個文本編輯器，沒有編譯通過不通過的概念，加載了瀏覽器就能跑。

    var a = 1;
    console.log(typeof a);//number

    a = "a";
    console.log(typeof a);//string

ECMAScript 5之前JS是沒有類的，W3C的大牛是有所發現的，所以ES6會新的類語法，但是各大瀏覽器（IE）猴年馬月才跟進就不得而知了——絕對不是針對IE。

在靜態類型語言開發中，類是任意實體的結構，當需要這個實體的時候，系統依照這個結構，“畫”出這個==對象==。
譬如，要設計車，首先是要設計稿，設計稿就是類，然后照著設計稿生產的每一臺車就是具體的對象。
所以，靜態類型語言當中，得到一個對象的最關鍵就是先有這個對象的設計稿（類），就是知道它的類型。

但是，JS不一樣。
JS是以原型模式作為設計基礎。得到一個對象之前，我們不關心對象屬于什么類型，它的設計稿是怎么樣的，JS是通過拷貝一個其他對象而獲得對象的。

    //定義超人是超人，超人可以飛
    var superman = {
        name: "superman",
        fly: function () {
            console.log(this.name + " is flying");
        }
    };
    superman.fly();//superman is flying

    //萬一，想要個妹子呢，搞個女超人如何？女超人也會飛？要不就復制一個超人的對象吧。
    //通過Object.create復制一個超人，但定義它是女超人。
    var superwomen = Object.create(superman);

    superwomen.name = "superwomen";
    superwomen.fly();//superwomen is flying

    //DC的不喜歡，來個漫威吧，再搞個鋼鐵俠？鋼鐵俠也會飛
    var ironman = Object.create(superman);

    ironman.name = "ironman";
    ironman.fly();//ironman is flying

千萬別誤解了superman就是類，而superwomen、ironman就是superman實例化得到的對象，superman、superwomen、ironman都是對象，superwomen、ironman都是superman對象拷貝的結果。

上面的例子，通過var obj={}創建對象，其等價于var obj=new Object()。Object對象可以創建對象，但不僅是Object才是對象，所有的數據都是對象，包括Number、Boolean、String、Function、Object。這是原型模式很重要的一條原則。
正是這一點，我們也可以利用function定義對象：function obj(){};。

不過與var obj=new Object()不同，function定義的對象，是一個帶構造器的函數，通過new關鍵字調用構造器可以獲取其原型對象。參考以下例子。

    //定義一個對象
    var superman = {
        name: "superman",
        fly: function () {
            console.log(this.name + " is flying");
        }
    };
    superman.fly();//superman is flying

    //定義一個函數，同時也是一個帶構造器的函數
    function superman2() {
        this.name = "superman";
        this.fly = function () {
            console.log(this.name + " is flying");
        };
    };

    //錯誤：superman2是函數，fly()不是函數
    superman2.fly();//error:undefined is not a function

    //錯誤：superman2()是調用函數，但函數沒有返回帶fly()函數的對象
    superman2().fly();//error:Cannot read property "fly" of undefined

    //正確：new不是C#實例化關鍵字，new是調用superman2的構造器并返回其對象
    var sm = new superman2();
    sm.fly();//superman is flying

當需要獲得對象屬性時，會首先請求對象本身，如果，對象本身沒有屬性可以響應，則響應其對象原型prototype；如果prototype也沒有屬性可以響應，則進一步請求原型的原型，從而形成一條原型鏈。當然，原型鏈的層級不能太長，具體長度沒有研究過，我覺得3級也差不多了。

    //定義人
    function human() {
        this.sexy = "male";
    };

    //定義所有英雄的原型
    function heroBase() {
        this.trait = "strong cool";
    };

    //英雄的原型是人
    heroBase.prototype = new human();

    //定義超人
    function superman() {
        this.fly = function () {
            console.log("superman");
        };
    };

    //超人的原型就是英雄
    superman.prototype = new heroBase();

    console.log(new superman().sexy);//male
    console.log(new superman().trait);//strong cool

這個步驟就是：

超人的性別是神馬？

光看超人不知道，要看超人原型：英雄

看英雄也不知道，要看英雄原型：人

人的sexy屬性告訴我們，他是男人

好吧，也許你發現了，上面例子是有bug的，超人是外星人；但你肯定發現了，這不就是繼承嗎？繼承都有了，多態還能遠嗎？

我個人的理解是，JS的繼承跟C#的繼承雖然實現形式不同，但有一點原則是相同的，單一繼承非多繼承。如上例子換成以下代碼：
superman.prototype = new heroBase();
superman.prototype = new human();
最終結果是，超人的原型首先定為英雄，但又被人所覆蓋了。符合單一繼承的原則。

之前一直以為搞懂了原型模式，最近看到一篇很好文章 [學習筆記] 小角度看JS原型鏈 夢禪，漲姿勢了。

在 segmentfault 上看到這樣一道題目：

var F = function(){};
Object.prototype.a = function(){};
Function.prototype.b = function(){};
var f = new F();

問：f 能取到a,b嗎？原理是什么？

關鍵理解：
prototype是對象原型
__proto__是對象構造器的原型
關于兩者區別，推薦一遍博文，解釋非常詳細，理解js中的原型鏈，prototype與__proto__的關系

自己列了例子，應該比較容易理解

    var F = function () { };
    Object.prototype.a = function () {
        console.log("a");
    };
    Function.prototype.b = function () {
        console.log("b");
    };
    var f = new F();

    //注意：對象的__proto__屬性，指向對象的父級構造器的prototype原型

    console.log(f);

    console.log(f.__proto__);                         //F.prototype
    console.log(F.prototype.__proto__);               //Ojbect.prototype
    console.log(Object.prototype.a());                //a

    console.log(f.__proto__.__proto__.a());           //a

    /****************************************************************/

    console.log(f.constructor);                       //F
    console.log(F.__proto__);                         //Function.prototype
    console.log(Function.prototype.b());              //b

    console.log(f.constructor.__proto__.b());         //b

    //結論：所有對象的__proto__都指向其構造器的prototype
    //結論：所有構造器/函數的__proto__都指向Function.prototype，它是一個空函數（Empty function）
    //結論：Function.prototype的__proto__最終指向Object.prototype

所有對象的__proto__都指向其構造器的prototype

所有構造器/函數的__proto__都指向Function.prototype，它是一個空函數（Empty function）

Function.prototype的__proto__最終指向Object.prototype

JS的多態是通過兩點實現的：1、原型模式實現繼承；2、動態類型實現泛型

回想一下，我們剛學習C#的那個經典例子

    public class Hero
    {
        public virtual void Fly()
        {
            Console.WriteLine("hero fly");
        }
    }

    public class SuperMan : Hero
    {
        public override void Fly()
        {
            base.Fly();
            Console.WriteLine("SuperMan fly");
        }
    }

    public class IronMan : Hero
    {
        public override void Fly()
        {
            base.Fly();
            Console.WriteLine("IronMan fly");
        }
    }

    public class Main
    {
        public void MainFunction()
        {
            LetsFly(new SuperMan());
            LetsFly(new IronMan());
        }

        public void LetsFly(Hero hero)
        {
            hero.Fly();
        }
    }

再來看看JS的實現

    function superman() {
        this.fly = function () {
            console.log("superman fly");
        };
    }

    function bird() {
        this.fly = function () {
            console.log("bird fly");
        };
    };

    function letsFly(hero) {
        hero.fly();
    }

    var sm = new superman();
    var b = new bird();
    letsFly(sm);//superman fly
    letsFly(b);//bird fly;

LetsFly()方法，C#跟JS接受的同樣都是Hero這個對象

對于C#而言，LetsFly方法要求不管是神馬Hero，只要實現了基類Hero的Fly，它就能執行LetsFly方法，以后即使有再多的英雄，繼承Hero即可。

而JS，LetsFly方法要求不管是神馬對象，只要有Fly方法，它就能執行LetsFly方法，以后即使有再多的英雄，英雄會Fly即可。

對比之下，優缺點是顯而易見的，前者受到束縛，尤其在復雜類型之間繼承與引用提現的更加凸顯，但類型安全性高；

后者無拘無束，但類型安全性低，如上例子，LetsFly傳入的可能不是Hero，很可能是Bird。

關于閉包“closure”，剛開始接觸的時候，百度了N遍相關教程還是看得我一頭霧水，
聽說還會有內存泄露的問題，好吧，在開發中干脆就不用吧。直到有一天，偶爾看到高階函數，對于閉包以及整個JS語言的理解可以說產生了翻天覆地的變化。

在這之前，先給大家回顧一下，閉包之所以成為閉包之前，有一個很重要的前提概念：變量的生命周期。
在函數體內，var定義的變量，變量屬于函數內，函數外無法訪問；反之如果沒有定義var的變量，像x=12，x屬于全局變量。
全局變量的生命周期是永久的，由頁面加載到關閉；而內部變量，從函數執行到結束，GC檢測到內部變量沒有再被使用則會銷毀它。

    var fn = function () {
        var a = "a";
        b = "b";

        var fni = function () {
            c = "c";
        }();
    }();

    //console.log(a);//a is not defined
    console.log(b);//b
    console.log(c);//c

關鍵就在這，如果內部變量在函數執行結束后，仍然有被使用呢？

解決方案就是——高階函數。

高階函數名字看起來高端，實際很簡單，滿足以下條件其一就是高階函數：

1、函數的參數是函數；

2、函數的返回值是函數；

    function myFunction() {
        console.log("我是個函數");
    };
    //高階函數1——函數的參數是函數
    function fnHO1(fn) {
        fn();
    }
    //高階函數2——函數的返回值是函數
    function fnHO2() {
        return myFunction;
    };

    //調用高階函數1
    fnHO1(myFunction);//我是個函數

    //調用高階函數2
    fnHO2();//神馬都沒有發生

    //調用高階函數2，獲得的是它的內部函數體
    var f2 = fnHO2();
    //再執行，才是調用它的內部函數
    f2();//我是個函數

在高階函數的基礎，我們來看看，史上最經典的閉包實例。

    function add_outer() {
        var i = 1;

        //返回值是內部函數，inner調用了其外部的變量
        //所以inner執行結束時，i沒有被銷毀
        return function inner() {
            i++;
            return i;
        };
    };

    //執行add_outer獲取的是它的內部函數體inner，但沒有執行
    var inner = add_outer();

    //真正執行的時候，變量i沒有被銷毀，形成遞增
    console.log(inner());//2
    console.log(inner());//3
    console.log(inner());//4

我對于閉包的理解很簡單：==函數返回值是個內部函數，內部調用了函數的內部變量==。

兩個條件，缺一不可。如果將以上例子改一下，內部有函數，但不是返回值，就不是閉包了。

    function add_outer() {
        var i = 1;

        //返回值不是函數，形成不了閉包
        function inner() {
            i++;
            console.log(i);
        };
        inner();
    };

    //執行多次，值也不會變
    add_outer();//2
    add_outer();//2

也許大家會疑問，既然內部變量i在函數結束后仍然使用，導致GC無法回收其內存，那不就是內存泄露嗎？
是的。其實我們反過來想，如果我們不使用閉包的方式實現以上累加的例子，改為使用全局變量存放變量i，全局變量i是否同樣也是不能被回收呢？！

    //function add_outer() {
        var i = 1;

        function inner() {
            i++;
            return i;
        };
    //};

    ////執行add_outer獲取的是它的內部函數體inner，但沒有執行
    //var inner = add_outer();

    //真正執行的時候，變量i沒有被銷毀，形成遞增
    console.log(inner());//2
    console.log(inner());//3
    console.log(inner());//4

因此，閉包與高階函數，只是函數式編程的編寫方式，即使并不是造成內存泄露的原因。關于閉包與內存泄露的問題，請移步 http://www.cnblogs.com/yakun/p/3932026.h...

原型模式、閉包與高階函數應該可以說是JS設計模式的基礎要領吧。在下一章，再分享一下JS的幾種常用設計模式。

還是像前面所說的，有什么地方說錯，望大家指正。