本文僅僅是記錄自己學(xué)習(xí)的心得體會(huì)，如果有誤枣申，歡迎指出售葡，非原創(chuàng)，具體請(qǐng)參考：《JavaScript設(shè)計(jì)模式》 張容銘 著
情景：現(xiàn)在有需求忠藤，寫三個(gè)驗(yàn)證挟伙，分別是賬號(hào)，郵箱模孩，手機(jī)的驗(yàn)證尖阔。
分析
1.一般我們習(xí)慣于直接寫三個(gè)函數(shù)解決：
function checkOutUserAccount() {
//驗(yàn)證用戶賬戶
}
function checkOutUserEmail() {
//驗(yàn)證用戶郵箱
}
function checkOutUserMobile() {
//驗(yàn)證用戶手機(jī)
}
這樣使用會(huì)導(dǎo)致一個(gè)問(wèn)題：無(wú)形之中在全局中聲明了三個(gè)變量，等同于下面的效果：
var checkOutUserAccount = function () {
//驗(yàn)證用戶賬戶
}
var checkOutUserEmail = function () {
//驗(yàn)證用戶郵箱
}
var checkOutUserMobile = function () {
//驗(yàn)證用戶手機(jī)
}
這樣子做榨咐，功能是可以實(shí)現(xiàn)介却，但是卻是全局變量，不利于團(tuán)隊(duì)項(xiàng)目的開(kāi)發(fā)块茁，如果別人定義了相同的方法齿坷，你的方法將會(huì)被覆蓋
2.將這三個(gè)方法裝進(jìn)對(duì)象中
var CheckOutObject = {
checkOutUserAccount:function () {
//驗(yàn)證用戶賬戶
},
checkOutUserEmail:function () {
//驗(yàn)證用戶郵箱
},
checkOutUserMobile:function () {
//驗(yàn)證用戶手機(jī)
}
}
也可以這樣（函數(shù)也是對(duì)象）
var CheckOutObject = function () {};
CheckOutObject.checkOutUserAccount = function () {
//驗(yàn)證用戶賬戶
}
CheckOutObject.checkOutUserEmail = function () {
//驗(yàn)證用戶郵箱
}
CheckOutObject.checkOutUserMobile = function () {
//驗(yàn)證用戶手機(jī)
}
如何使用：CheckOutObject.checkOutUserAccount() //點(diǎn)語(yǔ)法調(diào)用
當(dāng)然也可以在函數(shù)中返回一個(gè)包裹這三個(gè)方法的對(duì)象：
var CheckOutObject = function () {
return {
checkOutUserAccount:function () {
//驗(yàn)證用戶賬戶
},
checkOutUserEmail:function () {
//驗(yàn)證用戶郵箱
},
checkOutUserMobile:function () {
//驗(yàn)證用戶手機(jī)
}
}
}
如何使用：
var checkOut = CheckOutObject(); //得到返回對(duì)象 存在checkOut中 checkOut.checkOutUserAccount();//調(diào)用返回對(duì)象中的方法
上面這種方法在每一次調(diào)用的時(shí)候，得到的都是返回的新的對(duì)象数焊，互相不干擾永淌。當(dāng)然也可以通過(guò)類實(shí)現(xiàn)
3.實(shí)用類
var CheckOutObject = function () {
this.checkOutUserAccount = function () {
//驗(yàn)證用戶賬戶
}
this.checkOutUserEmail = function () {
//驗(yàn)證用戶郵箱
}
this.checkOutUserMobile = function () {
//驗(yàn)證用戶手機(jī)
}
}
這樣就可以用CheckOutObject類創(chuàng)建出來(lái)的對(duì)象了
var checkOut = new CheckOutObject(); //創(chuàng)建一個(gè)新對(duì)象checkOut
checkOut.checkOutUserAccount() //調(diào)用對(duì)象中的方法
在new CheckOutObject的時(shí)候，實(shí)際上是執(zhí)行了一次CheckOutObject佩耳，this指向調(diào)用者checkOut遂蛀，所以新創(chuàng)建的對(duì)象會(huì)對(duì)CheckOutObject類中this定義的方法進(jìn)行復(fù)制。所以每一個(gè)新創(chuàng)建的對(duì)象都會(huì)有一套自己的方法
當(dāng)然這樣創(chuàng)建也是奢侈的干厚，可做修改
4.在原型對(duì)象上添加
//一個(gè)一個(gè)往原型上面添加方法
var CheckOutObject = function () {};
CheckOutObject.prototype.checkOutUserAccount = function () {
//驗(yàn)證用戶賬戶
}
CheckOutObject.prototype.checkOutUserEmail = function () {
//驗(yàn)證用戶郵箱
}
CheckOutObject.prototype.checkOutUserMobile = function () {
//驗(yàn)證用戶手機(jī)
}
當(dāng)然也可以這樣
//重寫原型對(duì)象
var CheckOutObject = function () {};
CheckOutObject.prototype = {
checkOutUserAccount:function () {
//驗(yàn)證用戶賬戶
},
checkOutUserEmail:function () {
//驗(yàn)證用戶郵箱
},
checkOutUserMobile:function () {
//驗(yàn)證用戶手機(jī)
}
}
如何使用：
var checkOut = new CheckOutObject();//new 一個(gè)新對(duì)象checkOut checkOut.checkOutUserAccount();//調(diào)用原型上的方法
但是如果需要調(diào)用許多方法李滴，就會(huì)寫很多次checkOut
例如：checkOut.checkOutUserAccount() checkOut.checkOutUserEmail() checkOut.checkOutUserMobile()這里書寫三次，如果有更多方法呢蛮瞄？可以利用this將調(diào)用者返回（下面例子this指向的調(diào)用者是checkOut）所坯，這樣實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用、
5.實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用
var CheckOutObject = function () {};
CheckOutObject.prototype = {
checkOutUserAccount:function () {
//驗(yàn)證用戶賬戶
return this
},
checkOutUserEmail:function () {
//驗(yàn)證用戶郵箱
return this
},
checkOutUserMobile:function () {
//驗(yàn)證用戶手機(jī)
return this
}
}
如何使用：
var checkOut = new CheckOutObject(); checkOut.checkOutUserAccount().checkOutUserEmail().checkOutUserMobile();//這也許就是傳說(shuō)中的鏈?zhǔn)秸{(diào)用了
checkOut.checkOutUserAccount().checkOutUserEmail().checkOutUserMobile();這里是checkOut調(diào)用裕坊，當(dāng)執(zhí)行到checkOut.checkOutUserAccount();因?yàn)?code>return this包竹，而這里的this指向checkOut，所以就相當(dāng)于返回了checkOut籍凝。所以語(yǔ)句就變成了checkOut. .checkOutUserEmail().checkOutUserMobile();以此類推周瞎，最后變成checkOut.checkOutUserMobile();
這里是在CheckOutObject 這個(gè)類的原型上添加的，那么只可以在new出來(lái)的新對(duì)象上面使用饵蒂，如果想實(shí)現(xiàn)每一個(gè)函數(shù)都帶有這個(gè)方法呢声诸？
6.在Function的原型上添加
Function.prototype.checkOutUserAccount = function () {
//驗(yàn)證用戶賬戶
}
Function.prototype.checkOutUserEmail = function () {
//驗(yàn)證用戶郵箱
}
Function.prototype.checkOutUserMobile = function () {
//驗(yàn)證用戶手機(jī)
}
如何使用：如果習(xí)慣使用函數(shù)形式：
var checkOut = function () {}; checkOut.checkOutUserAccount()
如果習(xí)慣使用類的形式：var checkOut = new Function();checkOut.checkOutUserAccount();
但是如果這樣做，方便了自己退盯，卻會(huì)污染原生對(duì)象Function彼乌，所以我們可以抽象出一個(gè)用于添加方法的方法泻肯。
Function.prototype.addMethod = function (name, fn) {
this[name] = fn;
}
var checkOut = new Function();
或者
var checkOut = function () {}
checkOut.addMethod('checkOutUserAccount',function () {
//驗(yàn)證用戶賬戶
})
這里實(shí)例化了一個(gè)checkOut對(duì)象，這個(gè)對(duì)象調(diào)用原型上的addMethod方法時(shí)慰照，this[name] = fn中的this指向checkOut這個(gè)調(diào)用的對(duì)象灶挟，就相當(dāng)于是給checkOut這個(gè)對(duì)象添加了一個(gè)方法。例子中添加的是checkOutUserAccount方法毒租。
如果想要實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用就在原型addMethod中加入
return this;
Function.prototype.addMethod = function (name, fn) {
this[name] = fn;
return this;
}
如何調(diào)用：
checkOut.addMethod('yourFun',function () {
}).addMethod('yourFun',function () {
}).addMethod('yourFun',function () {
})
如果想要對(duì)已添加的方法鏈?zhǔn)秸{(diào)用
checkOut.addMethod('yourFun',function () {
// 這里return this 返回調(diào)用的對(duì)象 此時(shí)調(diào)用對(duì)象是 checkOut
return this;
}).addMethod('yourFun',function () {
// 這里return this 返回調(diào)用的對(duì)象 此時(shí)調(diào)用對(duì)象是 checkOut
return this;
}).addMethod('yourFun',function () {
// 這里return this 返回調(diào)用的對(duì)象 此時(shí)調(diào)用對(duì)象是 checkOut
return this;
})
如何調(diào)用：(假設(shè)已經(jīng)添加了checkOutUserAccount 稚铣，checkOutUserEmail ，checkOutUserMobile這三個(gè)方法)
checkOut.checkOutUserAccount(). checkOutUserEmail().checkOutUserMobile()
7.在checkOut的原型上添加方法的方法
當(dāng)然也可以在checkOut的原型上添加方法墅垮，(上面這種是在自身添加)
這里對(duì)addMethod做一個(gè)小修改
Function.prototype.addMethod = function (name, fn) {
this.prototype[name] = fn;//在調(diào)用者的原型上添加方法
return this;
}
但是這里調(diào)用的時(shí)候需要new 一個(gè)新的checkOut對(duì)象
var newCheckOut = new checkOut();
newCheckOut.checkOutUserAccount()
如果有誤惕医，或者有爭(zhēng)議的地方，提醒下算色，謝謝
