iT邦幫忙

0

為了轉生而點技能-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

尚未有邦友留言

立即登入留言