本文仅仅是记录自己学习的心得体会，如果有误，欢迎指出，非原创，具体请参考：《JavaScript设计模式》 张容铭 著
情景：现在有需求，写三个验证，分别是账号，邮箱，手机的验证。
分析
1.一般我们习惯于直接写三个函数解决：
function checkOutUserAccount() {
//验证用户账户
}
function checkOutUserEmail() {
//验证用户邮箱
}
function checkOutUserMobile() {
//验证用户手机
}
这样使用会导致一个问题：无形之中在全局中声明了三个变量，等同于下面的效果：
var checkOutUserAccount = function () {
//验证用户账户
}
var checkOutUserEmail = function () {
//验证用户邮箱
}
var checkOutUserMobile = function () {
//验证用户手机
}
这样子做，功能是可以实现，但是却是全局变量，不利于团队项目的开发，如果别人定义了相同的方法，你的方法将会被覆盖
2.将这三个方法装进对象中
var CheckOutObject = {
checkOutUserAccount:function () {
//验证用户账户
},
checkOutUserEmail:function () {
//验证用户邮箱
},
checkOutUserMobile:function () {
//验证用户手机
}
}
也可以这样（函数也是对象）
var CheckOutObject = function () {};
CheckOutObject.checkOutUserAccount = function () {
//验证用户账户
}
CheckOutObject.checkOutUserEmail = function () {
//验证用户邮箱
}
CheckOutObject.checkOutUserMobile = function () {
//验证用户手机
}
如何使用：CheckOutObject.checkOutUserAccount() //点语法调用
当然也可以在函数中返回一个包裹这三个方法的对象：
var CheckOutObject = function () {
return {
checkOutUserAccount:function () {
//验证用户账户
},
checkOutUserEmail:function () {
//验证用户邮箱
},
checkOutUserMobile:function () {
//验证用户手机
}
}
}
如何使用：
var checkOut = CheckOutObject(); //得到返回对象 存在checkOut中 checkOut.checkOutUserAccount();//调用返回对象中的方法
上面这种方法在每一次调用的时候，得到的都是返回的新的对象，互相不干扰。当然也可以通过类实现
3.实用类
var CheckOutObject = function () {
this.checkOutUserAccount = function () {
//验证用户账户
}
this.checkOutUserEmail = function () {
//验证用户邮箱
}
this.checkOutUserMobile = function () {
//验证用户手机
}
}
这样就可以用CheckOutObject类创建出来的对象了
var checkOut = new CheckOutObject(); //创建一个新对象checkOut
checkOut.checkOutUserAccount() //调用对象中的方法
在new CheckOutObject的时候，实际上是执行了一次CheckOutObject，this指向调用者checkOut，所以新创建的对象会对CheckOutObject类中this定义的方法进行复制。所以每一个新创建的对象都会有一套自己的方法
当然这样创建也是奢侈的，可做修改
4.在原型对象上添加
//一个一个往原型上面添加方法
var CheckOutObject = function () {};
CheckOutObject.prototype.checkOutUserAccount = function () {
//验证用户账户
}
CheckOutObject.prototype.checkOutUserEmail = function () {
//验证用户邮箱
}
CheckOutObject.prototype.checkOutUserMobile = function () {
//验证用户手机
}
当然也可以这样
//重写原型对象
var CheckOutObject = function () {};
CheckOutObject.prototype = {
checkOutUserAccount:function () {
//验证用户账户
},
checkOutUserEmail:function () {
//验证用户邮箱
},
checkOutUserMobile:function () {
//验证用户手机
}
}
如何使用：
var checkOut = new CheckOutObject();//new 一个新对象checkOut checkOut.checkOutUserAccount();//调用原型上的方法
但是如果需要调用许多方法，就会写很多次checkOut
例如：checkOut.checkOutUserAccount() checkOut.checkOutUserEmail() checkOut.checkOutUserMobile()这里书写三次，如果有更多方法呢？可以利用this将调用者返回（下面例子this指向的调用者是checkOut），这样实现链式调用、
5.实现链式调用
var CheckOutObject = function () {};
CheckOutObject.prototype = {
checkOutUserAccount:function () {
//验证用户账户
return this
},
checkOutUserEmail:function () {
//验证用户邮箱
return this
},
checkOutUserMobile:function () {
//验证用户手机
return this
}
}
如何使用：
var checkOut = new CheckOutObject(); checkOut.checkOutUserAccount().checkOutUserEmail().checkOutUserMobile();//这也许就是传说中的链式调用了
checkOut.checkOutUserAccount().checkOutUserEmail().checkOutUserMobile();这里是checkOut调用，当执行到checkOut.checkOutUserAccount();因为return this，而这里的this指向checkOut，所以就相当于返回了checkOut。所以语句就变成了checkOut. .checkOutUserEmail().checkOutUserMobile();以此类推，最后变成checkOut.checkOutUserMobile();
这里是在CheckOutObject 这个类的原型上添加的，那么只可以在new出来的新对象上面使用，如果想实现每一个函数都带有这个方法呢？
6.在Function的原型上添加
Function.prototype.checkOutUserAccount = function () {
//验证用户账户
}
Function.prototype.checkOutUserEmail = function () {
//验证用户邮箱
}
Function.prototype.checkOutUserMobile = function () {
//验证用户手机
}
如何使用：如果习惯使用函数形式：
var checkOut = function () {}; checkOut.checkOutUserAccount()
如果习惯使用类的形式：var checkOut = new Function();checkOut.checkOutUserAccount();
但是如果这样做，方便了自己，却会污染原生对象Function，所以我们可以抽象出一个用于添加方法的方法。
Function.prototype.addMethod = function (name, fn) {
this[name] = fn;
}
var checkOut = new Function();
或者
var checkOut = function () {}
checkOut.addMethod('checkOutUserAccount',function () {
//验证用户账户
})
这里实例化了一个checkOut对象，这个对象调用原型上的addMethod方法时，this[name] = fn中的this指向checkOut这个调用的对象，就相当于是给checkOut这个对象添加了一个方法。例子中添加的是checkOutUserAccount方法。
如果想要实现链式调用就在原型addMethod中加入
return this;
Function.prototype.addMethod = function (name, fn) {
this[name] = fn;
return this;
}
如何调用：
checkOut.addMethod('yourFun',function () {
}).addMethod('yourFun',function () {
}).addMethod('yourFun',function () {
})
如果想要对已添加的方法链式调用
checkOut.addMethod('yourFun',function () {
// 这里return this 返回调用的对象 此时调用对象是 checkOut
return this;
}).addMethod('yourFun',function () {
// 这里return this 返回调用的对象 此时调用对象是 checkOut
return this;
}).addMethod('yourFun',function () {
// 这里return this 返回调用的对象 此时调用对象是 checkOut
return this;
})
如何调用：(假设已经添加了checkOutUserAccount ，checkOutUserEmail ，checkOutUserMobile这三个方法)
checkOut.checkOutUserAccount(). checkOutUserEmail().checkOutUserMobile()
7.在checkOut的原型上添加方法的方法
当然也可以在checkOut的原型上添加方法，(上面这种是在自身添加)
这里对addMethod做一个小修改
Function.prototype.addMethod = function (name, fn) {
this.prototype[name] = fn;//在调用者的原型上添加方法
return this;
}
但是这里调用的时候需要new 一个新的checkOut对象
var newCheckOut = new checkOut();
newCheckOut.checkOutUserAccount()
如果有误，或者有争议的地方，提醒下，谢谢
网友评论