【JS從入門到精通】06-函式

阿新 • • 發佈：2021-07-28

函式

筆記來源：尚矽谷最新版JavaScript基礎全套教程完整版(140集實戰教學,JS從入門到精通)_嗶哩嗶哩_bilibili

函式

函式

1、函式的簡介

函式也是一個物件，可以封裝一些功能（程式碼），在需要時可以執行這些功能（程式碼），可以儲存一些程式碼在需要的時候呼叫

使用typeof檢查一個函式物件時，會返回function

// 建立一個函式物件
// 可以將要封裝的程式碼以字串的形式傳遞給建構函式
var fun = new Function("console.log('Hello World.');");
// 封裝到函式中的程式碼不會立即執行
// 函式中的程式碼會在函式呼叫的時候執行
// 呼叫函式語法：函式物件（）
// 當呼叫函式時，函式中封裝的程式碼會按照順序執行
fun(); // Hello World.

使用函式宣告來建立一個函式

function 函式名([形參1, 形參2...形參N]) {
	語句...
}
// 呼叫函式
函式名();

示例

function fun1(){
    console.log("Hello world.");
    alert("Hello World!");
    document.write("Helloworld");
}
fun1();

使用函式表示式（匿名函式）來建立一個函式

var 函式名 = function([形參1, 形參2...形參N]) {
	語句...
};
// 呼叫函式
函式名();

示例

var fun1 = function(){
    console.log("Hello world.");
    alert("Hello World!");
    document.write("Helloworld");
};
fun1();

2、函式的引數

定義一個用來求兩個數和的函式

可以在函式的()中來指定一個或多個形參（形式引數）多個形參之間使用,隔開，宣告形參就相當於在函式內部聲明瞭對應的變數

在呼叫函式時，可以在()中指定實參（實際引數）

呼叫函式時解析器不會檢查實參的型別。所以要注意，是否有可能會接收到非法的引數，如果有可能則需要對引數進行型別的檢查
呼叫函式時，解析器也不會檢查實參的數量，多餘實參不會被賦值。如果實參的數量少於形參的數量，則沒有對應實參的形參將是undefined

// 建立一個函式，用來計算三個數的和
function sum(a, b, c) {
    alert(a + b + c);
}
sum(1, 2, 3, 4); // 6

3、函式的返回值

可以使用return來設定函式的返回值語法：return 值

return後的值將會作為函式的執行結果返回，可以定義一個變數，來接收該結果

在函式中return後的語句都不會執行

如果return語句後不跟任何值，就相當於返回一個undefined；如果函式中不寫return，則也會返回undefined

return後可以跟任意型別的值

// 建立一個函式，用來計算三個數的和
function sum(a, b, c) {
    // var result = a + b + c;
    // return result;
    return a + b + c;
}

// 呼叫函式
// 變數result的值就是函式的執行結果
// 函式返回什麼result的值就是什麼
var result = sum(1, 2, 3);
console.log("result = " + result);

練習

// 1、定義一個函式，判斷一個數字是否是偶數，如果是返回true，否則返回false
function isEven(num){
    // if(num % 2 == 0){
    //    return true;
    // }
    // return false;
    return num % 2 == 0;
}

var result = isEven(6);
console.log(result); // true
result = isEven(7);
console.log(result); // false

// 2、定義一個函式，可以根據半徑計算一個圓的面積，並返回計算結果
function calCirc(radius) {
    return 3.14 * Math.square(radius);
}

var result = calCirc(2); //

實參可以是任意的資料型別，也可以是一個物件。當我們的引數過多時，可以將引數封裝到一個物件

function sayHello(o){
    console.log("我是" + o.name
                + "，今年我" + o.age 
                + "歲了，我是一個" + o.gender 
                + "人，我住在" + o.address);
}			
var obj = {
    name: "孫悟空",
    age: 1000,
    gender: "男",
    address: "花果山"
};
sayHello(obj); // 我是孫悟空，今年我1000歲了，我是一個男人，我住在花果山

實參可以是一個物件，也可以是一個函式

function calCirc(radius) {
    return Math.PI * Math.pow(radius, 2);
}
function fun(a){
    console.log("a = " + a);
}
fun(calCirc);  
// a = function calCirc(radius) {
//     return Math.PI * Math.pow(radius, 2);
// }
fun(calCirc(10)); // a = 314.1592653589793

calCirc(10)

呼叫函式
相當於使用的函式的返回值

calCirc

函式物件
相當於直接使用函式物件

函式也是一個物件，特殊在其具有功能

break、continue、return對比

break可以退出當前的迴圈
continue用於跳過當次迴圈
return可以結束整個函式

在函式內部再宣告一個函式

function fun3(){
    function fun4(){
        console.log("I'm fun4.");
    }
    fun4();
}
fun3(); // I'm fun4.

function fun5(){
    function fun6(){
        console.log("I'm fun6.");
    }
    return fun6;
}
var a = fun5(); 
a(); // I'm fun6.
fun5()();  // I'm fun6.

4、立即執行函式

函式定義完，立即被呼叫，這種函式叫做立即執行函式

立即執行函式往往只會執行一次

// 函式物件()
(function(){
    console.log("I'm anoymous function.");
})(); // I'm anoymous function.
(function(a, b){
    console.log(a + b);
})(2,3); // 5