追求JS小姊姊系列 Day12 -- 還是沒躲掉，方函式登場

tags: 2021鐵人賽

前情提要

這次沒有前情提要

我：.............
方函式：醒了嗎？

我：什麼情況？...你怎麼會在這？
方函式：你可能躲得掉鄭列、阿物件，但卻不知道你還處於我的領域內。
我：？..
方函式：可以聽聽我的故事嗎？身為頭等工具人的故事。

頭等工具人的證明

方函式：之所以號稱頭等，是因為阿物件做得到的事，我基本都做得到。
我：為何是物件
方函式：因為我們三個其實都是同族人，先簡單知道一下

x = [];
y = {};
z = function(){};
typeof x // object
typeof y // object
typeof z // function

方函式：雖然會有一個看似不合理地方，但我能證明種族相同這件事。

阿物件做得到？那我也做得到：

1. 可藉由實字建立：{}
2. 可以被指派給變數、陣列、或作為其他物件屬性，來看實例：

1. 作為值指派給變數

//obj
let x = {};

//funC
let x = function(){};

2. 作為值指派給陣列

//obj
y.push({});

//funC
y.push(function(){});

3. 作為別的物件屬性

//obj
z.data = {};

//funC
z.datat = function(){};

4. 作為引數傳給函式

function cool(inputObj){
    
}
//obj
cool({});

//funC
cool(function(){});

5. 作為函式回傳值

//obj
function cool(){
    //obj
    return {};   

    //funC
    return function(){};
}
cool();

方函式：這些我是不是全都做得到，但我還不只這些能力。
我：好...好喔。

頭等工具人的自白

方函式：雖然可能跟鄭列、阿物件不太一樣，但我的特殊能力是：型態
1. 函式宣告
2. 函式表達式
3. 箭頭函式
4. 函式建構
5. 生成器

每個型態大多有專屬的能力，我們就先來看看最基本的型態：

1. 函式宣告

下圖是函式宣告的基本構造：

簡單的介紹一下上圖的內容：

1. 函式宣告開頭一定要有function 關鍵字
2. 函式宣告一定要有名稱（否則日後不能呼叫）
3. 函式主體:{}，可包含多個statements

function outer(){
    function inner(){};
};

注意：函式宣告內還能宣告函式喔！

2. 函式表達式

如同我們前面所提到的，表達式函式同樣可由實值{}建立後，接著可以被指派給變數、陣列、或作為其他物件屬性等。

//1.實字建立後，傳入變數
function cool(){};
let y = cool;

//2.直接裝入變數
let x = function(){};

函式執行方式： 把變數視為宣告名稱直接使用，以上圖為例：y();

宣告式跟表達式差在哪？

1. 函式宣告一定要有名稱，表達式則不一定。
2. 函式宣告式能在讀取前被呼叫，表達式則不能（背後原理之後會講到）

//1.宣告
before();
function before(){
    return 1;
}
//get 1

//2.表達式
x();
let x = function before(){};

//get error

2. 閉包的使用（這部分之後再講）
3. 立即呼叫函式表達式(IIFE)

方函式：剛剛提過函式可作為引數被傳入另一個函式內，這可以想作在稍後的某個時間點，我們可以使用這個傳入的引數進行操作，這樣的做法可被稱為回呼函式的概念。
我：每個人都一直自言自語。

-- to be continued --

那今天就到這邊摟！今天分享喜歡的歌是：
草東沒有派對 - 爛泥
https://www.youtube.com/watch?v=QPY4h-nDIZ8

每天的休息，是為了後面的追求，明天見。

reference:

1. Function Declarations vs. Function Expressions
2. 忍者2
3. MDN