iT邦幫忙

0

為了轉生而點技能-JavaScript,day10(匿名函式、具名函式、立即函式

函式解構:

functionName:為函式命名,當函式型態為函式陳述式,則必須命名。
函式裡面宣告的變數:為區域變數,僅對函式內部有效。
參數:函式可依照輸入的參數不同,產生不同的結果。
有關函式表達式及函式陳述式可參考此篇

     function functionName(parameter) {
       var localVariable = '區域變數';
       console.log(this, localVariable); // This、區域變數

       return '附加一段' + parameter; // 回傳、參數
     }

     var data = functionName('參數');// 呼叫函式
     console.log(data);
        var functionC = function functionName() {
            console.log(functionC);
            console.log(functionName);
        }
        functionC();   

        console.log(functionC);
        
        console.log(functionName);

解functionC():

  1. 執行console.log(functionC)的結果:如下
     console.log(functionC);
     console.log(functionName);}
  1. 執行console.log(functionName)的結果:如下
      console.log(functionC);
      console.log(functionName);

解console.log(functionC):

      console.log(functionC);
      console.log(functionName);

解console.log(functionName):

出現錯誤訊息:functionName is not defined,因為函式表達式的函式名稱只供該表達式調用,無法給其他函式使用。

函式名稱調用例子:

        var num = 1;
        var giveMeMoney = function giveMoreMoney(coin) {
            num += 1;
            console.log('執行 giveMeMoney', num, coin);
            return coin > 100 ? coin : giveMoreMoney(num * coin);
        };

        console.log(giveMeMoney(30));

結果:
https://ithelp.ithome.com.tw/upload/images/20211202/20143762h3SfZ0Zr3N.jpg



立即函式:IIFE (Immediately Invoked Function Expression)

特點

  1. 可以立刻被執行,是函式表達式。
  2. 型態:(function"functuin名字"(....)())或是(function"functuin名字"(....))()皆可,後面的()可以填入參數。
  3. 具名函式如果為立即函式型態,則無法再次執行。
  4. 匿名函式也會立刻執行。
        function functionName() {
            console.log("呼叫成功");
        };
        functionName();      //呼叫成功
        
        
        
        (function functionName2() {
            console.log("呼叫成功2");
        }());                //呼叫成功2
        functionName2();     //出現錯誤訊息:functionName2 is not defined
        
        
        
        
        (function () {
            console.log("匿名函式呼叫成功");
        }());               //匿名函式呼叫成功
        
        
        *填入參數*
        (function (參數輸出) {
            console.log(參數輸出);
        })('我要呼叫');    //我要呼叫
        
        (function (output) {
            console.log(output);
            return output;
        })('input');      //input

        (function (output) {
            console.log('123');
            return output;
        })('input');     //123
        
        
        
        var result = (function (output) {
            console.log('123');
            return output;
        })('input');        //123

        console.log(result);//input
        
        
        

立即函式間取值:

        var a = {};                         把變數a的值(物件的address)當成參數帶入立即函式內
        (function (參數b) {
            參數b.person = 'TOM';
        })(a);
        console.log(a);                    //{person: 'TOM'}
        (function (參數c) {
            console.log(參數c.person);     //TOM,因為取相同的值(物件的address)當成參數。
        })(a);       

延伸:

        (function (參數b) {
            參數b.person = 'TOM';
        })(window);                  
        (function (參數c) {
            console.log(person);     //TOM
        })();

延伸解:

  1. 把window(瀏覽器)作為物件(屬全域物件),並把address當作參數,並掛上屬性person且值為'Tom'。
  2. 第二個立即函式無須填入參數,因為window本身的address就是參數。

觀念釐清: return 跟 console.log。

function add(a, b) {
   console.log(a + b)
 }
 add(1, 2)

上方會出現3的結果,是因為function add執行了裡面的console.log。

        function add(a, b) {
            return a + b
        }
        add(1, 2);               //無結果。
        console.log(add(1, 2));  //3
        var x = add;
        console.log(x);          //ƒ add(a, b) {return a + b}
        console.log(x(1, 2));    //3

參考:

  1. [JS] 函式參數、算數、回傳、函式間互相傳遞:https://medium.com/%E9%A6%AC%E6%A0%BC%E8%95%BE%E7%89%B9%E7%9A%84%E5%86%92%E9%9A%AA%E8%80%85%E6%97%A5%E8%AA%8C/js-%E5%A6%82%E4%BD%95%E9%81%8B%E7%94%A8%E5%87%BD%E5%BC%8F%E9%80%B2%E8%A1%8C%E9%81%8B%E7%AE%97-a2c2a560a86c

尚未有邦友留言

立即登入留言