JavaScript 设计模式 ① 正确使用面向对象编程的姿式

javascript是一门弱语言，他有着分同通常的灵活性使它迅速的成为几乎人人必会的一门语言，but，大家使用的姿式真的正确吗？

在之前的开发过程中，老板：给我加个验证用户邮箱、验证用户短信...功能！

function checkMessage(){...}
function checkEmail(){...}
function ... //茫茫多的函数

这样写好了以后 function 是全局的变量，那么是全局的就不免会对项目javascript环境形成污染，可能会对其余同事形成影响，咱们首先要考虑会不会影响别人，若是别人重名对你的checkMessage覆盖，那么这样的BUG是很难发现的。为了避免形成太多的全局污染，咱们能够这样写：

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

首先说明，并非这样写就不会形成污染了，checkObject依旧是全局变量，那么好处在哪里呢？想一下若是Jquery的$被覆盖了，那么咱们页面的

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

都失效了，那么咱们很容易定位问题: Jquery出问题了！checkObject也是同样,当checkObject出问题了，咱们很容易定位错误。

调用：checkObject.checkMessage() 便可

那么问题又来了：若是有同事用个人checkObject搞一些事情呢？它能够直接用个人方法么？固然能够，问题是，你买了一本书你愿意别人乱写乱画么？咱们能够改造一下：

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

咱们把方法经过function的调用返回，这样别人能够这样用 ：

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

咱们能够再完善一下，把checkObject当作java的类，checkMessage,checkEmail当作java的public 公有方法,既然当作类了，咱们能够把checkObject写成大写CheckObject

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

别人调用:

var check = new CheckObject(); //既然是一个类了，就要 new 来实例化了
check.checkEmail();

每一次经过new建立新对象的时候，新建立的对象都会对类this上的属性进行复制，你定义了两个那么就复制两次，那么再更多呢？是否是感受有些奢侈呢，考虑咱们能够运用javascript的原型prototype来建立它：

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

你嫌麻烦？

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

这样咱们的方法都复制到CheckObject的原型连上去了，建立出来的对象都是经过prototype依次寻找，都绑定在CheckObject的原型上__proto__

随便看一下Jquery的原型链，是否是很熟悉的方法呢？

同志们是否好奇Jquery的方法是如何链式调用的呢？很简单，我来模拟一下

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

就这么简单，咱们只须要将this指代的当前对象所有返回便可。

咳咳，言归正传，回到面向对象编程的课题上

java中有 private声明的私有变量、 有经过public的getter setter方法进行通讯，有static修饰的静态变量，静态方法，有构造器，那么javascript可使用这样的设计模式么？能够，跟我往下看:

咱们去商店买烟

var Smoke = function(id,name){
    //私有属性
    var num = 0;
    
    //对象的公有属性  （须要new）
    this.id = id;

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

    //公有 setter getter 构造函数
    this.setName = function(name){
        this.name = name;
    }
    this.getName = function(){
        return this.name;
    }
    //对象的公有属性  （须要new）
    this.information = function(){
        //只有在Smoke内部才能调用checkID() 
        if(checkID()) return this.name+'香烟'+'订单号 :'+this.id

    } 
}
Smoke.prototype = {
    money:'10元',  //公有属性（不须要new） 直接Smoke.money[想没想到Array的length?]
    other:function(){}
}

var smoke = new Smoke(994857,'煊赫门');
smoke.information(); //"undefined香烟订单号 :994857" ps:由于咱们没对Smoke的name属性赋值
smoke.setName('煊赫门'); //咱们赋值
smoke.information(); //"煊赫门香烟订单号 :994857"
smoke.num; //undefined ps:很明显他是私有属性
smoke.checkID();//error is not function ps:很明显私有方法

若是咱们没有new

var smoke = Smoke(994857,'煊赫门');
smoke.information(); //Uncaught TypeError: Cannot read property 'information' of undefined

纳尼报错了？

smoke.money; //undefind 
smoke //undefind

(好像明白了什么......) 别急，让咱们看下window

window.information(); // "undefined香烟订单号 :994857"

恍然大悟，由于new是能够对当前对象（Smoke)的this不停地赋值【上面讲过】，而上面的没有new至关于全局执行了Smoke() 因此是他的this 指向到 window去了！
怎么避免这种无操做呢？咱们在Smoke内部进行类型检查：

var Smoke = function(id,name){
    var num = 0;
    function checkID(){ return true};
    //判断this在执行过程当中是否是属于Smoke，若是是说明是new过的  0.0
    if(this instanceof Smoke){ 
        this.id = id;
        this.setName = function(name){
            this.name = name;
        }
        this.getName = function(){
            return this.name;
        }
        //对象的公有属性  （须要new）
        this.information = function(){
            //只有在Smoke内部才能调用checkID() 
            if(checkID()) return this.name+'香烟'+'订单号 :'+this.id
    
        }
    }else{
        return new Smoke(id,name);//内部从新new一个  0.0
    }
}

看完了么，感受爽不，是否是感受就是在写java呢，其实javascript就是灵活在这里，这只是javascript一种经常使用的面向对象设计模式，后面我会将更多的设计模式，这些设计模式都是通过前人无数心血总结出来给咱们的，咱们为何不用呢？

感谢[他竟然爱吃虫]同窗对本文的校对

若是您以为还算不错能够关注我持续看个人文章，大概方向：先后端语言设计模式、如何设计好一款框架、源码导读、技术实践。

• 青年才俊能够入群交流:147255248