JS-02-JS變數與函式

阿新 • • 發佈：2021-08-02

JS-02-JS變數與函式

1.JS識別符號命名規則與規範

JS識別符號的命名規則和規範按java的方式就可以了。

識別符號命名規則：

由字母、數字、下劃線(_)、美元符號($)組成。
不能由數字開頭。
嚴格區分大小寫。
不可使用關鍵字命名。
理論上長度不限。

識別符號命名規範：

按照駝峰命名法：
- 類名和介面名首字母大寫，後面每一個單詞的首字母也大寫。
- 方法名和變數名首字母小寫，後面每一個單詞的首字母大寫。
常量所有字母都要大寫，且單詞與單詞之間用下劃線銜接。
命名要儘量用英語單詞寫，見名知意。

2.JS的變數

2.1怎麼宣告變數？

var 變數名;

2.2如何賦值？

變數名 = 值;

2.3JS變數可以隨意賦值

javascript是一種弱型別程式語言，沒有編譯階段，一個變數可以隨意賦值，賦什麼型別的值都可以。

var i = 10;
i = 3.14;
i = true;
i = 'a';
i = "abc";
i = new Object();

2.4變數預設值為undefined

在JS中，當一個變數沒有手動賦值的時候，系統預設賦值undefined

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>變數</title>
	</head>
	<body>
		<script type="text/javascript">
			var j;
			// undefined在JS中是一個具體存在的值
			alert("j =" + j);
		</script>
	</body>
</html>

2.5訪問沒有宣告的變數

如果一個變數沒有宣告就直接訪問，會報語法錯誤。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>變數</title>
	</head>
	<body>
		<script type="text/javascript">
			 var j;
			// 預設賦值undefined
			alert("j =" + j); 
			//訪問未宣告的變數k
			alert(k)
		</script>
	</body>
</html>

開啟頁面，點選F12，檢視控制檯，可見，當訪問未宣告的變數時會報錯：

k is not defined

2.6演示給同一個變數設定不同的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>變數</title>
	</head>
	<body>
		<script type="text/javascript">
			var a,b,c = 100;
			alert("a = " + a);
			alert("b = " + b);
			alert("c = " + c);
			
			a = false;
			alert(a);
			a = "abc";
			alert(a);
			a = 3.14;
			alert(a);
		</script>
	</body>
</html>

3.JS的函式

3.1JS函式有什麼用？

JS中的函式等同與java中的方法，函式也是一段可以被重複利用的程式碼片段。

函式一般可以完成某個特定功能。

3.2回顧java方法

格式：

[修飾符列表] 返回值型別 方法名(形式引數列表) {
    方法體;
}

例如：

public static boolean doSome(String name,int age) {
    ...
    return false;
}
public static void main(String[] args) {
    boolean isflag = doSome("張三",25);
}

3.3JS函式的定義和呼叫

3.3.1JS函式定義的語法格式

第一種：

function 函式名(形式引數列表) {
    函式體;
}

第二種：

函式名 = function(形式引數列表) {
    函式體;
}

JS中的函式不需要指定返回值型別，返回什麼型別都可以。

3.3.2定義JS函式並呼叫

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS函式</title>
	</head>
	<body>
		<script type="text/javascript">
			// 第一種方式
            //a和b都是區域性變數，都是形參
			function sum(a,b) {
				alert("a + b =" + (a + b));
			}
            //函式必須呼叫才會執行
            //呼叫sum函式
			sum(10,20);
            
			// 第二種方式
			show = function(name) {
				alert("Hello " + name);
			}
            //呼叫show函式
			show("Tom");
		</script>
	</body>
</html>

3.3.3將JS函式的呼叫放到事件控制代碼裡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS函式</title>
	</head>
	<body>
		<script type="text/javascript">
			// 第一種方式
			function sum(a,b) {
				alert("a + b =" + (a + b));
			}
			// 第二種方式
			show = function(name) {
				alert("Hello " + name);
			}
		</script>
		<!-- 將函式的呼叫放到事件控制代碼裡 -->
		<input type="button" value="10和20的和" onclick="sum(10,20)"/>
		<input type="button" value="Hello" onclick="show('Jerry')"/>
	</body>
</html>

3.4JS函式的靈活性

3.4.1JS函式在呼叫時，引數型別和個數沒有限制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS函式的靈活性</title>
	</head>
	<body>
		<script type="text/javascript">
			//呼叫函式時，引數不受限制
			function doSome(a,b) {
				return a + b;
			}
			//不傳引數
			var value1 = doSome();//NaN,(Not a Number)，表示不是一個數字。
			alert(value1);
			//傳一個字串引數
			var value2 =  doSome("abc + ");//abc + undefined
			alert(value2);
 			//傳一個數字引數
			var value3 = doSome(10);//NaN
			alert(value3);
			//傳兩個數字引數
			var value4 = doSome(10,20);//30
			alert(value4);
			//傳三個數字引數
			var value5 = doSome(10,20,40);//30
			alert(value5);
		</script>
	</body>
</html>

3.4.2在JS函式不能重名

如果兩個函式重名，那麼後面宣告的函式會將前面宣告的同名函式覆蓋。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在JS函式不能重名</title>
	</head>
	<body>
		<script type="text/javascript">
			//前面的函式
			function doOther(name) {
				alert(name);
			}
            //後面的重名函式
			function doOther() {
				alert("Hello Hello");
			}
            //呼叫函式
			doOther("zhangsan");
		</script>
	</body>
</html>

4.JS的全域性變數和區域性變數

4.1JS中全域性變數和區域性變數的概念

全域性變數：

在函式體外宣告的變數都屬於全域性變數。
全域性變數的生命週期是：
- 瀏覽器開啟時宣告。
- 瀏覽器關閉時銷燬。
儘量少用全域性變數，因為全域性變數一直會在瀏覽器的記憶體裡，耗費記憶體空間。
能用區域性變數儘量用區域性變數。

區域性變數：

在函式體中宣告的變數屬於區域性變數。包括函式的形參。
區域性變數的生命週期是：
- 函式開始執行時區域性變數的記憶體開闢。
- 函式執行結束後，區域性變數的記憶體空間釋放。
區域性變數的生命週期較短。

4.2全域性變數和區域性變數的訪問

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS的全域性變數和區域性變數</title>
    </head>
    <body>
        <script type="text/javascript">
            var a = 10;//全域性變數
            function fun1() {
                alert(a);//訪問全域性變數
            }
            fun1();

            var username = "張三";//全域性變數
            function fun2() {
                var username = "李四";//區域性變數
                alert(username)//就近原則，這裡訪問的是區域性變數
            }
            fun2();//函式執行結束後區域性變數的記憶體被釋放
            alert("username = " + username);//這裡呼叫的是全域性變數
        </script>
    </body>
</html>

4.3在函式外面能否訪問區域性變數

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的全域性變數和區域性變數</title>
	</head>
	<body>
		<script type="text/javascript">
			function fun3() {
				var num = 50;
				alert(num);
			}
			fun3();//在此處區域性變數已被釋放
			alert(num);//在此處訪問的是一個沒有被定義的變數，語法錯誤。num is not defined
		</script>
	</body>
</html>

4.4當宣告變數時不使用var關鍵字

當一個變數宣告時未使用var關鍵字，那麼無論這個變數在哪宣告的，都會宣告成全域性變數

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS的全域性變數和區域性變數</title>
    </head>
    <body>
        <script type="text/javascript">
            function fun4() {
                num2 = 50;
                alert(num2);
            }
            fun4();
            alert(num2);
        </script>
    </body>
</html>