JavaScript 設計模式之構造函數模式

1、構造函數模式概念解讀

  1.構造函數模式概念文字解讀

      構造函數用於建立特定類型的對象——不只聲明瞭使用的對象，構造函數還能夠接受參數以便第一次建立對象的時候設置對象的成員值。你能夠自定義本身的構造函數，而後在裏面聲明自定義類型對象的屬性或方法。

      在JavaScript 裏，構造函數一般是認爲用來實現實例的，JavaScript沒有類的概念，可是有特殊的構造函數。經過new 關鍵字來調用自定義的構造函數，在構造函數內部，this 關鍵字引用的是新建立的對象。

  2.構造函數模式概念擬物化解讀

     門建立出來是要歸屬於某我的的，即，有使用對象（小王或小李）。門能夠有多把鑰匙。門能夠有各類花邊和形狀。

    （廠家原始的門，客戶要求的門）

2、構造函數模式的做用和注意事項

  模式做用：

    1.用於建立特定類型的對象。

    2.第一次聲明的時候給對象賦值。

    3.本身聲明構造函數，賦予屬性和方法。

  注意事項：

    1.聲明函數的時候處理業務邏輯。

    2.區分和單例的區別，配合單例實現初始化。

    3.構造函數建議大寫字母開頭。

    4. 注意new 的成本。（繼承）儘可能把公用的功能放到原型上去，具體再擴展。

 

3、構造函數模式的代碼實戰和總結

 1.一個通俗的例子

<meta charset="utf-8"/>
<script type="text/javascript">
     //1.用於建立特定類型的對象
     //2.js開發的時候寫單引號
     //造門
     function makeDoor(){
         //instanceof 指向當前父類
        if (!(this instanceof makeDoor)) {
                return makeDoor();
        };

         this.lock="普通";  //門上的鎖
         this.figure="普通"; //門上的花紋
        this.create=function(){   //開始產門
            return  "【鎖頭】"+this.lock+"【花紋】"+this.figure;
        }
     }
     var xiaozhangjia=new makeDoor(); //小張家須要建門,
     //此處若是沒有new ，會出現
     //「JS_singleton.html:46 Uncaught RangeError: Maximum call stack size exceeded」
     //堆棧溢出的錯誤。
     alert("xiaozhangjia"+xiaozhangjia.create());  //開始產門
</script>

 

 2.與單例模式配合的例子

<meta charset="utf-8"/>
<script type="text/javascript">
     //1.用於建立特定類型的對象
     //2.js開發的時候寫單引號

    //聲明一個AA公司,造門;將造門放到AA進來，略改一下語法
    var AA={      
     //造門
     function:makeDoor(figure){
         //instanceof 指向當前父類
        if (!(this instanceof makeDoor)) {
                return new makeDoor();
        };
        var _figure = "普通";
        if (figure) {
            _figure= figure;
        };

         this.lock="普通";  //門上的鎖
         this.figure=_figure; //門上的花紋
        this.create=function(){   //開始產門
            return  "【鎖頭】"+this.lock+"【花紋】"+this.figure
        }
    
 }    
     //聲明一個BB公司,也能夠造門

    var BB={      
     //造門
     function : makeDoor(figure){
         //instanceof 指向當前父類
        if (!(this instanceof makeDoor)) {
                return new makeDoor();
        };
        var _figure = "普通";
        if (figure) {
            _figure= figure;
        };

         this.lock="普通";  //門上的鎖
         this.figure=_figure; //門上的花紋
        this.create=function(){   //開始產門
            return  "【鎖頭】"+this.lock+"【花紋】"+this.figure
        }
    
    }
    var xiaozhangjia=new AA.makeDoor(); //小張家須要建門,
     //此處若是沒有new ，會出現
     //「JS_singleton.html:46 Uncaught RangeError: Maximum call stack size exceeded」
     //堆棧溢出的錯誤。
     alert("xiaozhangjia"+xiaozhangjia.create());  //開始產門

     var xiaolijia =new BB.makeDoor('絢麗');//小李家也須要建門,
     alert("xiaolijia"+xiaolijia.create());
</script>