为了转生而点技能-JavaScript，day11(函式内的变数、Callback function

前言：本篇目的为简要纪录函式内的变数种类与功能、参数赋予及厘清Callback function的运作程序。

函式内的变数种类与功能变数种类与功能

        var globalVariable = '全域变数';
        var obj = {
            aFunction: function (para, para2) {
                var localVariables = '区域变数';
                console.log(para, para2);        //一段描述 2 ，因为只准备2个参数传入及输出。
                console.log(localVariables);     //区域变数
                console.log(arguments);          
//Arguments(3) ['一段描述', 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]，全部输入的参数都会在此呈现。
                
                console.log(this);               //{aFunction: ƒ}
                console.log(globalVariable);     
                //全域变数，依照范围链的概念，当函式内无相关变数，会向外寻找。
            }
        }
        obj.aFunction('一段描述', 2, 3);

函式内外变数之变化

        var b = 1;
        function callName(a) {
            console.log(a);       //50，来自callName(50)的参数50。
            b = 2;
            c = a + b;
            console.log(c);      //52，因为b在区域中已经宣告 b = 2，区域变数的值优先全域变数的值。
            var a;
            console.log(a);      //50，因为区域变数没有值，所以带入参数。
            a = 100;
            console.log(a);      //100，因为a重新宣告，覆盖参数。
        };
        console.log(b);          //1
        callName(50);            //50  52  50  100
        console.log(b);          //2，因为callName(50)作用的函式里面的b=2已经变更了外层的同名变数b。
        

        function callObject(obj) {
            obj.name = '杰伦家';
        };
        var family = {
            name: '小明家'
        };
        console.log(family);     //小明家
        callObject(family);
        console.log(family);     //杰伦家，当变数 family的值当成参数传入函式执行时，变数family的值只是物件的address，不会影响函式内部物件。

参数名字可以自取，参数输入顺序为由左至右。

        function callMore(d, c, b, a) {
            console.log(d);  //a
            console.log(c);  //b
            console.log(b);  //c
            console.log(a);  //undefined，代表在函式内有变数a但是未赋值。
        }
        var a = 'a';
        var b = 'b';
        var c = 'c';
        callMore(a, b, c);

Callback function：函式当作参数传入另一个函式，称为回呼、回调、回叫函式。

        function step01(params01) {
            params01();
        };
        function step02() {
            console.log('step02');
        };
        step02();             //step02
        step01(step02);       //step02
        step01();             //错误讯息：params01 is not a function

解step01(step02)：

1. 执行函式step01，并将函式step02当作参数输入。
2. 函式step01执行params01()，因为函式step02为参数params01()，所以等同开始执行函式step02。
3. 函式step02执行console.log('step02')，得'step02'。

Callback function例1：

        function f01(name, a) {
            console.log(name + '你好', a)
        }
        function f02(PersonName) {
            PersonName('小明', 1);
        }
        f01();             //undifined + '你好', undifined
        f02(f01);          //'小明' + '你好', 1

解f02(f01)：

1. 函式f01当作参数，并输入函式f02。
2. 函式f02开始执行并读取参数f01并执行f01，PersonName('小明', 1)变成f01('小明', 1)。
3. 执行f01并带入参数('小明', 1)。

参考文章：

1. [JavaScript] 一次搞懂同步与非同步的一切：待会叫你 — 回呼函式(Callback Function)：https://medium.com/itsems-frontend/javascript-callback-function-993abc2c0b42
2. 重新认识 JavaScript: Day 18 Callback Function 与 IIFE：https://ithelp.ithome.com.tw/articles/10192739
3. Day20　立即呼叫的函式表示式(IIFE)：https://ithelp.ithome.com.tw/articles/10193313