javascript是一門(mén)弱語(yǔ)言，他有著分同一般的靈活性使它迅速的成為幾乎人人必會(huì)的一門(mén)語(yǔ)言，but，你們使用的姿勢(shì)真的正確嗎？

在以前的開(kāi)發(fā)過(guò)程當(dāng)中，老板：給我加個(gè)驗(yàn)證用戶郵箱、驗(yàn)證用戶短信...功能！

function checkMessage(){...}
function checkEmail(){...}
function ... //茫茫多的函數(shù)

這樣寫(xiě)好了之后 function 是全局的變量，那么是全局的就難免會(huì)對(duì)項(xiàng)目javascript環(huán)境造成污染，可能會(huì)對(duì)其他同事造成影響，我們首先要考慮會(huì)不會(huì)影響別人，如果別人重名對(duì)你的checkMessage覆蓋，那么這樣的BUG是很難發(fā)現(xiàn)的。為了不造成太多的全局污染，我們可以這樣寫(xiě)：

var checkObject = {
    checkMessage:function(){},
    checkEmail:function(){},
    ...
}

首先說(shuō)明，并不是這樣寫(xiě)就不會(huì)造成污染了，checkObject依舊是全局變量，那么好處在哪里呢？想一下如果Jquery的$被覆蓋了，那么我們頁(yè)面的

$.each | $.extends | $(#id) | $... 

都失效了，那么我們很容易定位問(wèn)題: Jquery出問(wèn)題了！checkObject也是一樣,當(dāng)checkObject出問(wèn)題了，我們很容易定位錯(cuò)誤。

調(diào)用：checkObject.checkMessage() 即可

那么問(wèn)題又來(lái)了：如果有同事用我的checkObject搞一些事情呢？它可以直接用我的方法么？當(dāng)然可以，問(wèn)題是，你買(mǎi)了一本書(shū)你愿意別人亂寫(xiě)亂畫(huà)么？我們可以改造一下：

var checkObject = function(){
    return {
        checkMessage:function(){},
        checkEmail:function(){},
        ...
    }
}

我們把方法通過(guò)function的調(diào)用返回，這樣別人可以這樣用 ：

var check = checkObject();
check.checkEmail();

我們可以再完善一下，把checkObject看成java的類(lèi)，checkMessage,checkEmail看成java的public 公有方法,既然看成類(lèi)了，我們可以把checkObject寫(xiě)成大寫(xiě)CheckObject

var CheckObject = function(){
    this.checkMessage = function(){},
    this.checkEmail = function(){},
    ...
}

別人調(diào)用:

var check = new CheckObject(); //既然是一個(gè)類(lèi)了，就要 new 來(lái)實(shí)例化了
check.checkEmail();

每一次通過(guò)new創(chuàng)建新對(duì)象的時(shí)候，新創(chuàng)建的對(duì)象都會(huì)對(duì)類(lèi)this上的屬性進(jìn)行復(fù)制，你定義了兩個(gè)那么就復(fù)制兩次，那么再更多呢？是不是感覺(jué)有些奢侈呢，考慮我們可以運(yùn)用javascript的原型prototype來(lái)創(chuàng)建它：

 var CheckObject = function(){
   
 }
 CheckObject.prototype.checkMessage = function(){},
 CheckObject.prototype.checkEmail = function(){},
 ...

你嫌麻煩？

 var CheckObject = function(){
   
 }
 CheckObject.prototype{
 checkMessage : function(){},
 checkEmail : function(){},
 ...
 }
 

這樣我們的方法都復(fù)制到CheckObject的原型連上去了，創(chuàng)建出來(lái)的對(duì)象都是通過(guò)prototype依次尋找，都綁定在CheckObject的原型上__proto__

隨便看一下Jquery的原型鏈，是不是很熟悉的方法呢？

同志們是否好奇Jquery的方法是如何鏈?zhǔn)秸{(diào)用的呢？很簡(jiǎn)單，我來(lái)模擬一下

 var CheckObject = function(){
   
 }
 CheckObject.prototype = {
 checkMessage : function(){ ... return this },
 checkEmail : function(){ ... return this },
 ...
 
 var check = new CheckObject();
 check.checkMessage().checkEmail();

就這么簡(jiǎn)單，我們只需要將this指代的當(dāng)前對(duì)象全部返回即可。

咳咳，言歸正傳，回到面向?qū)ο缶幊痰恼n題上

java中有 private聲明的私有變量、 有通過(guò)public的getter setter方法進(jìn)行通信，有static修飾的靜態(tài)變量，靜態(tài)方法，有構(gòu)造器，那么javascript可以使用這樣的設(shè)計(jì)模式么？可以，跟我往下看:

我們?nèi)ド痰曩I(mǎi)煙

