函式表示式和函式宣告

在ECMAScript中，建立函式的最常用的兩個方法是函式表示式和函式宣告，兩者期間的區別是有點暈，因為ECMA規範只明確了一點：函式宣告必須帶有標示符（Identifier）（就是大家常說的函式名稱），而函式表示式則可以省略這個標示符：

　　函式宣告:

　　function 函式名稱 (引數：可選){ 函式體 }

　　函式表示式：

　　function 函式名稱（可選）(引數：可選){ 函式體 }

所以，可以看出，如果不宣告函式名稱，它肯定是表示式，可如果聲明瞭函式名稱的話，如何判斷是函式宣告還是函式表示式呢？ECMAScript是通過上下文來區分的，如果function foo(){}是作為賦值表示式的一部分的話，那它就是一個函式表示式，如果function foo(){}被包含在一個函式體內，或者位於程式的最頂部的話，那它就是一個函式宣告。

  function foo(){} // 宣告，因為它是程式的一部分  var bar = function foo(){}; // 表示式，因為它是賦值表示式的一部分
  new function bar(){}; // 表示式，因為它是new表示式
  (function(){
    function bar(){} // 宣告，因為它是函式體的一部分  })();

Module 模式簡介及面向duix

Module模式是JavaScript程式設計中一個非常通用的模式，一般情況下，大家都知道基本用法，本文嘗試著給大家更多該模式的高階使用方式。

首先我們來看看Module模式的基本特徵：

1. 模組化，可重用
2. 封裝了變數和function，和全域性的namaspace不接觸，鬆耦合
3. 只暴露可用public的方法，其它私有方法全部隱藏

關於Module模式，最早是由YUI的成員Eric Miraglia在4年前提出了這個概念，我們將從一個簡單的例子來解釋一下基本的用法（如果你已經非常熟悉了，請忽略這一節）。

基本用法

先看一下最簡單的一個實現，程式碼如下：

var Calculator = function (eq) {
    //這裡可以宣告私有成員
    var eqCtl = document.getElementById(eq);

    return {
        //
 
 暴露公開的成員        add: function (x, y) {
            var val = x + y;
            eqCtl.innerHTML = val;
        }
    };
};

我們可以通過如下的方式來呼叫：

var calculator = new Calculator('eq');
calculator.add(2, 2);

大家可能看到了，每次用的時候都要new一下，也就是說每個例項在記憶體裡都是一份copy，如果你不需要傳引數或者沒有一些特殊苛刻的要求的話，我們可以在最後一個}後面加上一個括號，來達到自執行的目的，這樣該例項在記憶體中只會存在一份copy，不過在展示他的優點之前，我們還是先來看看這個模式的基本使用方法吧。

匿名閉包

匿名閉包是讓一切成為可能的基礎，而這也是JavaScript最好的特性，我們來建立一個最簡單的閉包函式，函式內部的程式碼一直存在於閉包內，在整個執行週期內，該閉包都保證了內部的程式碼處於私有狀態。

(function () {
    // ... 所有的變數和function都在這裡宣告，並且作用域也只能在這個匿名閉包裡    // ...但是這裡的程式碼依然可以訪問外部全域性的物件}());

注意，匿名函式後面的括號，這是JavaScript語言所要求的，因為如果你不宣告的話，JavaScript直譯器預設是宣告一個function函式，有括號，就是建立一個函式表示式，也就是自執行，用的時候不用和上面那樣在new了，當然你也可以這樣來宣告：

(function () {/* 內部程式碼 */})();

不過我們推薦使用第一種方式

引用全域性變數

JavaScript有一個特性叫做隱式全域性變數，不管一個變數有沒有用過，JavaScript直譯器反向遍歷作用域鏈來查詢整個變數的var宣告，如果沒有找到var，直譯器則假定該變數是全域性變數，如果該變數用於了賦值操作的話，之前如果不存在的話，直譯器則會自動建立它，這就是說在匿名閉包裡使用或建立全域性變數非常容易，不過比較困難的是，程式碼比較難管理，尤其是閱讀程式碼的人看著很多區分哪些變數是全域性的，哪些是區域性的。

不過，好在在匿名函式裡我們可以提供一個比較簡單的替代方案，我們可以將全域性變數當成一個引數傳入到匿名函式然後使用，相比隱式全域性變數，它又清晰又快，我們來看一個例子：

(function ($, YAHOO) {
    // 這裡，我們的程式碼就可以使用全域性的jQuery物件了，YAHOO也是一樣} (jQuery, YAHOO));

現在很多類庫裡都有這種使用方式，比如jQuery原始碼。

不過，有時候可能不僅僅要使用全域性變數，而是也想宣告全域性變數，如何做呢？我們可以通過匿名函式的返回值來返回這個全域性變數，這也就是一個基本的Module模式，來看一個完整的程式碼：

var blogModule = (function () {
    var my = {}, privateName = "部落格園";

    function privateAddTopic(data) {
        // 這裡是內部處理程式碼    }

    my.Name = privateName;
    my.AddTopic = function (data) {
        privateAddTopic(data);
    };

    return my;
} ());

上面的程式碼聲明瞭一個全域性變數blogModule，並且帶有2個可訪問的屬性：blogModule.AddTopic和blogModule.Name，除此之外，其它程式碼都在匿名函式的閉包裡保持著私有狀態。同時根據上面傳入全域性變數的例子，我們也可以很方便地傳入其它的全域性變數。

擴充套件

Module模式的一個限制就是所有的程式碼都要寫在一個檔案，但是在一些大型專案裡，將一個功能分離成多個檔案是非常重要的，因為可以多人合作易於開發。再回頭看看上面的全域性引數匯入例子，我們能否把blogModule自身傳進去呢？答案是肯定的，我們先將blogModule傳進去，新增一個函式屬性，然後再返回就達到了我們所說的目的，上程式碼：

var blogModule = (function (my) {
    my.AddPhoto = function () {
        //新增內部程式碼      };
    return my;
} (blogModule)); 

這段程式碼，看起來是不是有C#裡擴充套件方法的感覺？有點類似，但本質不一樣哦。同時儘管var不是必須的，但為了確保一致，我們再次使用了它，程式碼執行以後，blogModule下的AddPhoto就可以使用了，同時匿名函式內部的程式碼也依然保證了私密性和內部狀態。

鬆耦合擴充套件

上面的程式碼儘管可以執行，但是必須先宣告blogModule，然後再執行上面的擴充套件程式碼，也就是說步驟不能亂，怎麼解決這個問題呢？我們來回想一下，我們平時宣告變數的都是都是這樣的：

var cnblogs = cnblogs || {} ;

這是確保cnblogs物件，在存在的時候直接用，不存在的時候直接賦值為{}，我們來看看如何利用這個特性來實現Module模式的任意載入順序：

var blogModule = (function (my) {

    // 新增一些功能       
    return my;
} (blogModule || {}));  

通過這樣的程式碼，每個單獨分離的檔案都保證這個結構，那麼我們就可以實現任意順序的載入，所以，這個時候的var就是必須要宣告的，因為不宣告，其它檔案讀取不到哦。

緊耦合擴充套件

雖然鬆耦合擴充套件很牛叉了，但是可能也會存在一些限制，比如你沒辦法重寫你的一些屬性或者函式，也不能在初始化的時候就是用Module的屬性。緊耦合擴充套件限制了載入順序，但是提供了我們過載的機會，看如下例子：

var blogModule = (function (my) {
    var oldAddPhotoMethod = my.AddPhoto;

    my.AddPhoto = function () {
        // 過載方法，依然可通過oldAddPhotoMethod呼叫舊的方法    };

    return my;
} (blogModule));

通過這種方式，我們達到了過載的目的，當然如果你想在繼續在內部使用原有的屬性，你可以呼叫oldAddPhotoMethod來用。

克隆與繼承

var blogModule = (function (old) {
    var my = {},
        key;

    for (key in old) {
        if (old.hasOwnProperty(key)) {
            my[key] = old[key];
        }
    }

    var oldAddPhotoMethod = old.AddPhoto;
    my.AddPhoto = function () {
        // 克隆以後，進行了重寫，當然也可以繼續呼叫oldAddPhotoMethod    };

    return my;
} (blogModule));

這種方式靈活是靈活，但是也需要花費靈活的代價，其實該物件的屬性物件或function根本沒有被複制，只是對同一個物件多了一種引用而已，所以如果老物件去改變它，那克隆以後的物件所擁有的屬性或function函式也會被改變，解決這個問題，我們就得是用遞迴，但遞迴對function函式的賦值也不好用，所以我們在遞迴的時候eval相應的function。不管怎麼樣，我還是把這一個方式放在這個帖子裡了，大家使用的時候注意一下就行了。

立即呼叫的函式表示式及自呼叫

在JavaScript裡，任何function在執行的時候都會建立一個執行上下文，因為為function宣告的變數和function有可能只在該function內部，這個上下文，在呼叫function的時候，提供了一種簡單的方式來建立自由變數或私有子function。

在JavaScript裡，任何function在執行的時候都會建立一個執行上下文，因為為function宣告的變數和function有可能只在該function內部，這個上下文，在呼叫function的時候，提供了一種簡單的方式來建立自由變數或私有子function。

// 由於該function裡返回了另外一個function，其中這個function可以訪問自由變數i
// 所有說，這個內部的function實際上是有許可權可以呼叫內部的物件。
function makeCounter() {
    // 只能在makeCounter內部訪問i    var i = 0;

    return function () {
        console.log(++i);
    };
}

// 注意，counter和counter2是不同的例項，分別有自己範圍內的i。
var counter = makeCounter();
counter(); // logs: 1counter(); // logs: 2
var counter2 = makeCounter();
counter2(); // logs: 1counter2(); // logs: 2
alert(i); // 引用錯誤：i沒有defind（因為i是存在於makeCounter內部）。

很多情況下，我們不需要makeCounter多個例項，甚至某些case下，我們也不需要顯示的返回值，OK，往下

自執行函式表示式

要解決上述問題，非常簡單，我們只需要用大括弧將程式碼的程式碼全部括住就行了，因為JavaScript裡括弧()裡面不能包含語句，所以在這一點上，解析器在解析function關鍵字的時候，會將相應的程式碼解析成function表示式，而不是function宣告。

// 下面2個括弧()都會立即執行
(function () { /* code */ } ()); // 推薦使用這個(function () { /* code */ })(); // 但是這個也是可以用的
// 由於括弧()和JS的&&，異或，逗號等操作符是在函式表示式和函式宣告上消除歧義的
// 所以一旦解析器知道其中一個已經是表示式了，其它的也都預設為表示式了
// 不過，請注意下一章節的內容解釋
var i = function () { return 10; } ();
true && function () { /* code */ } ();
0, function () { /* code */ } ();

// 如果你不在意返回值，或者不怕難以閱讀
// 你甚至可以在function前面加一元操作符號
!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();

// 還有一個情況，使用new關鍵字,也可以用，但我不確定它的效率
// http://twitter.com/kuvos/status/18209252090847232
new function () { /* code */ }
new function () { /* code */ } () // 如果需要傳遞引數，只需要加上括弧()

上面所說的括弧是消除歧義的，其實壓根就沒必要，因為括弧本來內部本來期望的就是函式表示式，但是我們依然用它，主要是為了方便開發人員閱讀，當你讓這些已經自動執行的表示式賦值給一個變數的時候，我們看到開頭有括弧(，很快就能明白，而不需要將程式碼拉到最後看看到底有沒有加括弧。

強大的原型及原型鏈

JavaScript 不包含傳統的類繼承模型，而是使用 prototypal 原型模型。

雖然這經常被當作是 JavaScript 的缺點被提及，其實基於原型的繼承模型比傳統的類繼承還要強大。實現傳統的類繼承模型是很簡單，但是實現 JavaScript 中的原型繼承則要困難的多。

由於 JavaScript 是唯一一個被廣泛使用的基於原型繼承的語言，所以理解兩種繼承模式的差異是需要一定時間的，今天我們就來了解一下原型和原型鏈。

原型使用方式1：

在使用原型之前，我們需要先將程式碼做一下小修改：

        var Calculator = function (decimalDigits, tax) {
            this.decimalDigits = decimalDigits;
            this.tax = tax;
        };

然後，通過給Calculator物件的prototype屬性賦值物件字面量來設定Calculator物件的原型。

        Calculator.prototype = {
            add: function (x, y) {
                return x + y;
            },

            subtract: function (x, y) {
                return x - y;
            }
        };
        //alert((new Calculator()).add(1, 3));

這樣，我們就可以new Calculator物件以後，就可以呼叫add方法來計算結果了。

原型使用方式2：

第二種方式是，在賦值原型prototype的時候使用function立即執行的表示式來賦值，即如下格式：

Calculator.prototype = function () { } ();

它的好處在前面的帖子裡已經知道了，就是可以封裝私有的function，通過return的形式暴露出簡單的使用名稱，以達到public/private的效果，修改後的程式碼如下：

 Calculator.prototype = function () {
            add = function (x, y) {
                return x + y;
            },

            subtract = function (x, y) {
                return x - y;
            }
            return {
                add: add,
                subtract: subtract
            }
        } ();

        //alert((new Calculator()).add(11, 3));

同樣的方式，我們可以new Calculator物件以後呼叫add方法來計算結果了。

再來一點

分步宣告：

上述使用原型的時候，有一個限制就是一次性設定了原型物件，我們再來說一下如何分來設定原型的每個屬性吧。

var BaseCalculator = function () {
    //為每個例項都宣告一個小數位數    this.decimalDigits = 2;
};
        
//使用原型給BaseCalculator擴充套件2個物件方法BaseCalculator.prototype.add = function (x, y) {
    return x + y;
};

BaseCalculator.prototype.subtract = function (x, y) {
    return x - y;
};

首先，聲明瞭一個BaseCalculator物件，建構函式裡會初始化一個小數位數的屬性decimalDigits，然後通過原型屬性設定2個function，分別是add(x,y)和subtract(x,y)，當然你也可以使用前面提到的2種方式的任何一種，我們的主要目的是看如何將BaseCalculator物件設定到真正的Calculator的原型上。

var BaseCalculator = function() {    this.decimalDigits = 2;
};

BaseCalculator.prototype = {    add: function(x, y) {
        return x + y;
    },
    subtract: function(x, y) {
        return x - y;
    }
};

建立完上述程式碼以後，我們來開始：

var Calculator = function () {
    //為每個例項都宣告一個稅收數字    this.tax = 5;
};
        
Calculator.prototype = new BaseCalculator();

我們可以看到Calculator的原型是指向到BaseCalculator的一個例項上，目的是讓Calculator整合它的add(x,y)和subtract(x,y)這2個function，還有一點要說的是，由於它的原型是BaseCalculator的一個例項，所以不管你建立多少個Calculator物件例項，他們的原型指向的都是同一個例項。

var calc = new Calculator();
alert(calc.add(1, 1));
//BaseCalculator 裡宣告的decimalDigits屬性，在 Calculator裡是可以訪問到的alert(calc.decimalDigits); 

上面的程式碼，執行以後，我們可以看到因為Calculator的原型是指向BaseCalculator的例項上的，所以可以訪問他的decimalDigits屬性值，那如果我不想讓Calculator訪問BaseCalculator的建構函式裡宣告的屬性值，那怎麼辦呢？這麼辦：

var Calculator = function () {
    this.tax= 5;
};

Calculator.prototype = BaseCalculator.prototype;

通過將BaseCalculator的原型賦給Calculator的原型，這樣你在Calculator的例項上就訪問不到那個decimalDigits值了，如果你訪問如下程式碼，那將會提升出錯。

var calc = new Calculator();
alert(calc.add(1, 1));
alert(calc.decimalDigits);

重寫原型：

在使用第三方JS類庫的時候，往往有時候他們定義的原型方法是不能滿足我們的需要，但是又離不開這個類庫，所以這時候我們就需要重寫他們的原型中的一個或者多個屬性或function，我們可以通過繼續宣告的同樣的add程式碼的形式來達到覆蓋重寫前面的add功能，程式碼如下：

//覆蓋前面Calculator的add() function Calculator.prototype.add = function (x, y) {
    return x + y + this.tax;
};

var calc = new Calculator();
alert(calc.add(1, 1));

這樣，我們計算得出的結果就比原來多出了一個tax的值，但是有一點需要注意：那就是重寫的程式碼需要放在最後，這樣才能覆蓋前面的程式碼。

原型鏈

在將原型鏈之前，我們先上一段程式碼：

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};

function Bar() {}

// 設定Bar的prototype屬性為Foo的例項物件Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

// 修正Bar.prototype.constructor為Bar本身Bar.prototype.constructor = Bar;

var test = new Bar() // 建立Bar的一個新例項
// 原型鏈test [Bar的例項]
    Bar.prototype [Foo的例項] 
        { foo: 'Hello World' }
        Foo.prototype
            {method: ...};
            Object.prototype
                {toString: ... /* etc. */};

上面的例子中，test 物件從 Bar.prototype 和 Foo.prototype 繼承下來；因此，它能訪問 Foo 的原型方法 method。同時，它也能夠訪問那個定義在原型上的 Foo 例項屬性 value。需要注意的是 new Bar() 不會創造出一個新的 Foo 例項，而是重複使用它原型上的那個例項；因此，所有的 Bar 例項都會共享相同的 value 屬性。

屬性查詢：

當查詢一個物件的屬性時，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性為止，到查詢到達原型鏈的頂部 - 也就是 Object.prototype - 但是仍然沒有找到指定的屬性，就會返回 undefined，我們來看一個例子：

        function foo() {
            this.add = function (x, y) {
                return x + y;
            }
        }

        foo.prototype.add = function (x, y) {
            return x + y + 10;
        }

        Object.prototype.subtract = function (x, y) {
            return x - y;
        }

        var f = new foo();
        alert(f.add(1, 2)); //結果是3，而不是13        alert(f.subtract(1, 2)); //結果是-1

通過程式碼執行，我們發現subtract是安裝我們所說的向上查詢來得到結果的，但是add方式有點小不同，這也是我想強調的，就是屬性在查詢的時候是先查詢自身的屬性，如果沒有再查詢原型，再沒有，再往上走，一直插到Object的原型上，所以在某種層面上說，用 for in語句遍歷屬性的時候，效率也是個問題。

還有一點我們需要注意的是，我們可以賦值任何型別的物件到原型上，但是不能賦值原子型別的值，比如如下程式碼是無效的：

function Foo() {}
Foo.prototype = 1; // 無效

hasOwnProperty函式：

hasOwnProperty是Object.prototype的一個方法，它可是個好東西，他能判斷一個物件是否包含自定義屬性而不是原型鏈上的屬性，因為hasOwnProperty 是 JavaScript 中唯一一個處理屬性但是不查詢原型鏈的函式。

// 修改Object.prototypeObject.prototype.bar = 1; 
var foo = {goo: undefined};

foo.bar; // 1'bar' in foo; // true
foo.hasOwnProperty('bar'); // falsefoo.hasOwnProperty('goo'); // true

只有 hasOwnProperty 可以給出正確和期望的結果，這在遍歷物件的屬性時會很有用。 沒有其它方法可以用來排除原型鏈上的屬性，而不是定義在物件自身上的屬性。

但有個噁心的地方是：JavaScript 不會保護 hasOwnProperty 被非法佔用，因此如果一個物件碰巧存在這個屬性，就需要使用外部的 hasOwnProperty 函式來獲取正確的結果。

var foo = {
    hasOwnProperty: function() {
        return false;
    },
    bar: 'Here be dragons'
};

foo.hasOwnProperty('bar'); // 總是返回 false
// 使用{}物件的 hasOwnProperty，並將其上下為設定為foo{}.hasOwnProperty.call(foo, 'bar'); // true

當檢查物件上某個屬性是否存在時，hasOwnProperty 是唯一可用的方法。同時在使用 for in loop 遍歷物件時，推薦總是使用 hasOwnProperty 方法，這將會避免原型物件擴充套件帶來的干擾，我們來看一下例子：

// 修改 Object.prototypeObject.prototype.bar = 1;

var foo = {moo: 2};
for(var i in foo) {
    console.log(i); // 輸出兩個屬性：bar 和 moo}

我們沒辦法改變for in語句的行為，所以想過濾結果就只能使用hasOwnProperty 方法，程式碼如下：

// foo 變數是上例中的for(var i in foo) {
    if (foo.hasOwnProperty(i)) {
        console.log(i);
    }
}

這個版本的程式碼是唯一正確的寫法。由於我們使用了 hasOwnProperty，所以這次只輸出 moo。如果不使用 hasOwnProperty，則這段程式碼在原生物件原型（比如 Object.prototype）被擴充套件時可能會出錯。

總結：推薦使用 hasOwnProperty，不要對程式碼執行的環境做任何假設，不要假設原生物件是否已經被擴充套件了。

總結

原型極大地豐富了我們的開發程式碼，但是在平時使用的過程中一定要注意上述提到的一些注意事項。