函数和变量重名始终是一个令人头痛的问题,先讲变量吧,相信了解JS的朋友都知道,在JS中
是没有块级作用域的只有函数作用域,也就是说那些以大括号为界定符的代码块是管不住其中定义
的变量的作用域的,举例:
1 { 2 var num = 110; 3 } 4 console.log(num);//打印结果:110,而不是num is not defined
1 for(var j = 0; j < 5; j++); 2 console.log(j);//结果:5
怎么解决? 一般来说有经验的程序员会尽量少的使用全局变量,尽可能使用局部变量,这不仅会减少变量重名的几率,
更会减少内存开销,因为局部变量一般都会在函数结束后自动销毁释放出内存,而全局变量会直到进程结束才会被销毁
掉。其次,当我们需要一个作用域来关住变量时一般会用一个匿名函数来充当这个作用域。如:
1 (function(){ 2 var gender = ‘男‘; 3 })(); 4 console.log(gender);//结果是:gender is not defined
匿名函数充当作用域这种方法一般已经能够满足一部分程序员的需求了,但问题来了,函数重名怎么解决?
项目中必须要使用大量全局变量又该如何解决呢?
其实解决办法跟上面方法的思路一样,只是有一点技巧性,JS既然缺少作用域限制,那我们自己再给它人为加上一个
作用域,并且保证每个作用域不重复,这样一来问题不就解决了吗。好了接下来我们缺少的就是这么一个神奇的作用域
替代品,令人开心的是,这个东西本身JS就有,那就是对象!
具体我们可以这么操作:假如现在有三个同学要一起合作一个教务系统的项目,这个系统需要老师和学生还有工作人员
的信息,三个同学分工解决这三类信息的工作,具体代码如下:
1 // A同学负责的工作人员信息 2 var A = {} //定义一个空对象 3 A.name = ‘tom‘; 4 A.gender = ‘male‘; 5 A.age = 30; 6 A.showName = function() { 7 alert(this.name); 8 } 9 A.showAge = function() { 10 alert(this.age); 11 } 12 13 // B同学负责的老师信息 14 var B = {} 15 B.name = ‘Jack‘; 16 B.gender = ‘male‘; 17 B.age = 28; 18 B.showName = function() { 19 alert(this.name); 20 } 21 B.showAge = function() { 22 alert(this.age); 23 } 24 25 // C同学负责的学生信息 26 var C = {} 27 C.name = ‘Lucy‘; 28 C.gender = ‘female‘; 29 C.age = 17; 30 C.showName = function() { 31 alert(this.name); 32 } 33 C.showAge = function() { 34 alert(this.age); 35 }
可以看到,ABC同学负责的模块中都出现了同名的区域,name,age,showName,showAge等,此时却并不会
出现冲突的问题,因为这些变量和方法都挂载到了不同的对象上,这无形中就给每个同名变量和方法增加了一个
顶部命名空间,这样一来困扰我们的问题就可以很轻易的解决了。
1 // 正常使用,不会冲突 2 console.log(A.name);//结果:tom 3 console.log(B.name);//结果:Jack 4 console.log(C.name);//结果:Lucy 5 A.showAge();//结果:30 6 B.showAge();//结果:28 7 C.showAge();//结果:17
最有效的方法,还是采用面向对象开发吧,面向对象非常适合团队化开发,这样可以最大化的减少代码耦合的几率,项目也容易维护。
原文地址:https://www.cnblogs.com/luoge-Snippet/p/9271320.html