var Smoke = function(id,name){
    //私有屬性
    var num = 0;
    
    //對(duì)象的公有屬性  （需要new）
    this.id = id;

    //私有方法
    function checkID(){ return true};

    //公有 setter getter 構(gòu)造函數(shù)
    this.setName = function(name){
        this.name = name;
    }
    this.getName = function(){
        return this.name;
    }
    //對(duì)象的公有屬性  （需要new）
    this.information = function(){
        //只有在Smoke內(nèi)部才能調(diào)用checkID() 
        if(checkID()) return this.name+"香煙"+"訂單號(hào) :"+this.id

    } 
}
Smoke.prototype = {
    money:"10元",  //公有屬性（不需要new） 直接Smoke.money[想沒(méi)想到Array的length?]
    other:function(){}
}

var smoke = new Smoke(994857,"煊赫門(mén)");
smoke.information(); //"undefined香煙訂單號(hào) :994857" ps:因?yàn)槲覀儧](méi)對(duì)Smoke的name屬性賦值
smoke.setName("煊赫門(mén)"); //我們賦值
smoke.information(); //"煊赫門(mén)香煙訂單號(hào) :994857"
smoke.num; //undefined ps:很明顯他是私有屬性
smoke.checkID();//error is not function ps:很明顯私有方法

如果我們沒(méi)有new

var smoke = Smoke(994857,"煊赫門(mén)");
smoke.information(); //Uncaught TypeError: Cannot read property "information" of undefined

納尼報(bào)錯(cuò)了？

smoke.money; //undefind 
smoke //undefind 

(好像明白了什么......) 別急，讓我們看下window

window.information(); // "undefined香煙訂單號(hào) :994857"

恍然大悟，因?yàn)閚ew是可以對(duì)當(dāng)前對(duì)象（Smoke)的this不停地賦值【上面講過(guò)】，而上面的沒(méi)有new相當(dāng)于全局執(zhí)行了Smoke() 所以是他的this 指向到 window去了！
怎么避免這種無(wú)操作呢？我們?cè)赟moke內(nèi)部進(jìn)行類(lèi)型檢查：

var Smoke = function(id,name){
    var num = 0;
    function checkID(){ return true};
    //判斷this在執(zhí)行過(guò)程中是不是屬于Smoke，如果是說(shuō)明是new過(guò)的  0.0
    if(this instanceof Smoke){ 
        this.id = id;
        this.setName = function(name){
            this.name = name;
        }
        this.getName = function(){
            return this.name;
        }
        //對(duì)象的公有屬性  （需要new）
        this.information = function(){
            //只有在Smoke內(nèi)部才能調(diào)用checkID() 
            if(checkID()) return this.name+"香煙"+"訂單號(hào) :"+this.id
    
        }
    }else{
        return new Smoke(id,name);//內(nèi)部重新new一個(gè)  0.0
    }
}

看完了么，感覺(jué)爽不，是不是感覺(jué)就是在寫(xiě)java呢，其實(shí)javascript就是靈活在這里，這只是javascript一種常用的面向?qū)ο笤O(shè)計(jì)模式，后面我會(huì)將更多的設(shè)計(jì)模式，這些設(shè)計(jì)模式都是經(jīng)過(guò)前人無(wú)數(shù)心血總結(jié)出來(lái)給我們的，我們?yōu)槭裁床挥媚兀?/p>

感謝[他居然愛(ài)吃蟲(chóng)]同學(xué)對(duì)本文的校對(duì)

如果您覺(jué)得還算不錯(cuò)可以關(guān)注我持續(xù)看我的文章，大概方向：前后端語(yǔ)言設(shè)計(jì)模式、如何設(shè)計(jì)好一款框架、源碼導(dǎo)讀、技術(shù)實(shí)踐。

青年才俊可以入群交流:147255248