搜尋
首頁web前端js教程js变量作用域及可访问性的探讨_javascript技巧

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

复制代码 代码如下:
 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  { 
   sum +=index; 
  } 

 document.write("index is :"+index+"
"); 
 return sum; 

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

 
复制代码 代码如下:
function foo(flag) 
 { 
  var sum = 0; 
  for(var index=0;index  { 
   sum +=index; 
  } 
  document.write("index is :"+index+"
"); 
  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+"
"); 
var basicB = new BasicInfo("zfp",100,"ShenZhen"); 
document.write("basicB's generalInfo is : "+ basicB.generalInfo+"
"); 
执行该代码后,我们将可以看到如下结果: 
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+"
"); 
document.write(BasicInfo.generalInfo+"
"); 
BasicInfo.generalInfo = "info is changed"; 
document.write(BasicInfo.generalInfo+"
"); 

执行以上代码,将会得到如下结果:
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+"
");
}
new foo("foo test");
document.write(_foo+"
");
执行代码,将得到如下结果:
3zfp owned
foo test
但是,这个又有一个注意的地方,function是编译期对象,也就是说_foo这个全局变量要在foo对象被实例化后才能被初始化,也就是说如果将
new foo();
document.write(_foo+"
");
对调成
document.write(_foo+"
");
new foo();
系统将提示 "_foo 未定义"。 
2、如果定义了一个和全局变量同名的局部变量属性,如下:
复制代码 代码如下:
var copyright = "3zfp owned"; 
var foo =function(fooInfo) 

 var copyright = fooInfo; //同名变量 
 this.showInfo = function() 
 { 
 document.write(copyright+"
"); 
 } 

new foo("foo test").showInfo(); 
document.write(copyright+"
"); 
执行代码,将得到如下结果:
3zfp owned
foo test

原因是由于function 是在编译期间完成变量的定义,也就是foo内部的copyright的定义是在编译期间完成的,其作用域只在foo对象内有效,而与外部定义的全局变量copyright无关。
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Python vs. JavaScript:開發人員的比較分析Python vs. JavaScript:開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型,適合科學計算和數據分析。 2.JavaScript採用弱類型,廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢,選擇時應根據項目需求決定。

Python vs. JavaScript:選擇合適的工具Python vs. JavaScript:選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型:1)數據科學和自動化任務選擇Python;2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞,而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript:了解每個的優勢Python和JavaScript:了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢,選擇取決於項目需求和個人偏好。 1.Python易學,語法簡潔,適用於數據科學和後端開發,但執行速度較慢。 2.JavaScript在前端開發中無處不在,異步編程能力強,Node.js使其適用於全棧開發,但語法可能複雜且易出錯。

JavaScript的核心:它是在C還是C上構建的?JavaScript的核心:它是在C還是C上構建的?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1)JavascriptwasdesignedAsignedAsalightWeight,drackendedlanguageforwebbrowsers.2)Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers,典型地,替代品。

JavaScript應用程序:從前端到後端JavaScript應用程序:從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗,後端通過Node.js處理服務器任務。 1.前端示例:改變網頁文本內容。 2.後端示例:創建Node.js服務器。

Python vs. JavaScript:您應該學到哪種語言?Python vs. JavaScript:您應該學到哪種語言?May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統:1)職業發展:Python適合數據科學和後端開發,JavaScript適合前端和全棧開發。 2)學習曲線:Python語法簡潔,適合初學者;JavaScript語法靈活。 3)生態系統:Python有豐富的科學計算庫,JavaScript有強大的前端框架。

JavaScript框架:為現代網絡開發提供動力JavaScript框架:為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮:1.項目規模和復雜度,2.團隊經驗,3.生態系統和社區支持。

JavaScript,C和瀏覽器之間的關係JavaScript,C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪,JavaScript、C 和瀏覽器之間到底有什麼關係?它們之間看似毫無關聯,但實際上,它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章,你將了解到JavaScript如何在瀏覽器中運行,C 在瀏覽器引擎中的作用,以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道,JavaScript是前端開發的核心語言,它直接在瀏覽器中運行,讓網頁變得生動有趣。你是否曾經想過,為什麼JavaScr

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。