js变量作用域及可访问性的探讨


Posted in Javascript onNovember 23, 2006

每一种语言都有变量的概念,变量是用来存储信息的一个元素。比如下面这个函数: 

 function Student(name,age,from)  
{  
 this.name = name;  
  this.age = age;  
 this.from = from;  
  this.ToString = function()  
 {  
  return "my information is name: "+this.name+",age : "+this.age+", from :" +this.from;  
  }  
}
 
   Student类有三个变量,分别为name(名字),age(年龄),from(籍贯),这三个变量构成了描述一个对象的信息。当然,这里还有一个方法用来返回Student的信息。
   但是,我们是不是定义了一个变量,它就能一直存在着,并且还有可能在任何地方都能被访问和使用直到其被销毁?仔细想想,上面的需求是比较过分的,因为某些变量在某个功能实现后就不再利用了,但如果这个变量还存在的话,就占用了系统资源了,俗语曰:“站着茅坑不拉#$%”。
   于是我们对变量的及时和按需求地销毁有一个探讨的话题了。
   好,切入正题吧,就本人所接触过的来讲,js中支持如下几种类型的变量,分别为:局部变量、类变量、私有变量、实例变量、静态变量和全局变量。接下来我们就一一探讨研究下。

局部变量:

局部变量一般指在{}范围内有效变量,也就是语句块内有效的变量,如: 

 

function foo(flag)  
{  
 var sum = 0;  
 if(flag == true)  
 {  
  var index;  
  for(index=0;index<10;index++)  
  {  
   sum +=index;  
  }  
}  
 document.write("index is :"+index+"<br>");  
 return sum;  
}  
//document.write("sum is :" +sum+"<br>");  
document.write("result is :"+foo(true)+"<br>"); 
   该代码执行后输出的结果为:“index is :undefined” 和 “result is :0”,我们可以看到希望输出的index变量的值为undefined,也就是未定义。因此我们可以发现,index变量在if语句块结束后即被销毁了。那么“sum”变量呢?这个变量在foo()函数段执行完毕后被销毁了,如果您去掉我注释的那条语句,再执行,您将会发现系统将报错。值得注意的是,如果我把上面的foo()函数改成如下: 

 

function foo(flag)  
 {  
  var sum = 0;  
  for(var index=0;index<10;index++)  
  {  
   sum +=index;  
  }  
  document.write("index is :"+index+"<br>");  
  return sum;  
} 

   您将可以看见可以输出index值("index is :10"),这个是js和其他语言的不同地方,因为index是在for循环的{}外面定义的,因此其作用范围在foo()函数使用完毕后才销毁。

  类变量:
   类变量,实际上就是类的一个属性或字段或一个方法,该变量在该类的一个实例对象被销毁后自动销毁,比如我们开始时举的Student类。这个我们不多讨论,大家可以自己试一下。

私有变量:
   私有变量,值得是某个类自己内部是用的一个属性,外部无法调用,其定义是用 var 来声明的。注意如果不用var 来声明,该变量将是全局变量(我们下面将会讨论),如: 

function Student(name,age,from)  
{   this.name = FormatIt(name);  
 this.age = age;  
this.from = from;  
 var origName = name;  
 var FormatIt = function(name)  
 {  
 return name.substr(0,5);  
 }  
 this.ToString = function()  
 {  
  return "my information is name: "+origName+",age : "+this.age+", from :" +this.from;  
 }  
} 

   这里,我们分别定义了一个origName和FormatIt()两个私有变量(按面向对象的解释,应该用类的属性来称呼)。
   我们把这种情况下的方法也成为变量,因为该情况下的变量是个function类型的变量,而function也属于Object类的继承类。在这种情形下,如果我们定义了 var zfp = new Student("3zfp",100,"ShenZhen")。但无法通过zfp.origName和zfp.FormatIt()方式来访问这两个变量的。

注意以下几点:

1、私有变量是不能用this来指示的。
2、私有方法类型的变量的调用必须是在该方法声明后。如我们将Student类改造如下:

function Student(name,age,from)  
{  
 var origName = name;  
 this.name = FormatName(name);  
 this.age = age;  
 this.from = from;  
 var FormatName = function(name)  
 {  
  return name+".china";  
 }  
 this.ToString = function()  
 {  
  return "my information is name: "+origName+",age : "+this.age+", from :" +this.from;  
 }  
}  
var zfp = new Student("3zfp",100,"ShenZhen"); 
代码执行后,将会报"找不到对象"的错误.意思是FormatName()未定义。

3、私有方法无法访问this指示的变量(公开变量),如下:

