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

时间  2019-11-09
标签 实现 javascript 自定义 函数 整合 链式 调用 封装 栏目 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();


函数字面量形式：this

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

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


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

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


对象赋值形式：对象的另外一种建立形式。code

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

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

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






相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程