JavaScript 函數定義

定義函數

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

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

上述abs()函數的定義如下:

一個函數定義;abs是函數的名稱;(x)括號內列出函數的參數,多個參數以,分隔;{ ... }之間的程式碼是函數體,可以包含若干語句,甚至可以沒有任何語句。

請注意,函數體內部的語句在執行時,一旦執行到return時,函數就執行完畢,並將結果傳回。因此,函數內部透過條件判斷和循環可以實現非常複雜的邏輯。

如果沒有return語句,函數執行完畢後也會回傳結果,只是結果為undefined。

由於JavaScript的函數也是一個對象,上述定義的abs()函數實際上是一個函數對象,而函數名稱abs可以視為指向該函數的變數。

因此,第二個定義函數的方式如下:

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


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

上述兩種定義完全等價,注意第二種方式按照完整語法需要在函數體末尾加一個;,表示賦值語句結束。

函數是JavaScript 語言的核心之一,其基本語法如下:

function functionName(arg0, arg1, ...) {

   statements
}

語法解讀

#使用function 關鍵字定義一個函數

function 關鍵字空格之後緊接函數名稱

函數名字後面是一對小括弧,arg0, arg1 表示函數的參數,參數之間以, 號分隔,參數個數可以為0-25 個(0即表示無參數)。在沒有參數時,() 括號不可省略,超過25個的參數,將被JavaScript忽略

{} 是函數體,裡面是函數要實現的函數語句

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <script type="text/javascript">  
          function hello(name){
          document.write((name + ",你好!"));
        }
    </script>  
</head>  
<body>  
  <input type="button" onclick="hello('小明')" value="确定"/>
</body>  
</html>

#函數表達式

JavaScript 函數可以透過一個表達式定義。

函數表達式可以儲存在變數中:

var x = function (a, b) {return a * b};

#在函數表達式儲存在變數後,變數也可作為一個函數使用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(6, 9);
</script>
</body>
</html>


函數提升(Hoisting)

在先前的教學中我們已經了解了"hoisting(提升)"。

提升(Hoisting)是 JavaScript 預設將目前作用域提升到前面去的行為。

提升(Hoisting)應用在變數的宣告與函數的宣告。

因此,函數可以在宣告之前呼叫:

myFunction(5);

function myFunction(y) {
    return y * y;
}

使用表達式定義函數時無法提升。


arguments

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <script type="text/javascript">  
       function foo(x) {
            alert(x); // 10
            for (var i=0; i<arguments.length; i++) {
            alert(arguments[i]); // 10, 20, 30
            }
          }
        foo(10, 20, 30);
    </script>  
</head>  
<body>  
</body>  
</html>


函數是物件

在 JavaScript 中使用 typeof 運算子判斷函數型別會傳回 "function" 。

但是JavaScript 函數描述為一個物件更準確。

JavaScript 函數有 屬性 和 方法。

arguments.length 屬性傳回函數呼叫過程接收到的參數個數:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4,7,3);
</script>
</body>
</html>


#
繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function hello(name,age){ document.write("我叫" + name + ",今年" + age + "岁!"); } </script> </head> <body> <input type="button" onclick="hello('小明',18)" value="确定" /> </body> </html>