JavaScript-設計模式-面向對象編程

函數定義

全局定義

//函數定義
function checkName(){
    ...
}
//另外一種形式
var checkName = function(){...}
複製代碼

這兩種方式都會在全局做用域中建立一個全局變量,當定義的過多,多人協做,很容易覆蓋掉.

用對象的方式定義

//對象方式定義
var CheckObj = {
    checkName : function (){...}
}
//另外一種方式
var CheckObj = function() {};
CheckObj.checkName = function(){...}
複製代碼

當要使用checkName()方法時,直接CheckObj.checkName(),就能夠

以返回對象的方式

var CheckObj = function () {
    return {
         checkName : function (){...}
    }
}

var a = CheckObj()
a.checkName()
複製代碼

這樣每次執行方法的時候都返回一個新對象

以類的方式

var CheckObj = function () {
    this.checkName : function (){...}
}
var a = new CheckObj();
a.checkName();
複製代碼

這種方式建立就是類了,因此調用方法須要new CheckObj(),得到實例,咱們把全部的方法都放在了函數內部,經過this定義,因此每一次new 對象時,新建立的對象都會對類的this上的屬性進行復制,因此新對象都會有一套屬於本身的方法,可是這樣消耗很大

以原型的方式

var CheckObj = function () {}
CheckObj.prototype.checkName = function () {...}
//另外一種形式
var CheckObj = function () {}
CheckObj.prototype = {
    checkName = function () {...}
}
複製代碼

這樣無論建立多少個實例,實例所擁有的方法都是一個,由於他們都從原型上往上找,都找到同一個方法

鏈式調用

var CheckObj = {
    checkName : function (){
        ...
        return this
    }
    checkEmail : function (){
        ...
        return this
    }
    checkAddr : function (){
        ...
        return this
    }
}
//調用方式
CheckObj.checkName().checkEmail().checkAddr()

//也能夠放在原型上
var CheckObj = function () {}
CheckObj.prototype = {
    checkName : function (){
        ...
        return this
    }
    checkEmail : function (){
        ...
        return this
    }
    checkAddr : function (){
        ...
        return this
    }
}
//調用
var a = new CheckObj()
a.checkName().checkEmail().checkAddr()
複製代碼

綁定到Function上

Function.prototype.checkName = function () {}
//調用
var f = function() {}
f.checkName()
//或者
var f  = new Function();
f.checkName();;
複製代碼

不推薦這麼使用:由於這樣會污染了原生對象Function,當別人建立函數的時候也會被污染,形成沒必要要的開銷,因此能夠提供一個公共的接口

Function.prototype.addMethod = function(name,fn){
    this[name] = fn
}

//調用
var method = function(){};
//或者
var method = new Function();
method.addMethod('checkName',function(){
    ...
})
method.checkName();
複製代碼

一樣也能夠鏈式調用

Function.prototype.addMethod = function(name,fn){
    this[name] = fn
    return this
}
//這樣就能夠鏈式添加原型上的方法
var method = new Function();
method.addMethod('checkName',function(){
    ...
}).addMethod('checkEmail',function(){
    ...
})
//若是想調用時也是用鏈式調用
method.addMethod('checkName',function(){
    ...
    return this
}).addMethod('checkEmail',function(){
    ...
    return this
})
method.checkName().checkEmail()
複製代碼

類的調用方式

Function.prototype.addMethod = function(name,fn){
    this.prototype[name] = fn
    return this
}
//使用時
var Methods = function(){}
Methods.addMethod('checkName',function(){
    ...
})
var m = new Methods();
m.checkName()
複製代碼

---

未完待續...

---

主要總結於<<JavaScript設計模式>>一書,有興趣的能夠看看