JavaScript中的函數我的分享

函數

函數的概述

• 所謂函數就是隻被定義一次,但可能被執行或調用屢次
• 變量與函數的區別: 變量存的是數據內容而函數存的是語句塊

定義函數

• 備註:

1. 定義函數時 - 函數體的內容不會被執行
2. 調用函數時 - 函數體才被執行

• 注意: 通常以個函數就去完成一個功能

1.函數聲明方式:

• 語法: function 函數名稱 () {
  函數體 - 語句塊 }
• 注意: 定義函數時 - 函數體的內容是不會被執行的

示例代碼:

function fu(){
     console.log('一花一世界')
     }

2.字面量/直接量方式:

• 語法: var 函數名稱 = function(){
  函數體 }

示例代碼:

var fun = function(){
    console.log('這是一個函數');
};

// 調用函數 -> 函數體的內容才被執行
fun();

• 注意: 控制檯調用函數的語法是函數名加( )而不是console.log( )

示例代碼:

/* 調用函數 */
fu()

---

變量與函數

var v = 100;/* 定義變量，並初始化值 */
console.log(v);/* 調用變量 */

// 變量是容許被從新賦值的
v = function(){
    console.log('這是一個函數');
}
// v既是個變量，又是個函數
console.log(v);// 調用結果爲 [Function: v]
v();/* 函數的調用 */

控制檯效果圖:

• 注意: 一旦有同名的變量時下面的函數則不生效

示例代碼:

var v2 = 200;
function v2(){
    console.log('這是一個函數');
}
// v2是變量 - TypeError: v2 is not a function - 表示 v2 不是一個函數
console.log(v2);
v2();

控制檯效果圖:

---

函數的參數

• 函數參數分類兩種:

1. 形參 : 就是定義函數後的小括號叫形參 - function fun(形參)

   • 注意: 容許定義多個形參 - 形參之間使用逗號分隔

2. 實參 : 就是調用函數後的小括號叫實參 - fun(實參)

   • 注意: 形參的個數與實參不必定是一致的
   • 參的個數多於實參的個數 -> 多餘的形參沒有值(默認爲 undefined)
   • 實參的個數多餘形參的個數 -> 多餘的實參沒有對應的形參
   • 形參與實參根據佔位符進行一一對應

示例代碼:

function fun(a){// 在函數中定義一個變量，但未初始化值
    console.log(a);
}
fun(100, 200);// 爲函數中定義的變量初始化值

---

return語句

• 函數的return語句

  • 注意:
  • 並非必要的 - 無關緊要
  • 做用 - 做爲函數的返回值(數據內容)
  • 用法 - 通常會被編寫在函數體的最後面

示例代碼:

function fun(){
    console.log('一花一世界');
    return 100;
}
/* 將函數的返回值 賦值到變量中 */
 var result = fun();
 console.log(result);

console.log(fun());/* 打印函數調用的結果 */
console.log(fun);/* 打印變量的值 */

• 函數的return語句

  • 注意:
  • 的確容許不編寫在函數體的最後面
  • 一旦return語句不在函數體的最後面 - return語句以後的代碼都再也不執行

示例代碼:

function fn(){
    console.log('這是return語句以前...');
    return;
    console.log('這是return語句以後...');
}
var result = fn();
console.log(result);// 100

---

目前JavaScript獲得undefined值的狀況總結：

1. 定義變量，但未初始化值
2. 定義變量，並初始化值爲 undefined
3. 訪問數組中不存在的位置 - 默認值爲 undefined
4. 在函數體調用沒有定義值的形參 - 默認值爲 undefined
5. 當函數定義時，沒有指定返回值 - 默認返回值爲 undefined

---

做用域

• 就是變量和函數都有做用域,做用域就是變量和函數的可被訪問範圍,控制着變量和函數的可見性和生命週期- 函數做用域就是某一個函數裏的
• 函數之外的叫全局做用域
• 備註: 函數做用域中的變量叫局部變量

---

全局做用域與局部做用域

全局做用域

• 全局做用域(函數做用域以外的範圍) - 全局變量

  • 全局變量的做用域 - 全局做用域 + 函數做用域
• 注意: 全局做用域不能訪問局部變量

全局做用域與局部做用域示例代碼對比:

var v1 = 100;
console.log(v1);

function fun(){
    /*
        函數做用域 - 局部變量
        * 局部變量的做用域 - 當前函數做用域
     */
    var v2 = 200;

    console.log(v1);
    console.log(v2);
}

console.log(v1);

fun();
// 全局做用域不能訪問局部變量
// console.log(v2);

function fn(){
    console.log(v2);
}
fn();

---

局部做用域與函數的參數

• 局部變量 - 做用於當前函數做用域中

  • 局部變量的值 - 只能在當前函數做用域進行初始化

• 函數的參數 - 做用於當前函數體中

  • 參數的值(實參) - 在全局做用域中傳遞的

示例代碼:

var num = 200;

function fun(a){
    var v = 100;

    console.log(v + a);
}
fun(num);

控制檯調用圖:

---

按值傳遞

• 是指將函數實參的變量值賦值給函數形參，使實參和輸出結果同樣
• 在對局部變量進行修改時，不會修改全局變量

示例代碼:

/* 按值傳遞 */
var num = 100;/* 定義一個全局變量 */
/* 定義一個函數 */
function fun(num){/* 形參 */
    num++;
    console.log('這是函數內部的值: ' + num);// 101
}
/* 調用指定函數 - 實參傳遞的是全局變量的值 */
fun(num);/* 實參 */
/* 調用指定全局變量 */
console.log('這是全局做用域的值: ' + num);// 100 101


var v = 200;
function fn(){
    v++;
}
fn();
console.log(v);// 201

---

聲明提早

• 表示在使用變量時，先調用變量，在對變量進行定義

  • 注意: 語法不會報錯，會顯示 undefined

示例代碼:

console.log(num);// undefined

var num = 100;/* 定義全局變量 */
/* 定義函數 */
function fun(){
    // 全局變量與局部變量同名時 - 在當前函數做用域中只能訪問局部變量
    console.log(num);// undefined

    var num = 200;/* 定義局部變量 */
    // 就近原則
    console.log(num);// 200
}
/* 調用函數 */
fun();
// 局部變量在全局做用域中沒法訪問 - 只能訪問全局變量
console.log(num);// 100

控制檯調用圖: