JavaScript - 四種宣告函數的方法 - 筆記長也NotesHazuya

JavaScript - 四種宣告函數的方法

2018-04-11 23:07:34   JavaScript

JavaScript中的具名與匿名函數

介紹之前,先了解在JavaScript中函數分為匿名與具名函數,具名函數會在函數內部建立一個儲存自己函數名稱的變數,而這個變數在函數外是看不見的,而匿名函數則不會儲存自己的名稱。

這樣最大的差別就是在除錯的時候,當發生錯誤時具名函數會清楚顯示函數名稱,而匿名則只會顯示 anonymous 之類無法辨認的名稱。

//匿名函數
var fn=function(){
  //...
}
//具名函數
var fn=function fn(){
  //...
}

函數宣告

這是一般最常用的方法

function fun(){
 //內容
}

這種宣告方法的層級會被自動提升到最頂端,即便先呼叫函數再定義函數也沒問題

//合法的情況
fun();
function fun(){
 //...
}
//這樣也OK
fun();

函數運算式

顧名思義,這種宣告方式是宣告在運算式當中

//匿名函數運算式
var fe = function () {
  // 內容
};

//具名函數運算式
var fe = function fn () {
  // 內容
};

上面是宣告在變數中,也可以用在括號或者運算子中

(function fe2() {} );

!function fe3() {}

這裡要注意的是,與前面函數宣告不同,它只能在宣告後呼叫

//不合法
sum();
var sum=fuction(){
  //...
}
//合法的
sum();

函數關鍵字

這種方法是使用 Function 這個關鍵字來建立函數物件,使用時將參數與函數內容傳入Function,然後建立一個函數物件。

console.log(sum(1,2));  //不合法
var sum=new Function("a","b","return a+b");
console.log(sum(1,2));  //合法呼叫並輸出3

這種方法的函數也必須先宣告才能使用

其他-參數

我們上面的範例大多數參數都是空的,這樣函數如何接收參數呢?JavaScript呼叫函數會將參數存入一個名為arguments的物件(很像陣列),我們看一例子

function sum2(){
	var sum=0;
	for(var i =0;i<arguments.length;i++){
		sum+=arguments[i];
	}
	return sum;
}
console.log(sum2(1,2,3,4,5,6,7,8,9,10));

這樣會得到結果55,由此可以證明參數的確被存入該物件當中。

arguments 不是 Array 實例,它只是具有數字作為特性,特性參考至傳入的引數,並具有 length 特性代表傳入引數的個數。

 

另外還有一種情況,如果我們定義了參數,當呼叫函數時所傳入的引數比參數還多或少的時候,情況會如何? 我們直接看例子

function fn(i,j){
	return i+j;
}
console.log(fn(5,8,1,1)); //輸出13
console.log(fn(5)); //輸出Nan

當引數較多時,就會只取前兩個,而不足的時候則為undefined。

 

參考資料

http://www.codedata.com.tw/javascript/essential-javascript-9-function-abc/

https://blog.gtwang.org/programming/defining-javascript-functions/

關於作者


長也

資管菸酒生,嘗試成為網頁全端工程師(laravel / React),技能樹成長中,閒暇之餘就寫一些筆記。 喔對了,也愛追一些劇,例如火神跟遺物整理師,推推。最愛的樂團應該是告五人吧(?)