1. 程式人生 > >JavaScript基礎之函式定義與呼叫

JavaScript基礎之函式定義與呼叫

在JavaScript中,定義函式的方式如下:

function abs(x){
   if(x>0){
       return x;
   }else{
       return -x;
   }
}

上述abs()函式的定義如下:
1.function:指出這是一個函式定義;
2.abs:是函式的名稱;
3.(x):括號內列出函式的引數,多個引數以,分割;
4.{…}之間的程式碼是函式體,可以包含若干語句,甚至可以沒有任何語句。

由於JavaScript的函式也是一個物件,上述定義的abs()函式實際上是一個函式物件,而函式名abs可以視為指向該函式的變數。
因此,第二種定義函式的方式如下:

var abs=function(x){
  if(x>0){
    return x;
  }else {
    return -x;
  }
};

在這種方式下,function(x){…}是一個匿名函式,它沒有函式名。但是,這個匿名函式賦值給了變數abs,所以,通過變數abs就可以呼叫該函式。

呼叫函式

呼叫函式時,按順序傳入引數即可。
由於JavaScript允許傳入任意個引數而不影響呼叫,因此參入的引數比定義的引數多也沒問題,雖然函式內部並不需要這些引數。
傳入的引數比定義的少也沒問題:

abs();//返回NaN

此時abs(x)函式的引數x將收到undefined,計算結果為NaN。
要避免收到undefined,可以對引數進行檢查:

function abs(x){
    if(typeof x!=='number'){
            throw'Not a number';
    }
    if(x>0){
         return x;
    }
    else{
          return -x;
    }
}

arguments

JavaScript還有一個免費贈送的關鍵字arguments,它只在函式內部起作用,並且永遠指向當前函式的呼叫者傳入的所有引數。

function foo(x){
  alert(x);//10
  for(var i=0;i<arguments
.length;i++){ alert(arguments[i]);//10,20,30 } } foo(10,20,30);

利用argument,你可以獲得呼叫者傳入的所有引數。也就是說,即使函式不定義任何引數,還是可以拿到引數的值:

function abs(){
   if(arguments.length===0){
     return 0;
   }
   var x=arguments[0];
   return x>0?x:-x;
}

abs();//0
abs(10);//10
abs(-9);//9

實際上arguments最常用於判斷傳入引數的個數。你可能會看到這樣的寫法:

function foo(a,b,c){
    if(arguments.length===2){
       c=b;
       b=null;
    }
}

要把中間的引數b變為“可選”引數,就只能通過arguments判斷,然後重新調整引數並賦值。

rest引數

由於JavaScript函式允許接收任意個引數,於是我們就不得不用arguments來獲取所有引數:

function abs(a,b){
var i,rest=[];
if(arguments.length>2){
  for(i=2;i<arguments.length;i++){
   rest.push(arguments[i]);
  }
}
console.log('a='+a);
console.log('b='+b);
console.log(rest);
}

為了獲取除了已定義引數a,b之外的引數,我們不得不用arguments,並且迴圈要從索引2開始以便排除前兩個引數,這種寫法很彆扭,所以,上述函式可以寫成:

function foo(a,b,...rest){
console.log('a='+a);
console.log('b='+b);
console.log(rest);
}

foo(1,2,3,4,5);
//a=1
//b=2
//Array[3,4,5]

foo(1);
//a=1
//b=undefined
//Array[]

rest引數只能寫在最後,前面用…標識,從執行結果可知,傳入的引數先繫結a、b,多餘的引數以陣列形式交給變數rest,所以,不再需要arguments我們就獲取了全部引數。
如果傳入的引數連正常定義的引數都沒有填滿,也不要緊,rest引數會接收一個空陣列(注意不是undefined)。

注意:JavaScript引擎有一個行末自動新增分號的機制,例如:

function foo(){
return{name:'foo'};
}

foo();//{name:'foo'}

如果把return語句拆成兩行:

function foo(){
 return
   {name:'foo'};
}

foo();//undefined