JavaScript进阶学习:操作对象收编变量以及函数方法
2022-01-03 本文已影响0人
听书先生
在项目的实际开发中,尤其是多人团队的开发中,就必须需要留意的就是全局变量的污染,针对全局变量,很容易想到的是全局定义的var data = 0;
这种,但是,更需要注意的是函数也是属于变量
。因此,在企业中,就需要对函数方法使用原型对象进行套壳封装一层。
比如,以下场景:
function checkName() {
// 验证用户名
console.log('调用了验证用户名的方法');
}
function checkTel() {
// 验证电话号码
console.log('调用了验证电话号码的方法');
}
这样写就很容易将别人定义的重复的方法名进行覆盖,因此,我们需要进行一层处理,划分自己单独的区域范围。
- 途径一:使用真假对象:
var CheckObject = function() {
return {
checkName: function() {
// 验证用户名
console.log('调用了验证用户名的方法');
},
checkTel: function() {
// 验证电话号码
console.log('调用了验证电话号码的方法');
}
}
}
var c = CheckObject();
c.checkName();
如上所示,我们使用了真假对象划分了自己的区域范围,但是,这种仍然不够方便,比如,CheckObject
中有很多方法,但是我们想调其中的四五个,那么我们要不断的使用实例对象进行调取吗?不需要的,只需要对上述代码进行部分改进.....
只需要考虑到CheckObject
下的checkName方法中的this指向的是外面套的那个对象即可,因此,我们在创建方法的时候只需要将this指向return出去即可。
var CheckObject = function() {
return {
checkName: function() {
// 验证用户名
console.log('调用了验证用户名的方法');
return this;
},
checkTel: function() {
// 验证电话号码
console.log('调用了验证电话号码的方法');
return this;
}
}
}
var c = CheckObject();
c.checkName().checkTel();
这样,我们就可以使用链式调用
其中的方法了。
-
途径二:单独写一个expand拓展函数:
我们可以定义一个原生对象,然后在原生对象的原型上定义一个可以让开发者自行添加方法的向外暴露的方法。
Function.prototype.addMethod = function(name, fn) {
this[name] = fn;
}
var c = new Function();
c.addMethod('checkName',function() {
console.log('调用了检验名称的方法')
})
c.addMethod('checkTel',function() {
console.log('调用了检验电话号码的方法')
})
c.addMethod('checkPsd',function() {
console.log('调用了检验密码的方法')
})
c.checkName();
Function.prototype.addMethod
我们可以通过这钟方式对Funtion的原型对象上进行添加一个公共分享出去的方法。后续需要添加其他的方法时,我们也可以继续在尾部追加方法即可。
这种方式还可以继续进行优化,我们可以链式的去添加方法进Function的构造函数中去。
Function.prototype.addMethod = function(name, fn) {
this[name] = fn;
return this;
}
var c = new Function();
c.addMethod('checkName',function() {
console.log('调用了检验名称的方法');
}).addMethod('checkTel',function() {
console.log('调用了检验电话号码的方法');
}).addMethod('checkPsd',function() {
console.log('调用了检验密码的方法');
})
c.checkTel();
这样就提高了灵活性。