追求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