JavaScript變數 沒有塊範圍

cactusz發表於2017-07-06
JavaScript變數

區域性變數覆蓋全域性變數，如下：

 

<script>
	//定義全域性變數test
	var test = "全域性變數"; 
	//定義函式checkscope
	function checkscope()
	{
		//定義區域性變數
	//	var test = "區域性變數";
		//輸出區域性變數
		document.writeln(test+"<br/>");
		alert(test);
		//var test="nihao";
	}
	checkscope(); 
</script>
 

 

JavaScript變數沒有塊範圍，只要在方法中定義，無論是在switch塊中還是if塊中，他們的作用範圍都是整個函式。例如下面程式碼：

<script>
	function test(o)    //javascript是值傳遞的
	{
		//定義變數i，變數i的作用範圍是整個函式
		var i = 0;
		if (typeof o == "object") 
		{
			//定義變數j，變數j的作用範圍是整個函式內，而不是if塊內。
			var j = 5;
			for(var k = 0; k < 10; k++)
			{
				//因為JavaScript沒有程式碼塊範圍
				//所以k的作用範圍是整個函式內，而不是迴圈體內
				document.write(k);
			}
		}
		//即使出了迴圈體，k的值依然存在
		alert(k + "\n" + j); 
	}
	test(document);
</script>

 

<script>
	//定義全域性變數
	var scope = "全域性變數";
	function test()
	{
		//因此全域性變數被區域性變數覆蓋
		//而此時scope區域性變數尚未賦值，故此處輸出undefined

		document.writeln(scope + "<br />"); 
		//定義scope的區域性變數，其作用範圍為整個函式內
		var scope = "區域性變數";
		//再次輸出scope的值。
		document.writeln(scope + "<br />"); 
	}
	test();
</script>
 

 

變數範圍對於執行html事件處理一樣有效，如下：

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title> 事件處理中的區域性變數和全域性變數 </title>
	<meta name="author" content="Yeeku.H.Lee" />
	<meta name="website" content="http://www.leegang.org" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<script type="text/javascript">
		//定義全域性變數
		  var x = "全域性變數";
	</script>
</head>

<body>
<!-- 在onclick事件中重新定義了x區域性變數變數 -->
<input type="button" value="區域性變數" 
	onclick="var x = '區域性變數'; alert('輸出x區域性變數的值：' + x);" />
<!-- 直接輸出全域性變數x的值 -->
<input type="button" value="全域性變數 " 
	onclick="alert('輸出x全域性變數的值： ' + x);" />
</body>
</html>
 

函式（其實也是個類，此函式是唯一的構造器。使用new關鍵字建立）的

區域性變數；沒有字首的變數或var字首的變數，內部使用

例項變數：this.變數名，通過物件名訪問

靜態變數：函式名(類名).變數名，通過函式名訪問

 

 

 

<script>
	//定義函式Person
	function Person(national, age)
	{
		//this修飾的屬性為例項屬性
		this.age = age;
		//Person修飾的屬性為靜態屬性
		Person.national =national;    
		//以var定義的變數為區域性變數
		var bb = 0;    
	}
	//建立Person的第一個物件p1。國籍為中國，年紀為29
	var p1 = new Person('中國' , 29);
	document.writeln("建立第一個Person物件<br />");
	//輸出第一個物件p1的年紀和國籍
	document.writeln("p1的age屬性為" + p1.age + "<br />");
	document.writeln("p1的national屬性為" + p1.national + "<br />");
	document.writeln("通過Person訪問靜態national屬性為" 
		+ Person.national + "<br />");
	//輸出bb屬性
	document.writeln("p1的bb屬性為" + p1.bb + "<br /><hr />");
	//建立Person的第二個物件p2
	var p2 = new Person('美國' , 32);
	document.writeln("建立兩個Person物件之後<br />"); 
	//再次輸出p1的年紀和國籍
	document.writeln("p1的age屬性為" + p1.age + "<br />");
	document.writeln("p1的national屬性為" + p1.national + "<br />");
	//輸出p2的年紀和國籍
	document.writeln("p2的age屬性為" + p2.age + "<br>");
	document.writeln("p2的national屬性為" + p2.national + "<br />");
	//通過類名訪問靜態屬性名
	document.writeln("通過Person訪問靜態national屬性為"
		+ Person.national + "<br />");
</script>
 

 

還可以隨時為物件增加方法和屬性

 

 

<script>
	function Student(grade , subject)
	{
		//d定義一個grade例項屬性，
		//將grade形參的值賦值給該例項屬性。
		this.grade = grade;
		//定義一個subject靜態屬性，
		//將subject形參的值賦值給該靜態屬性。
		Student.subject = subject;
	}
	s1 = new Student(5, 'Java');
	with(document)
	{
		writeln('s1的grade屬性：' + s1.grade + "<br />");
		writeln('s1的subject屬性：' + s1.subject + "<br />");
		writeln('Student的subject屬性：' + Student.subject + "<br />");
	}
	//為s1物件的subject屬性賦值，即為它增加一個subject屬性
	s1.subject = 'Ruby';
	with(document)
	{
		writeln('<hr />為s1的subject屬性賦值後<br />');
		writeln('s1的subject屬性：' + s1.subject + "<br />");
		writeln('Student的subject屬性：' + Student.subject + "<br />");
	}
</script>
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相關文章