刚开始去公司实习的时候,接到了一个验证表单的任务,内容不多,需要验证用户名,邮箱 ,密码~接到需求手,立刻写下了以下几个函数
function checkName(){
// 验证姓名
}
function checkEmail(){
// 验证邮箱
}
function checkPasswork(){
// 验证密码
}
我相信作为刚入职的新人,大家都很可能会这样写,但是这样写会写出现很多问题,那就是创建了太多的全局变量
大家再来看看以下几个代码
var checkName = function(){
// 验证姓名
}
var checkEmail = function(){
// 验证邮箱
}
var checkPassword = function(){
// 验证密码
}
也许有人会说这两个是不一样的,确实不一样,因为这个在用的时候要提前声明,但这么看你就会发现创建了三个函数保存在变量里来实现你的功能,而你写的是将你的变量名放在function后面而已,它也代表了你的变量,所以说在这里我们也声明的3个全局变量。
但在团队协作中,我们不能只考虑自己,如果别人也我了同样的方法就会覆盖掉原有的功能,特别是你定义了很多方法,这种相互覆盖的问题是不很不容易察觉到的。
所以我们应该把它们 放在一个对象里
var CheckObject = {
checkName: function () {
// 验证姓名
},
checkEmail: function () {
// 验证邮箱
},
checkPassword: function () {
// 验证密码
}
}
当然了,我们也可以通过我们熟悉的点(obj.xxx)方法来创建
var CheckObject = function() {}
CheckObject.checkName: function () {
// 验证姓名
},
CheckObject.checkEmail: function () {
// 验证邮箱
},
CheckObject.checkPassword: function () {
// 验证密码
}
但这里又会有一个问题出现,我们自己使用这个方法的时候确实非常方便,便如果别用想使用就会有些麻烦了,因为这个对象不能复制一份,或者说这个对你在用new关键字创建新的对象的时候,新的对象是不能继承这些方法的。
这里举个例子,如果我喜欢某本书,买回去后,我的小伙伴看见了,感觉很有用,可书就一本要怎么办,如果再买一本就太浪费了。所以如果你有一台复制机,那么你小伙伴再多,你也有能力给他们每人复印一本
如果想简单地复制一下,你可以将这些方法放在一个函数对象中
var CheckObject = function() {
return {
checkName: function () {
// 验证姓名
},
checkEmail: function () {
// 验证邮箱
},
checkPassword: function () {
// 验证密码
}
}
}
// 所以以后我们想再次使用的时候就可以这样
var a = CheckObject
a.checkEmail
虽然创建了新对象完成了我们的需求,但是按面向对象的编程思想,这不是一个正直意义上类的创建方法,而且创建的的对象a和CheckObject没有任何关系(返回出来的对象本身就与CheckObject对象无关),所以我们要稍加改造一下
var CheckObject = function() {
this.checkName: function () {
// 验证姓名
},
this.checkEmail: function () {
// 验证邮箱
},
this.checkPassword: function () {
// 验证密码
}
}
像上面这样写就可以看成是一个类了,既然是一个类了,我我们就应该用new来创建
var a = new CheckObject()
a.checkEmail
但是,我们把所有的方法放在函数内部,并通过this来定义,第一次通过new关键字创建新对象里,新创建的对象都会对类的this上的属性进行复制 ,而这些新创建的对象都会有自己的一套方法,然而有时候这么做千万的消耗是非常奢侈的,我们再处理一下
var CheckObject = function(){}
CheckObject.prototype.checkName = function(){
// 验证姓名
}
CheckObject.prototype.checkEmail = function(){
// 验证邮箱
}
CheckObject.prototype.checkPassword = function(){
// 验证密码
}
这样创建对你的时候,创建出来的对象所拥有的方法就都是一个了,因为它们都要依赖prototype原型依次寻找,这样做的问题在于我们要写很多次prototype,所以我们可以这样做
var CheckObject = function(){}
CheckObject.prototype = {
checkName : function(){
// 验证姓名
}
checkEmail : function(){
// 验证邮箱
}
checkPassword : function(){
// 验证密码
}
}
}
但有一点要特别提醒一下,这两种方式不能混着用,这样做后面的对象的原型对象赋值新对象时,就会覆盖掉前对prototpye对象赋值的方法
继续 ,在这里我们又发现这么做又会有一个新的问题,就是如果我想一次过验证账号,邮箱和密码就必需要单独调用,这是可以避免的。知道this吧,在JavaScript中,this指向的是当前对象,所以你可以将它返回
var CheckObject = function(){}
CheckObject.prototype = {
checkName : function(){
// 验证姓名
return this;
}
checkEmail : function(){
// 验证邮箱
return this;
}
checkPassword : function(){
// 验证密码
return this;
}
}
// 使用的时候先创建一个
// 链式调用
var a = new CheckObject();
a.checkName().checkEmail().checkPassword()
后记,JavaScript是一门灵活的语言,函数在其中扮演着一等公民。所以使用JavaScript你可以编写出很多优雅的艺术代码