JavaScript中的函數
- 2020 年 7 月 2 日
- 筆記
- javascript
JavaScript中的函數
函數的定義： 函數就是JavaScript的基礎模組單元，包含一組語句，用於程式碼的復用，資訊隱藏 和 組合調用。 簡單點說：函數就是把任意的一段程式碼放在一個盒子裡面，在我想要執行這段程式碼的時候，直接執行這個盒子裡面的程式碼就行來
函數的創建和結構
1.函數的創建
在JavaScript語言中，可以通過一下三種方式創建：
-
函數聲明
//函數聲明式創建函數
function f1() {
//需要編寫的程式碼
}
// function: 聲明函數的關鍵字，表示接下來是一個函數了
// f1: 函數的名字，我們自己定義的（遵循變數名的命名規則和命名規範）
// (): 必須寫，是用來放參數的位置（一會我們再聊）
// {}: 就是我們用來放一段程式碼的位置（也就是我們剛才說的 「盒子」）
-
字面量方式創建（賦值式）
var f2 = function() {
//需要編寫的程式碼
}
-
使用Function構造函數創建（不推薦）
var f3 = new Function('參數1','參數2',
2.函數的調用
函數的調用實際上就是讓函數執行（使用函數裡面的程式碼）
函數調用 就是直接 寫 函數名() 就可以了
f1();
f2();
f3();
˙注意： 定義一個函數以後，如果函數沒有調用，那麼寫在函數{}裡面的程式碼將沒有任何意義。
3.函數的結構
函數的一般表現形式為：
//函數聲明
function fn(參數[行參]){
//函數體
}
fn(參數[實參])
函數包括一下4個部分：
-
保留字：function
-
函數名字：fn
-
參數：圓括弧以及圓括弧裡面的參數
-
函數體：花括弧以及花括弧裡面的語句
4.匿名函數
當聲明一個函數，沒有函數名的時候，那麼這個函數就稱之為匿名函數
function() {
//編寫的程式碼
}
聲明式創建函數 和 賦值式創建函數的區別： 雖然兩種定義方式的調用方法都是一樣的，但是還是會村子啊一些區別的
-
聲明式函數：調用可以在 定義之前 或者 定義之後調用
//可以調用
fn();
//聲明式函數
function fn(){
console.log('我是婧婧')
}
//也可以調用
fn()
-
字面量賦值式函數：調用只能 在定義函數的後面
//不可以調用（會報錯）
fn();
//賦值式函數
var fn = function(){
console.log('我是婧婧')；
}
//可以調用
fn();
函數的參數
-
我們定義函數 和 調用函數都出現了 圓括弧()
-
思考圓括弧()的作用？
-
圓括弧就是我我們用來存放參數的位置
-
參數又 分為： 行參 和 實參
//聲明函數
function fn(行參寫在這裡){
}
fn(實參寫在這裡))
1.行參 和 實參 的作用
-
行參
-
就是在函數內部可以使用的變數，在函數外部不可以使用
-
沒定一個行參，就相當於在函數內部定義一個可以使用的變數
-
參數 與 參數之間 用 逗號 分隔
function fn(a,b,c){
//相當於在函數內部定義了a b c 三個變數，我們可以直接在函數內部使用這個三個變數
consoloe.log( a + b +c)
}-
如果只有行參，沒有實參的話，那麼在函數內部使用這個變數式沒有值的，會得到一個
undefined -
行參 的值 由 函數調用的時候的實參 來決定的
-
-
實參
-
在函數調用的時候給 行參 賦值
-
也就是在調用函數的時候給一個具體的內容
function fn(a,b,c){
// 相當於在函數內部定義了a b c 三個變數，我們可以直接在函數內部使用這個三個變數
consoloe.log( a + b +c)
}
fn(1,2,3)
//這裡的行參為： a,b,c
//這裡的實參為： 1，2，3
-
當函數由多個參數的時候，行參 和 實參 式一一對應的
-
2. 參數個數的關係
函數調用時，會完成實際參數 對 形式參數的複製工作。 當實際參數的個數 和 形式參數 的 個數不匹配的時候 會導致運算錯誤
-
行參 比 實參 少
-
因為參數式按照順序一一對應
-
行參 比 實參 少的時候，那麼行參 就拿不到多餘的 實參
function fn(a,b){
//函數內部可以使用a 和 b
}
//調用函數
fn(1,2,3)
//本次調用傳遞了 三個 實參： 1 ， 2 ，3
//1 對應的行參 為a,2對應的行參 為b，那麼 3 沒有跟它對應的行參，也就是函數內部沒有辦法已通過變數來使用3這個值
-
-
行參 比 實參 多
-
因為參數式按照順序一一對應
-
所以多出來的行參就是沒有值的，就是
undefined
function fn(num1, num2, num3) {
// 函數內部可以使用 num1 num2 和 num3
}
// 本次調用的時候，傳遞了兩個實參，100 和 200
// 就分別對應了 num1 和 num2
// 而 num3 沒有實參和其對應，那麼 num3 的值就是 undefined
fn(100, 200) -
-
函數的參數（arguments）
在函數的內部，我們總是可以獲得一個免費配送的arguments參數。 arguments用於接收函數調用時傳入的實際參數，它被設計成一個類似數組的結構，擁有length屬性，但是它不是一個真正的數組，所以不能使用數組對應的的方法。 arguments參數的存在，使得我們可以隨身一些無需指定行參個數的函數
function sum(){
var sum = 0;
var count = arguments.length;
for(var i = 0;i < coung; i++){
sum += arguments[i];
}
console.log(sum);
}
<script>
/*
在函數的內部有一個數據是可以不用定義就能使用的，那麼這個數據就是arguments
arguments 表示函數所有實參的集合（偽數組，像數組的集合，但是並不是數組）
arguments有一個屬性 length，表示的是函數 實參的個數
每個實參在這個集合中都會有一個特定下標（索引），想要從這個集合中獲取實參，必須通過實參對應的索引來獲取，集合的索引是從0開始
arguments[索引n] === 得到這個索引n對應的的數據
*/
function sum() {
// console.log(arguments[5]);
// 從arguments集合中把每一個實參拿出來進行相加
var sum = 0;
// 通過for循環取出arguments結合中數據（函數的實參）
for (var i = 0; i < arguments.length; i++) {
// console.log(arguments[i]);
// 把每一個實參相加
sum += arguments[i]
}
console.log(sum);
}
sum(1, 2, 3)
</script>
函數的返回值（return）
-
函數體中 return語句 給函數一個返回值 或者 終止函數的執行。
-
當return 語句被執行時，函數立即返回而不在執行 剩餘的程式碼。
// 終止函數的執行
function fn() {
console.log(1)
console.log(2)
console.log(3)
// 寫了 return 以後，後面的 4 和 5 就不會繼續執行了
return
console.log(4)
console.log(5)
}
// 函數調用
fn()
-
return語句後面 跟上你要返回的數據（可以式一個表達式，可以式任意的數據類型）
function fn() {
// 執行程式碼
return 100
}
// 此時，fn() 這個表達式執行完畢之後就有結果出現了
console.log(fn()) // 100
-
函數總是有一個返回值，如果函數體中沒有return語句或者return 後面為空，那麼函數將總式返回 undefined
function fn() {
// 執行程式碼
}
// fn() 也是一個表達式，這個表達式就沒有結果出現
console.log(fn()) // undefined
函數的優點
函數就是對一段程式碼的封裝，在我們想要使用這段程式碼的時候調用
【1】封裝程式碼，是程式碼更加簡潔
【2】復用性更強，在實現重複功能的時候，只要直接調用封裝好的嗲嗎即可
【3】程式碼執行時機，隨時可以在我們想啊喲執行的時候去執行
