2.1 函數的概念
你可能會定義非常多的相同代碼或者功能相似的代碼，這些代碼可能需要大量重復使用。雖然 for循環語句也能實現一些簡單的重復操作，但是比較具有局限性，此時我們就可以使用 JS 中的函數。
函數：就是封裝了一段可被重復調用執行的代碼塊。通過此代碼塊可以實現大量代碼的重復使用。
2.2 函數的使用
2.2.1 聲明函數
// 聲明函數
function 函數名() {
//函數體代碼
}
-
function 是聲明函數的關鍵字，必須小寫
-
由於函數一般是為了實現某個功能才定義的， 所以通常將函數名命名為動詞，比如 getSum
2.2.2 調用函數
// 調用函數
函數名(); // 通過調用函數名來執行函數體代碼
-
調用的時候千萬不要忘記添加小括號
-
口訣：函數不調用，自己不執行
注意：聲明函數本身並不會執行代碼，只有調用函數時才會執行函數體代碼。
2.2.3 函數的封裝
-
函數的封裝是把一個或者多個功能通過函數的方式封裝起來，對外只提供一個簡單的函數接口
-
簡單理解：封裝類似於將電腦配件整合組裝到機箱中 ( 類似快遞打包）
demo：封裝計算1-100累加和
/*
計算1-100之間值的函數
*/
// 聲明函數
function getSum(){
var sumNum = 0;// 准備一個變量，保存數字和
for (var i = 1; i <= 100; i++) {
sumNum += i;// 把每個數值 都累加 到變量中
}
alert(sumNum);
}
// 調用函數
getSum();
1.1 函數的定義方式
-
方式1 函數聲明方式 function 關鍵字 (命名函數)
function fn(){} -
方式2 函數表達式(匿名函數)
var fn = function(){} -
方式3 new Function()
var f = new Function('a', 'b', 'console.log(a + b)'); f(1, 2); var fn = new Function('參數1','參數2'..., '函數體') 注意 /*Function 里面參數都必須是字符串格式 第三種方式執行效率低，也不方便書寫，因此較少使用 所有函數都是 Function 的實例(對象) 函數也屬於對象 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 函數的定義方式
// 1. 自定義函數(命名函數)
function fn() {};
// 2. 函數表達式 (匿名函數)
var fun = function() {};
// 3. 利用 new Function('參數1','參數2', '函數體');
var f = new Function('a', 'b', 'console.log(a + b)');
f(1, 2);
// 4. 所有函數都是 Function 的實例(對象)
console.dir(f);
// 5. 函數也屬於對象
console.log(f instanceof Object);
</script>
</body>
</html>
1.2 函數的調用
/* 1. 普通函數 */
function fn() {
console.log('人生的巔峰');
}
fn();
/* 2. 對象的方法 */
var o = {
sayHi: function() {
console.log('人生的巔峰');
}
}
o.sayHi();
/* 3. 構造函數*/
function Star() {};
new Star();
/* 4. 綁定事件函數*/
btn.onclick = function() {}; // 點擊了按鈕就可以調用這個函數
/* 5. 定時器函數*/
setInterval(function() {}, 1000); 這個函數是定時器自動1秒鍾調用一次
/* 6. 立即執行函數(自調用函數)*/
(function() {
console.log('人生的巔峰');
})();