Javascript 建立 function 的幾種方法

其實 JS 要建立 function 方法還不少
有下面幾種：

用 function 宣告

// 一般函數
function foo(){
	console.log(this)
}

// 匿名函數
function(){
	console.log(this)
}

使用 Function function 來建立

初學者應該不太會見到 Function 這東西

我就是因為無聊去研究 chrome console 才找到的
在 ES5 以前，這是所有函數的 constructor

去 chorme console 輸入 (function(){}) instanceof Function 就會得到 true

// 將 Function 當作一般函數看待
Function("console.log(this)")

// 建立 Function Object
new Function("console.log(this)")

如果有 function 要有參數，則參數名稱放在最前端，如下

Function(
	"a"
	"b"
	"console.log(a, b)"
)

這等同於

function(a, b){
	console.log(a, b)
}

箭頭函數

ES5 以上，我最討厭的新功能之一，讓程式可讀性變差，而且和舊的 function 不能等視之

// 基本語法
() => {
	console.log(this)
}

括號函數還有很多進階用法，可參考MDN的說明。

不過這些進階用法，根本只是花俏，雖然撰寫時可以省力，但只是讓程式碼可讀性愈來愈低而已，事後維護根本是自找麻煩

而且箭頭函數我前面有說和舊的 function 不能等視之，可見下

var a = function(){console.log(this)}
var b = () => {console.log(this)}

下面的範例，變數 a 和 b 分別如上，執行結果均以 chrome console 為主

a.bind(Array)()	// 輸出 Array function
b.bind(Array)()	// 輸出 Window object

var foo = {
	a: a,
	b: b
}

foo.a()	// 輸出 foo object
foo.b()	// 輸出 Window object

var foo = new a	// 建立 a object 
var foo = new b	// 產生錯誤。錯誤訊息：“Uncaught TypeError: b is not a constructor”

console.log(a.prototype) // 輸出一個 Object，其 constructor 為 a
console.log(b.prototype)	// 輸出 undefinede

此外，在關鍵字上箭頭函數也不等同，箭頭函數無法使用 arguments 等關鍵字……

所以當初怎麼會有人設計這種函數啊？