前言

這篇文章開始我們函數(shù)的進階篇，和我們JavaScript基礎學的函數(shù)有了很多拓展，這篇文章首先我們從函數(shù)的定義，調用，及其 this指向 來一個總結。 

一：函數(shù)的定義 

函數(shù)的定義共三種方式：1.命名函數(shù)，2.匿名函數(shù)，3.利用 new Function() 來創(chuàng)建。

1.1 命名函數(shù) 

命名函數(shù)就是我們最常見的聲明函數(shù)的方式，也叫做自定義函數(shù)

    <script>
        function fn(){
            console.log('我是命名函數(shù)');
        }
        fn()
    </script>

1.2 匿名函數(shù) 

匿名函數(shù)即沒有名字的函數(shù)，匿名函數(shù)的調用需要使用立即執(zhí)行函數(shù)，綁定事件時使用的也是匿名函數(shù)

    <script>
    //立即執(zhí)行函數(shù)來調用匿名函數(shù)
       (function(a,b){     
           console.log(a+b);
       })(1,2)
 
    //綁定事件來使用匿名函數(shù)
       var div1=document.querySelector('div')
       div1.addEventListener('click',function(){
         console.log('我是綁定事件使用的匿名函數(shù)');
       })
    </script>

1.3 利用 new Function() 聲明函數(shù)

還有一種不常見的函數(shù)聲明方法是 new Function()，這個辦法我們知道是個構造函數(shù)。但是由于這種方式比較繁瑣麻煩，并且如果執(zhí)行函數(shù)還需要轉化語言格式為可識別的腳本語言，因此不使用這種方式聲明函數(shù)，只需要知道 所有的函數(shù)都是Function構造函數(shù)的實例化對象（后面結論會說）

參數(shù)格式為：

new Function(‘參數(shù)一’，‘參數(shù)二’，‘參數(shù)三’，...... ，‘函數(shù)體)

（注意參數(shù)全部為字符串形式）

    <script>
         var fn=new Function('a','b','console.log(a+b)')
         fn(2,3)
    </script>

1.4 重要結論

通過剛才的第三種函數(shù)的聲明方法，是個構造函數(shù)，我們會想到什么，為什么函數(shù)也有構造函數(shù)，難道函數(shù)也是對象嗎？是的那我們接下來驗證一下

    <script>
         var fn=new Function('a','b','console.log(a+b)')
         fn(1,3)
         console.dir(fn instanceof Object)
    </script>

結論：

      對此我們知道了函數(shù)也是對象就可以得到以下關系

函數(shù)屬于對象所有的函數(shù)都是Function構造函數(shù)的實例化對象

 二：函數(shù)的調用

函數(shù)的調用分為以下六種情況：

• 普通函數(shù)調用
• 立即執(zhí)行函數(shù)調用
• 對象內方法調用
• 構造函數(shù)調用
• 事件函數(shù)調用
• 定時器函數(shù)調用

2.1 普通函數(shù)調用

普通函數(shù)調用可以直接寫函數(shù)名調用，也可以使用 call() 方法調用

    <script>
        function fn(){
            console.log('我是一個普通函數(shù)的調用');
        }
        fn()
        fn.call()
    </script>

2.2 立即執(zhí)行函數(shù)調用

立即執(zhí)行函數(shù)通常用于匿名函數(shù)的調用，立即執(zhí)行函數(shù)是自動調用的

    <script>
        (function(){
            console.log('立即執(zhí)行函數(shù)調用了');
        })()
    </script>

2.3 對象內方法調用

對象內方法調用只需要  ：實例化對象名稱.方法名稱

    <script>
        var obj={
            fn:function(){
                console.log('對象內的方法調用了');
            }
        }
        obj.fn()
    </script>

2.4 構造函數(shù)調用

構造函數(shù)的調用只需要 new實例化對象就可調用

    <script>
        function Animal(){}
        new Animal()
    </script>

2.5 事件函數(shù)的調用

事件對象調用需要觸發(fā)事件就可以調用

    <script>
       var div1=document.querySelector('div')
       div1.addEventListener('click',function(){
         console.log('事件對象調用了');
       })
    </script>

2.6 定時器函數(shù)的調用

定時器內的函數(shù)為時間到后自動調用

    <script>
      window.setInterval(function(){
        console.log('定時器函數(shù)觸發(fā)了');
      },1000)
    </script>

 三：各類函數(shù)的內部this指向問題

函數(shù)內部的 this 指向誰，是由我們調用時才知道的，一般情況是指向函數(shù)的調用者，下面是上一板塊出現(xiàn)的幾類函數(shù)的this指向

總結

到此這篇關于JavaScript進階教程之函數(shù)的定義、調用及this指向問題詳解的文章就介紹到這了,更多相關js函數(shù)定義調用及this指向內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論