js （JavaScript）函數聲明的幾種形式及用法

1、函數聲明

語法：

function functionName(parameters) {
  執行的代碼
}

函數聲明后不會立即執行，只是在初始化的時候會將函數聲明提升，會在我們需要的時候調用到。

2、函數表達式（匿名函數）

語法：

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

以上函數實際上是一個 匿名函數 (函數沒有名稱)。

函數存儲在變量中，不需要函數名稱，通常通過變量名來調用。

3、Function() 構造函數

通過內置的 JavaScript 函數構造器（Function()）定義。

語法：

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

如果函數調用前使用了 new 關鍵字, 則是調用了構造函數。

這看起來就像創建了新的函數，但實際上 JavaScript 函數是重新創建的對象：

// 構造函數:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
 
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

構造函數的調用會創建一個新的對象。新對象會繼承構造函數的屬性和方法。

構造函數中 this 關鍵字沒有任何的值。 this 的值在函數調用實例化對象(new object)時創建。

 

實際上，你不必使用構造函數。上面實例可以寫成：

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

var x = myFunction(4, 3);

4、自調用函數

函數表達式可以 "自調用"。

自調用表達式會自動調用。

如果表達式后面緊跟 () ，則會自動調用。

不能自調用聲明的函數。

通過添加括號，來說明它是一個函數表達式：

(function () {
    var x = "Hello!!";      // 我將調用自己
})();

//為一個匿名自調用函數

5、箭頭函數

ES6 新增了箭頭函數。

箭頭函數表達式的語法比普通函數表達式更簡潔。

 

語法：

(參數1, 參數2, …, 參數N) => { 函數聲明 }

(參數1, 參數2, …, 參數N) => 表達式(單一)
// 相當於：(參數1, 參數2, …, 參數N) =>{ return 表達式; }

當只有一個參數時，圓括號是可選的：

(單一參數) => {函數聲明}
單一參數 => {函數聲明}

沒有參數的函數應該寫成一對圓括號:

() => {函數聲明}

例：

// ES5
var x = function(x, y) {
     return x * y;
}
 
// ES6
const x = (x, y) => x * y;

有的箭頭函數都沒有自己的 this。 不適合頂一個 對象的方法。

當我們使用箭頭函數的時候，箭頭函數會默認幫我們綁定外層 this 的值，所以在箭頭函數中 this 的值和外層的 this 是一樣的。

箭頭函數是不能提升的，所以需要在使用之前定義。

使用 const 比使用 var 更安全，因為函數表達式始終是一個常量。

如果函數部分只是一個語句，則可以省略 return 關鍵字和大括號 {}，這樣做是一個比較好的習慣:

 

 

6、使用函數注意點

（1）、函數提升

• 在之前的教程中我們已經了解了 "hoisting(提升)"。
• 提升（Hoisting）是 JavaScript 默認將當前作用域提升到前面去的的行為。
• 提升（Hoisting）應用在變量的聲明與函數的聲明。
• 因此，函數可以在聲明之前調用：

myFunction(5);

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

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

（2）、函數式對象

• 在 JavaScript 中使用 typeof 操作符判斷函數類型將返回 "function" 。
• 但是JavaScript 函數描述為一個對象更加准確。
• JavaScript 函數有 屬性 和 方法。
• arguments.length 屬性返回函數調用過程接收到的參數個數：

function myFunction(a, b) {    //2
    return arguments.length;
}

　　toString() 方法將函數作為一個字符串返回:

function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();     //function myFunction(a, b) { return a * b; }