web前端學習筆記，實踐篇（十三）JavaScript組合模式以及繼承（用的最多的模式及自己的理解與使用）

組合模式與繼承：

首先，對於JavaScript各種模式，推薦湯姆大叔的理解JavaScript系列。地址：http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

其中對於JavaScript各種模式都有很深的講述，自少目前為止，是我看到的比較全的系列了。下面，我說說，我在實際運用中的組合模式以及繼承，先上一個例子，如何建立一個簡單的Object。

 

var person = new Object();person.name = "飛舞輕揚在台北";person.age = 23;person.job = "web前端開發工程師";person.sya = function(){  alert(this.job);}person.sya();

 

組合模式，主要是應用了建構函式與原型函數，來合理的組織代碼結構，比如，一個人，會有名字，會有工作，會有動作說：我是誰，做什麼工作的。於是，便有了這些人為的更方便的程式碼群組織形式。下面，我寫上自己學習時的例子，對一個人person，來說明組合模式。再此之前，我們還要學習，prototype。再建立一個函數的時候，也會同時建立一個prototypr對象，以及也會自動獲得constructor屬性。在一些比較複雜的大型應用程式中，可能還需要判斷對象的類型，那麼就要使用到instanceof操作符來檢測。用法：person instanceof Object。

var person = function (name, age, job) {     ///<summary>人</summary>     ///<param name="name" type="string">名字</param>     ///<param name = "age" type="int">年齡</param>     ///<param name = "job" type="string">工作</param>     ///<param name = "say" type="string">動作：我的工作</param>     ///<returns type="return value type" />            this.name = name;            this.age = age;            this.job = job;//this指向當前person'類'        }        person.prototype = {            constructor:person,            say:function(){                alert(this.job);            }        }//用對象字面量的形式來組織方法//用函數來組織具體的操作        function dell() {//new 出person這個執行個體，並傳入在person'類'中的參數            var de = new person("飛舞輕揚在台北", "23", "web前端開發工程師");//通過de調用say方法            de.say();        }//onload這個函數dell        window.onload = function () {            dell();        }

這種模式是最常用，也最常見的模式，幾乎也已經達到了普遍性。

既然說到了組合模式，在開發中，鐵定了需要用到繼承這個概念，但是在js中又沒有介面繼承，所以，數下來也就只有實現繼承了，通過原型鏈。

 

//先定義兩個類，namePer類與der類        var namePer = function (name, job) {            this.name = name;            this.job = job;        }        //der類，為空白類        var der = function () { }        //namePer類下的方法        namePer.prototype.say = function () {            alert(this.job);        }        //函數        function de() {            //通過protype原型，讓der類繼承namePer類            der.prototype = new namePer("飛舞輕揚在台北", "web前端工程師");            //執行個體化der類            var her = new der();            //調用繼承過來的say方法            her.say();        }        window.onload = function () {            de();        }

以上這兩種方式，是我在實際項目中，使用最多的方式。

 對於設計模式，我自己學習時，讀的是《JavaScript設計模式》與湯姆大叔的深入理解JavaScript系列。