JavaScript-設計模式-物件導向程式設計

mazy發表於2018-06-28
JavaScript設計模式物件程式設計

image

函式定義

全域性定義

//函式定義
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設計模式>>一書,有興趣的可以看看

相關文章