JavaScript--函數

JavaScript函數

---

 

函數的定義：

　　在JavaScript中函數的定義共計有三種的方式

【1】函數的聲明語句

使用JavaScript的函數關鍵字，後跟一組參數以及函數體

function funcname([arg1 [,arg2 [...,argn]]]){
    statement;
}

• function：定義函數的關鍵字。
• funcname：定義函數的名稱。
• (arg)：函數的參數，能夠有多個參數，當有多個參數的時候使用 ，隔開。
• {...}：之間的代碼是函數體，能夠包含若干語句，甚至能夠沒有任何語句。

注意：

• 定義函數的時候參數列表的（）以及包含函數體的{ }是必須的，即便在定義函數的時候沒有參數。

function demo()//SyntaxError: Unexpected end of input
function demo(){};//不報錯
while(true);//不報錯

 

【2】函數表達式的定義，不太正規的將就是匿名的函數

var functionName = function([arg1 [,arg2 [...,argn]]]){
    statement;
} // 

var functionName = function funcName([arg1 [,arg2 [...,argn]]]){
    statement;
}

總結：

　　其中在第一種的狀況下在這種方式下，是一個匿名函數 function(){...}，它沒有函數名。可是，這個匿名函數賦值給了變量functionName，因此，經過變量functionName就能夠調用該函數。

【3】Function構造函數

Function構造函數接收任意數量的參數，但最後一個參數始終都被當作是函數體，而前面的參數則枚舉出了新函數的參數

var functionName = new Function(['arg1' [,'arg2' [...,'argn']]],'statement;');

注意：經過Function構造函數構造的也是一個匿名函數。經過該種方式沒有辦法指定函數名稱。

　　如下的兩種方式是同樣的。可是須要注意的是從技術上講，這是一個函數表達式。但，不推薦使用，由於這種語法會致使解析兩次代碼。第一次是解析常規javascript代碼，第二次解析傳入構造函數中的字符串，影響性能

<script type="text/javascript">
    var sum = Function('arg1','arg2','return arg1 + arg2;')
    demo = sum(1,2)
    alert(demo)
    // 等價於
    var sum = function(num1,num2){
        return num1 + num2
    }
    document.write(sum(1,3))

</script>

 

函數的返回值：

函數中的return語句用來返回函數調用後的返回值

return語句只能出如今函數體內，若是不是會報語法錯誤

<script type="text/javascript">
    return 2; //Uncaught SyntaxError: Illegal return statement
</script>

若是沒有return語句，則函數調用僅僅依次執行函數體內的每一條語句直到函數結束，最後返回調用程序。這種狀況下，調用表達式的結果是undefined

<script type="text/javascript">
    function demo(){
        document.write('函數的調用')
    };
    console.log(demo);
    // 返回的值返回的是整個函數的結構和函數體：
    // ƒ demo(){
    //     document.write('函數的調用')
    // }
    console.log(demo());//undefined
</script>

關於return語句咱們須要特別注意的地方：

JavaScript引擎有一個在行末自動添加分號的機制，這可能讓你栽到return語句的一個大坑：

正常的狀況下咱們會這樣寫

<script type="text/javascript">
    function foo(){
        var num = 1;
        var num1 = 2;
        return num + num1;
    };
    document.write(foo())// 3
</script>

函數中的return語句用來返回函數調用後的返回值，而且當執行到return的時候至關於函數執行結束，將不在執行下面的代碼。因此下面的代碼將返回undefined

<script type="text/javascript">
    function foo(){
        var num = 1;
        var num1 = 2;
        return // 因爲JavaScript的這種機制會在末尾的時候自動的爲咱們加上 ； 變成return;
        num + num1;
    };
    document.write(foo())// undefined
</script>

函數的調用：

一次的調用而後將參數傳入便可。

<script type="text/javascript">
    function demo(x){
        if(x>=0){
            return '這是一個正數';
        }else{
            return '這是一個負數';
        };
    };
    console.log(demo(5))//這是一個正數
    console.log(demo(-5))//這是一個負數
</script>

關於傳參數，這可真的是一個神奇的地方，就是你想怎麼傳就怎麼傳。

<script type="text/javascript">
    function demo(x){ // 在定義函數之初的時候有參數x
        if(x>=0){
            return '這是一個正數';
        }else{
            return '這是一個負數';
        };
    };
    console.log(demo()) // 當咱們不傳入參數的時候
    console.log(demo(-5)) //當咱們傳入參數的時候
    console.log(demo(-5,6,4,6,'xxx'))//上面函數中只有一個參數，咱們任意的傳入多個參數的時候
</script>
輸出：總結程序不會報錯，都會有返回值
-函數的參數.html:15 這是一個負數
-函數的參數.html:16 這是一個負數
-函數的參數.html:17 這是一個負數

總結：JavaScript容許傳入任意個參數而不影響調用，所以傳入的參數比定義的參數多也沒有問題，雖然函數內部並不須要這些參數，傳入的參數比定義的少也沒有問題。可是這樣的機制並非不表明咱們在定義參數的時候能夠不用定義參數

<script type="text/javascript">
    // function foo(){  // arguments.html:10 Uncaught ReferenceError: x is not defined
    function foo(x){  // arguments.html:10 Uncaught ReferenceError: y is not defined
    // function foo(x,y){ //程序不報錯
        return x + y;
    }
    console.log(foo(1,2));//3
    console.log(foo(1,2,3));//3
</script>

函數調用arguments

arguments只在函數內部起做用，而且永遠指向當前函數的調用者傳入的全部參數。類型相似數組Array,可是她不是一個Array。可是訪問單個參數的方式與訪問數組元素的方式相同

<script type="text/javascript">
    function foo(x) {
        console.log('x = ' + x); // 10
        for (var i=0; i<arguments.length; i++) {
            console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
        };
    };
    // foo();//x = undefined
    // foo(10);// 10
    foo(10,20);//
    // x = 10
    // arguments.html:11 arg 0 = 10
    // arguments.html:11 arg 1 = 20
    foo(10,11,12,13,14,15);
    //arg 0 = 10
    // arg 1 = 11
    // arg 2 = 12
    // arg 3 = 13
    // arg 4 = 14
    // arg 5 = 15
</script>