JavaScript的函數解析（一）

JavaScript的函數

今天和大家說一下js中一個比較重要的內容，函數。

• JavaScript 函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。
• JavaScript 函數是被設計爲執行特定任務的代碼塊。
• JavaScript 函數會在某代碼調用它時被執行。
• JavaScript 函數由 function 聲明。
• JavaScript 函數聲明後需要被調用纔會執行。

1.無參函數

    // 聲明函數
    function func1(){
        console.log("這是一個無參函數");
    }
    // 調用函數   方法名+()
    func1();
    // 被事件驅動
    document.getElementById("btn").onclick=func1;

注意：函數聲明後，被調用才能執行，一種是直接調用，另一種是被事件驅動。

2.傳參函數

    // 聲明函數
    function func2(x){//相當於聲明變量爲x
        console.log(x);
    }
    // 調用函數
    func2(1);//給變量x賦值爲 1
    func2("hello");//給變量x賦值爲 "hello"
    func2([1,2,3,4,5]);//給變量x賦值爲 [1,2,3,4,5]

    function func3(x,y){
        console.log(x%y);//數據類型的強制轉換
    }
    func3("1","2");

注意：在調用函數時，可以向其傳遞值，這些值被稱爲參數。這些參數可以在函數中使用。可以發送任意多的參數，由逗號 (,) 分隔。

上面的內容將js函數按照有無參數進行分類，會分爲無參函數和傳參函數。接下來，我們可以按照js是否命名分爲明明函數和匿名函數。

3.命名函數

    // function 關鍵字聲明函數
    // 1.命名函數    
    function func1(){
        // 執行代碼
        console.log("命名函數");
    }
    // 命名函數可以多次重複調用
    func1();
    func1();
    func1();

4.匿名函數

    // 2.匿名函數   
    // 使用事件驅動 匿名函數
    window.onclick=function(){
        // 執行代碼
        console.log("匿名函數");
    }

    // 3.使用變量儲存匿名函數
    var func2=function(){
        // 執行代碼
        console.log("變量儲存匿名函數");
    }
    // 這時可以像調用命名函數一樣調用
    func2();
    func2();
    
    // 4.匿名函數傳參
    var func3=function(x,y,z){
        console.log(x+y+z);
    }
    func3();//NaN   數字類型   not a number  
    console.log(typeof NaN);
    func3(1,2,3);//6
    func3("1",2,3);//123    "1"+2+3 

注意：匿名函數傳參，只有當匿名函數使用變量儲存時纔可以傳參。

5.自執行函數

    // 4.自執行函數   匿名函數
    (function(){
        // 執行代碼
        consloe.log("自執行函數1");
    }())
    // 另一種形式
    (function(){
        // 執行代碼
        consloe.log("自執行函數1");
    })()

自執行函數也是你匿名函數，只是函數在創建的同時就已經執行了。同時要知道，在 function 前面包着的()代表制操作符，只有有了操作符，瀏覽器在解析時纔不會報錯。

6.帶返回值的參數

• 有時，我們會希望函數將值返回調用它的地方。
• 通過使用 return 語句就可以實現。
• 在使用 return 語句時，函數會停止執行，並返回指定的值。

    function func1(x,y){
        return x+y
    }
    var res=func1(1,2);
    console.log(res);//3


    function func2(){
        var m=10;
        return m;
    }
    console.log(func2());//10

    // return會使函數停止執行
    function func3(){
        console.log(1);
        return;
        console.log(2);//本行代碼不執行
    }
    func3();//1