function Student(basicinfo)  
{  
 this.basicInfo = basicinfo;   var FormatInfo = function()  
 {  
  this.basicInfo.name = this.basicInfo.name+".china";  
 }  
 FormatInfo();  
}  
function BasicInfo(name,age,from)  
{  
 this.name = name;  
 this.age = age;  
 this.from = from;  
}  
var zfp = new Student(new BasicInfo("3zfp",100,"ShenZhen")); 
执行代码后,系统将会提示 “this.basicInfo为空或不是对象”的错误。
基本结论是,私有方法只能访问私有属性,私有属性在声明并赋值后可以在类的任何地方访问,

实例变量:
实例变量即某个实例对象所拥有的变量。如:

function BasicInfo(name,age,from)  
{  
 this.name = name;  
 this.age = age;  
 this.from = from;  
}  
var basicA = new BasicInfo("3zfp",100,"ShenZhen");  
basicA.generalInfo = "is 3zfp owned object";  
document.write("basicA's generalInfo is : "+ basicA.generalInfo+"<br>");  
var basicB = new BasicInfo("zfp",100,"ShenZhen");  
document.write("basicB's generalInfo is : "+ basicB.generalInfo+"<br>");  
执行该代码后,我们将可以看到如下结果:  
basicA's generalInfo is : is 3zfp owned object  
basicB's generalInfo is : undefined 
静态变量:

静态变量即为某个类所拥有的属性,通过 类名+"."+静态变量名 的方式访问该属性。如下可以做清晰的解释:

function BasicInfo(name,age,from)  
{  
 this.name = name;  
 this.age = age;  
 this.from = from;  
}  
BasicInfo.generalInfo = "is 3zfp owned object";  
var basic = new BasicInfo("zfp",100,"ShenZhen");  
document.write(basic.generalInfo+"<br>");  
document.write(BasicInfo.generalInfo+"<br>");  
BasicInfo.generalInfo = "info is changed";  
document.write(BasicInfo.generalInfo+"<br>"); 

执行以上代码,将会得到如下结果:
undefined
is 3zfp owned object
info is changed

注意以下几点:
1、以 类名+"."+静态变量名 的方式来声明一个静态变量
2、静态变量并不属于类的某个实例对象所独有的属性,为对象的共享.
3、能以实例对象名+"."+静态变量名来访问。

全局变量:
全局变量即整个系统运行期间有效访问控制的变量,通常是在一个js代码开头定义,如:

var copyright = "3zfp owned";  
var foo =function()  
{  
 window.alert(copyright);  
} 
注意以下几点:
1、如果一个变量不用var 来声明,则其被视为全局变量。如:
var copyright = "3zfp owned";
var foo =function(fooInfo)
{
 _foo = fooInfo;
document.write(copyright+"<br>");
}
new foo("foo test");
document.write(_foo+"<br>");
执行代码,将得到如下结果:
3zfp owned
foo test
但是,这个又有一个注意的地方,function是编译期对象,也就是说_foo这个全局变量要在foo对象被实例化后才能被初始化,也就是说如果将
new foo();
document.write(_foo+"<br>");
对调成
document.write(_foo+"<br>");
new foo();
系统将提示 "_foo 未定义"。 
2、如果定义了一个和全局变量同名的局部变量属性,如下:
var copyright = "3zfp owned";  
var foo =function(fooInfo)  
{  
 var copyright = fooInfo; //同名变量  
 this.showInfo = function()  
 {  
 document.write(copyright+"<br>");  
 }  
}  
new foo("foo test").showInfo();  
document.write(copyright+"<br>"); 
执行代码,将得到如下结果:
3zfp owned
foo test

原因是由于function 是在编译期间完成变量的定义,也就是foo内部的copyright的定义是在编译期间完成的,其作用域只在foo对象内有效,而与外部定义的全局变量copyright无关。

Javascript 相关文章推荐
jquery弹出层类代码分享
Dec 27 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
Vue render深入开发讲解
Apr 13 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
bcastr2.0 通用的图片浏览器
Nov 22 #Javascript
一种JavaScript的设计模式
Nov 22 #Javascript
表单内同名元素的控制
Nov 22 #Javascript
document.all与WEB标准
May 13 #Javascript
云网广告中的代码,提示出错,大家找找
Nov 21 #Javascript
在视频前插入广告
Nov 20 #Javascript
使两个iframe的高度与内容自适应,且相等
Nov 20 #Javascript
You might like
解决GD中文乱码问题
2007/02/14 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
FCK调用方法..
2006/12/21 Javascript
filemanage功能中用到的common.js
2007/04/08 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
JS中的三个循环小结
2017/06/20 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
大学生实训报告总结
2014/11/05 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
小学毕业感言100字
2015/07/30 职场文书
教学反思怎么写
2016/02/24 职场文书
用Python生成会跳舞的美女
2022/01/18 Python