实现JavaScript自定义函数的整合、链式调用及类的封装

函数声明形式：表单验证函数

1 2 3 4 5 6 7 8 9 10 11 12 13

function checkName(){     console.log('检查用户名'); } function checkEmail(){     console.log('检查邮箱地址'); } function checkPassword(){     console.log('检查密码'); }   checkName(); checkEmail(); checkPassword();

函数字面量形式：

在团队开发中定义函数容易覆盖他人已经定义过的函数，将函数保存在一个变量里，这样就减少了原有功能被覆盖的风险。

1 2 3 4 5 6 7 8 9 10 11 12

var checkName = function(){     console.log('检查用户名'); } var checkEmail = function(){     console.log('检查邮箱地址'); } var checkPassword = function(){     console.log('检查密码'); } checkName(); checkEmail(); checkPassword();

对象属性形式：利用对象具有属性与方法的特性。 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var checkObject = {     checkName:function(){         console.log('检查用户名');     },     checkEmail:function(){         console.log('检查邮箱地址');     },     checkPassword:function(){         console.log('检查密码');     }       }; checkObject.checkName(); checkObject.checkEmail(); checkObject.checkPassword();

对象赋值形式：对象的另一种创建形式。

1 2 3 4 5 6 7 8 9 10 11 12 13

var checkObject = function(){}; checkObject.checkName = function(){     console.log('检查用户名'); } checkObject.checkEmail = function(){     console.log('检查邮箱地址'); } checkObject.checkPassword = function(){     console.log('检查密码'); } checkObject.checkName(); checkObject.checkEmail(); checkObject.checkPassword();

也是利用checkObject.checkName()进行调用。 但是这个对象的方法在创建新对象时不能被继承。

返回对象：可以将这些方法放在一个函数对象中返回。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var checkObject = function(){     return {         checkName : function(){             console.log('检查用户名');         },         checkEmail: function(){             console.log('检查邮箱地址');         },         checkPassword: function(){             console.log('检查密码');         }     } }; var a = new checkObject(); a.checkName(); a.checkEmail(); a.checkPassword();

每次调用这个函数时，都返回一个新对象，返回的checkObj对象与checkObject对象没有任何关系。

类方式：

1 2 3 4 5 6 7 8 9 10 11 12 13

var checkObject  = function(){     this.checkName = function(){         //验证姓名     }     this.checkEmail = function(){         //验证邮箱     }     this.checkPassword = function(){         //验证密码     } } var checkObj =new checkObject(); checkObj.checkName();

每次通过new关键词创建新对象的时候，都会对类的this上的属性进行复制， 造成了不必要的内存消耗。

prototype原型：查找绑定方法

1 2 3 4 5 6 7 8 9 10

var checkObject  = function(){}; checkObject.prototype.checkName = function(){     //验证姓名 } checkObject.prototype.checkEmail = function(){     //验证邮箱 } checkObject.prototype.checkPassword = function(){     //验证密码 }

以上prototype需要书写多遍，可简写为：

1 2 3 4 5 6 7 8 9 10 11 12

var checkObject  = function(){}; checkObject.prototype = {     checkName ：function(){         //验证姓名     },     checkEmail ：function(){         //验证邮箱     },     checkPassword ：function(){         //验证密码     } }

依赖原型依次查找，每次找到方法都是同一个。

1 2	var checkObj =new checkObject(); checkObj.checkName();

链式调用：声明的每个方法末尾将当前对象返回。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var checkObject  = {     checkName : function(){          //验证姓名          return this;     },     checkEmail : function(){          //验证邮箱          return this;     },     checkPassword : function(){          //验证密码          return this;     } }

链式调用：

1	checkObject.checkName().checkEmail().checkPassword();

放在原型对象里：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var checkObject  = function(){}; checkObject.prototype = {     checkName : function(){         //验证姓名         return this;     },     checkEmail : function(){         //验证邮箱         return this;     },     checkPassword : function(){         //验证密码         return this;     } }

链式调用：

1 2	var checkObj = new checkObject(); checkObj.checkName().checkEmail().checkPassword();

Function对象扩展

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Function.prototype.addMethod = function(name, fn){     this[name] =  fn; }   var method = function(){}; (或者var method = new Function();) method.addMethod('checkName',function(){     //验证姓名 }); method.addMethod('checkEmail',function(){     //验证邮箱 }); method.addMethod('checkPassword',function(){     //验证密码 });

链式定义

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Function.prototype.addMethod = function(name, fn){     this[name] =  fn;     return this; }  var method = function(){}; (var method = new Function();) method.addMethod('checkName',function(){     //验证姓名     return this; }).addMethod('checkEmail',function(){     //验证邮箱     return this; }).addMethod('checkPassword',function(){     //验证密码     return this; });

可以链式调用了：

1	method.checkName().checkEmail().checkPassword();

对于类似调用方式，还可以改成：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Function.prototype.addMethod = function(name, fn){     this.prototype[name] =  fn; } var method = function(){}; method.addMethod('checkName',function(){     //验证姓名     return this; }).addMethod('checkEmail',function(){     //验证邮箱     return this; }).addMethod('checkPassword',function(){     //验证密码     return this; });

这种更改之后，在调用的时候不能直接使用，要通过new关键词来创建新对象了。

1 2	var m = new Method(); m.checkName();

来自为知笔记(Wiz)