登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript变量作用域分类和使用技巧实例详解

伊谢尔伦
发布: 2017-07-18 10:23:51
原创
1064人浏览过

变量作用域是每门编程语言都会涉及的话题,也是作为一名程序员必需掌握的知识点,能深入掌握变量作用域更有助于你编写稳定的程序。

一、JavaScript作用域分类
JavaScript就两种作用域:全局(window)、函数级(function)。函数级(function)不要理解为“块级(大括号{}级)”。

二、区分及定义JavaScript全局变量与局部变量
1.1定义在所有函数最外边,使用或不使用var关键字定义的变量都是全局变量。全局变量其实被解析成window对象的一个属性,所以我们可以以“window.全局变量名”方式访问它,推荐在没有必要的情况下直接使用变量名访问。如下例子演示了全局变量定义最常见的方法: 

var msg1='This is message 1'; 
msg2='This is message 2'; 
alert(window.msg1); //This is message 1 使用window关键字进行访问 
alert(window.msg2); //This is message 2 
alert(msg1); //This is message 1 省略window关键字的访问方式 
alert(msg2); //This is message 2 
function otherFunction(){} //其它一些函数或对象声明代码 
var otherObject={};
登录后复制


1.2在函数内(局部变量运行时环境)一样可以定义和获取全局变量。定义的方法就是不使用var关键字,而在局部环境中亦可轻松获得全局变量内容,直接使用全局变量名引用即可。需要注意的是:如果函数内定义了与全局变量同名的局部变量,那么此时函数体将优先使用自己的局部变量,如果此时你非要使用同名的全局变量,请加上window前缀。举例如下:

var msg1='This is message 1'; 
var msg3='This is message 3'; 
function otherFunction() 
{ 
msg2='This is message 2'; //不使用var关键字,其实也是定义一个全局变量 
var msg3='Message 3'; 
alert(msg1); //This is message 1 (函数内当然可以访问到外面定义的全局变量,再深的函数嵌套一样能正确获到这个全局变量,这是JavaScript闭包的其中一种体现) 
alert(msg3); //Message 3 (局部变量msg3) 
alert(window.msg3); //This is message 3 (使用window前缀访问同名的全局变量msg3) 
alert(this.msg3); //This is message 3 (因为otherFunction ()定义在一个全局的环境中,此时otherFunction ()的this也是指向window,所有你看到window. msg3是等于this. msg3的) 
} 
otherFunction(); 
//otherFunction函数外面定义的msg1和里面定义的msg2依然是全局变量 
alert(window.msg1); //This is message 1 
alert(window.msg2); //This is message 2
登录后复制


2.1使用var关键字,在函数体内定义的变量是局部变量,此变量能供其下面所有语句块({})及子函数使用。这个变量在这个函数里任何地方都可以访问到,但却不能在这个函数的外面“直接”访问(闭包允许间接访问,或代理访问,此知识点不在本文讨论范围)。举例如下:

function showMsg() 
{ 
if (true) 
{ 
var msg='This is message'; 
} 
alert(msg); //This is message 
} 
showMsg(); 
alert(typeof(msg)); //undefiend 
//这里在if {}大括号内定义的变量msg还能在if外showMsg()内访问到,但在showMsg()外则是无法访问的
登录后复制


2.2父函数的变量可以被子函数访问,但子函数的变量却不能被父函数访问,显然这与我们一开始说的函数级作用域是相吻合的。这看起来老爸爽快些,儿子吝啬些。举例如下:

function showMsg() 
{ 
var MsgA='Message A'; 
this.setMsg=function(msg) 
{ 
var MsgB='Message B'; 
alert(MsgA); //Message A (子函数setMsg()可以访问父函数showMsg()的局部变量MsgA) 
} 
alert(MsgB); //MsgB未定义 (在父函数中不能访问其子函数中定义的变量MsgB) 
} 
var sm=new showMsg(); 
sm.setMsg('Message string');
登录后复制


三、使用技巧
1、为了避免变量混乱或被覆盖,对于局部变量的定义一定不要忘记加上var关键字(必要时我们要变量使用完后主动释放它,即“变量名=null”),同时建议把所有变量集中定义在每个函数体内的开头位置。举例如下:

var msg='Message'; 
function showMsg() 
{ 
var msg; //这里即使不小心使用了与全局变量一样的变量名,也不用担心覆盖同名全局变量的问题 
var a; 
var b; 
var c; 
for (a=0;a<10;a++){} 
this.setMsg=function(){} 
}
登录后复制


2、巧用匿名函数,减少命名冲突或变量污染。如下两段代码其实实现了相同的功能,而第一段代码写法自己可以在那个匿名函数内大胆用自己想用的变量名等,不用担心自己定义的变量覆盖其他人定义或自己其它地方定义的变量。

//定义一个匿名函数,然后把代码丢到这个匿名函数里面,能有效减少命名冲突或变量污染,这是常见JS框架的做法 
(function() 
{ 
var msg=&#39;This is message&#39;; 
alert(msg); 
})(); 
document.write(msg); //msg未定义 (匿名函数外的其它方法已无法调用msg这个变量) 
//----------------------------- 
var msg=&#39;This is message&#39;; 
alert(msg);
登录后复制


3、不建议在无须实例化的函数内使用this代替window去访问全局变量。一般情况使用this关键字的函数应当作为JavaScript类来处理(我喜欢把“cls”作为类名的前缀)。以下函数如果仅当作普通函数调用一下,就不应该出现this关键字,因为这通常是去操作一个全局变量了。例子:

function clsMsg() 
{ 
this.msg=&#39;This is default message&#39;; 
this.showMsg=function() 
{ 
alert(this.msg); 
} 
} 
sMsg=new clsMsg(); 
sMsg.msg=&#39;This is new message&#39;; 
sMsg.showMsg();
登录后复制

以上就是JavaScript变量作用域分类和使用技巧实例详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号