javascript基礎（函式與方法的區別，變數作用域，變數和函式的宣告提前，函式作用域）（十五）

厚積薄發2017發表於2017-02-08
JavaScript函式變數

1.函式與方法的區別：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 方法（method）
			 */
			
			//建立一個物件
			var obj = {name:"孫悟空",age:18};
			
			//物件的屬性也可以是物件
			obj.brother = {name:"豬八戒",age:28};
			
			//console.log(obj.brother.name);
			
			//物件的屬性也可以是一個函式
			//當一個物件的屬性是一個函式時，我們稱這個函式是這個物件的方法
			//函式和方法只是稱呼上的不同，本質上沒有區別
			obj.sayName = function(){
				console.log("Hello 大家好 我是孫悟空~~~");
			};
			
			//console.log(obj.sayName);
			
			//當我們呼叫物件中的函式時，我們稱我們在呼叫物件的方法
			//obj.sayName();
			
			var obj2 = {
				
						name:"沙和尚",
						age:38,
						sayName:function(){
							console.log("我是老沙~~~");
						}
			}
			
			obj2.sayName();
			
		</script>
	</head>
	<body>
	</body>
</html>

2.變數作用域： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 作用域（Scope）
			 * 	- 作用域簡單來說就是指一個變數的作用的範圍
			 * 	- 在JS中作用域分成兩種：
			 * 		1.全域性作用域
			 * 		2.函式作用域
			 * 
			 * 	- 全域性作用域：
			 * 		1.所有直接在script標籤中編寫的程式碼都在全域性作用域中
			 * 		2.全域性作用域在開啟網頁時建立，在網頁關閉時銷燬
			 * 		3.全域性作用域中有一個全域性物件window，
			 * 			window代表的是瀏覽器的視窗，
			 * 			在全域性作用域中建立的變數都會作為window物件的屬性儲存
			 * 			在全域性作用域中建立的函式都會作為window物件的方法儲存
			 * 		4.在全域性作用域中建立的變數都是全域性變數，可以在頁面的任意位置訪問
			 */
			
			var a = 123;
			var b = 456;
			
			//console.log(window.b);
			//console.log(window.c);
			
			function fun(){
				console.log(b);
				console.log("我是全域性中的函式fun。。。。");
			}
			
			fun();
			
			//window.fun();
			
			//window.alert("hello");
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>


3.變數和函式的宣告提前： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			
			//如果不寫var，直接為變數賦值，則相當於為window物件新增屬性
			//window.a = 10;
			//a = 10;
			
			/*
			 * 變數的宣告提前
			 * 	- 使用var關鍵字宣告的變數，都會在所有的程式碼執行之前被宣告，但是不會賦值
			 * 		賦值會直到執行到賦值的程式碼時才執行
			 * 	- 如果不適用var關鍵字宣告變數，則不會有宣告提前的特性
			 * 
			 * 函式的宣告提前
			 * 	- 使用函式宣告建立的函式，會在所有的程式碼執行之前建立，
			 * 		所以我們可以在函式宣告前就去呼叫函式
			 * 	- 使用函式表示式建立的函式，沒有這個特性，所以不能在它建立之前呼叫
			 */
			//console.log("a = "+a);
			
			var a = 10;
			
			//fun();
			//console.log(fun2);
			
			//使用函式宣告來建立一個函式
			function fun(){
				console.log("我是fun函式。。。。");
			}
			
			//使用函式表示式建立一個函式
			var fun2 = function(){
				console.log("----->我是fun2.。。。");
			};
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

4.函式的作用域：

（一）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 函式作用域
			 * 	- 函式作用域可以理解為是全域性中的小的作用域
			 * 	- 函式作用域在函式呼叫時建立，在呼叫結束時銷燬
			 * 		每呼叫一次函式就會建立一個新的函式作用域
			 * 	- 在函式作用域中可以訪問到全域性變數,
			 * 		而在全域性中無法訪問到函式作用域中的變數
			 * 		在函式中建立的變數如果不寫var，則會變成全域性變數
			 * 	- 當我們在函式中使用一個變數時，它會先在自身的作用域中尋找，
			 * 		如果有就直接使用，如果沒有則去上一級作用域中尋找，
			 * 		找到則使用，沒找到則繼續尋找，直到找到全域性作用域為止
			 * 		如果全域性作用域中依然沒有，則報錯ReferenceError
			 *  - 在函式作用域中也適用變數和函式的宣告提前
			 * 	
			 */
			
			//建立一個全域性變數a
			var a = "全域性中的a";
			
			function fun(){
				//console.log(a);
				//window.b = ...
				var b = "---> 函式作用域中的b";
				
				//console.log(b);
			}
			
			//fun();
			
			//console.log(b);
			
			//建立全域性變數c
			//var c = "全域性c";
			
			/*function fun2(){
				
				//建立一個區域性變數c
				var c = "---> 函式中的c";
				
				console.log(c);
				
			}
			
			fun2();*/
			
			function fun3(){
				
				//var c = "fun3中的c";
				
				function fun4(){
					
					//var c = "fun4中的c";
					
					console.log(c);
				}
				
				//呼叫fun4
				fun4();
				
			}
			
			//fun3();
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>
（二） 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var a = "全域性a";
			
			function fun(){
				var a = "--> 函式a";
				
				//如果在函式作用域中想訪問全域性變數可以通過window物件來訪問
				console.log(window.a);
			}
			
			//fun();
			
			a = 20;
			
			/*
			 * 在函式內部使用var關鍵字宣告的變數也會被宣告提前，
			 * 	它的宣告會在所有的程式碼執行前執行
			 * 
			 * 在函式內部使用函式宣告建立的函式，也會在所有的程式碼執行之前被建立
			 */
			function fun2(){
				
				fun3();
				
				//console.log(a);
				
				//var a = 10;
				
				function fun3(){
					console.log("我是fun2內部的函式。。。");
				}
				
				
			}
			
			fun2();
			
		</script>
	</head>
	<body>
	</body>
</html>

練習： 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*var a = 10;
									
									function fun(){
										
										a = 5;
										
									}
									
									fun();
									
									console.log(a);*/

			var a = 123;

			/*
			 * 定義形參就相當於在函式中宣告瞭對應的變數
			 */
			
			
			/*function fun(a) {
				alert(a);
				a = 456;
			}

			fun(); //undefined

			alert(a); //123*/

			var a = 123;

			function fun(a) {
				alert(a);
				a = 456;
			}
			
			fun(123); //123
			
			alert(a); //123
		</script>
	</head>

	<body>
	</body>

</html>





相關文章