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

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

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

函数字面量形式：

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

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

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

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

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

12345678910111213 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()进行调用。但是这个对象的方法在创建新对象时不能被继承。

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

1234567891011121314151617 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对象没有任何关系。

类方式：

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

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

prototype原型：查找绑定方法

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

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

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

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

12	`var` `checkObj =new` `checkObject();checkObj.checkName();`

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

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

链式调用：

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

放在原型对象里：

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

链式调用：

12	`var` `checkObj =` `new` `checkObject();checkObj.checkName().checkEmail().checkPassword();`

Function对象扩展

1234567891011121314 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(){ //验证密码});

链式定义

12345678910111213141516 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();`

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

1234567891011121314 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关键词来创建新对象了。

12	`var` `m =` `new` `Method();m.checkName();`

来自为知笔记(Wiz)