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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
actionscript与javascript的区别
May 25 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
智能电子应届生求职信
2013/11/10 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
双语教学实施方案
2014/03/23 职场文书
合作意向书格式及范文
2014/03/31 职场文书
计算机实训报告范文
2014/11/05 职场文书
社区植树节活动总结
2015/02/06 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