如何防止js变量命名冲突?
我们在开发时,每一个人可能会写不同的js文件,最后会将js引入到一个html页面上。每一个人写的js文件可能会使用同一个变量,比如name。如何避免?
1.给自己写的变量加上个人标识别前缀
在自己的变量名名称前可以加上自己的姓名首字母缩写,如 :wdq_name;
但是姓名有2姓 有3姓,有4姓,其他开发伙伴们可能会理解错,语义化不好。
2.使用命名空间
不同的函数变量在不同的空间上,是不会有冲突的。比如变量在不同的对象上或者变量在同一个对象的不同属性上。例子如下:
// 全局变量
var globalVarial = {
department1:{
name:'wdq'
},
department2:{
name:'wdq'
},
department3:{
name:'wdq'
}
}
各个开发人员在自己的js文件上取属于自己命名空间的变量,就不会有冲突了;比如我取department1上的变量;例如:
var wdqVar = globalVarial.department1;
使用闭包,变量私有化,防止污染全局变量
在使用函数的时候,我们可以通过闭包的形式,使属性私有化;闭包里面的变量名即使和全局变量名称相同,也不会影响全局变量;例子如下
var name ='wdq';
var initF = (function(){
var name ='gxm';
function sayName(){
console.log(name)
}
return function(){
sayName();
}
}())
执行上面代码log输出的结果为
gxm
扩展小知识点
1.如何遍历一个对象?
使用for in 来实现.
var obj = {
name:'wdq',
sex:'male',
height:180,
height:140
}
for(var prop in obj){
console.log(prop + " :" + obj[prop])
}
for in 循环会遍历每个属性,prop 变量为对象的属性名
不能使用obj.prop 来获取属性值, obj.prop 会转换成obj['prop'] ,就会寻找属性名为字符串 'prop' 的属性,这个属性不存在,为 undefined
for in 会打印出当前对象原型链上的属性:
var obj = {
name:'wdq',
sex:'male',
height:180,
height:140
}
obj.__proto__= {lastName:'wen'};
for(var prop in obj){
console.log(prop + " :" + obj[prop])
}
for in 会获取当前属性和原形链上继承过来的属性,所以也会打印出 lastName: wen
如果我们不需要原型链上的属性,如果去掉?
可以通过obj.hasOwnProperty()
方法来判断是不是当前对象上的属性
返回true代表自己拥有的属性,不是继承过来的
例子:
var obj = {
name:'wdq',
sex:'male',
height:180,
height:140
}
obj.__proto__= {lastName:'wen'};
for(var prop in obj){
if(!obj.hasOwnProperty(prop)){
continue;
}
console.log(prop + " :" + obj[prop])
}
这样就不会打印出 lastName: wen 啦
[] 的使用有时候会节省代码量
比如 老王 有10个妻子,如果根据序号,找到相应序号的妻子?
var oldWang = {
wife1:{name:'xiaoliu'},
wife2:{name:'xiaowang'},
wife3:{name:'xiaozhang'},
wife4:{name:'xiaohu'},
//... 省略
callWife(num){
// 实现方式
}
}
方法1:
通过判断返回妻子。switch case , if
callWife(num){
switch(num){
case 1:
return this.wife1;
// ... 省略
}
}
方法2:
通过 [] 来实现
callWife(num){
return this['wife' + num];
}
方法2 使用更加灵活方便
添加小编微信 751640443 ,回复 ‘简书-js’ 获取js入门+高级 免费视频和学习资料