理解JavaScript变量作用域更轻松

所属分类: 网络编程 / JavaScript 阅读数: 1894
收藏 0 赞 0 分享
JavaScript本身作为一门简单的语言,就其变量作用域问题一样令不少人头晕,这主要是因为JavaScript闭包的存在。本文不打算深入讲解JavaScript变量作用域问题(其实本人也没有能力能把这一话题讲的深入些),也不讲“闭包”话题,本文只讨论最实用的JavaScript作用域知识点。

一、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='This is message';
alert(msg);
})();
document.write(msg); //msg未定义 (匿名函数外的其它方法已无法调用msg这个变量)
//-----------------------------
var msg='This is message';
alert(msg);

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

function clsMsg()
{
this.msg='This is default message';
this.showMsg=function()
{
alert(this.msg);
}
}
sMsg=new clsMsg();
sMsg.msg='This is new message';
sMsg.showMsg();

四、相关知识点指引
理解以下相关知识点有助于你更好地认识JavaScript变量作用域,本文暂不详述,随后会以单独篇幅来讲,敬请关注。
(1)理解JavaScript“预解析”
(2)JavaScript闭包
更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多