JavaScript中的Function對(duì)象怎么使用

本篇內(nèi)容主要講解“JavaScript中的Function對(duì)象怎么使用”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“JavaScript中的Function對(duì)象怎么使用”吧!

實(shí)例定義

　　在Js中函數(shù)是Fuction類的實(shí)例對(duì)象，因此我們可以用實(shí)例化的方式來(lái)定義函數(shù)，這也能充分理解函數(shù)也是對(duì)象這一概念。

復(fù)制代碼

<script>
        "use strict";        // 參數(shù)1：形參，參數(shù)2：函數(shù)代碼體
        let func = new Function("title","console.log(title)");
        func("云崖先生的博客");</script>

標(biāo)準(zhǔn)定義

　　使用Function類的方式定義函數(shù)太過麻煩，因此推薦使用function標(biāo)準(zhǔn)語(yǔ)法進(jìn)行定義。

復(fù)制代碼

<script>
        
        "use strict";        function func(title){
                console.log(title);
        }
        func("云崖先生的博客"); 
</script>

對(duì)象字面量

　　我們可以在一個(gè)對(duì)象中定義函數(shù)，這通常會(huì)被稱之為對(duì)象方法。

復(fù)制代碼

<script>
        "use strict";
        let obj = {
                description:"這是一個(gè)對(duì)象屬性",
                show:function(title){
                        console.log("這是一個(gè)對(duì)象方法，傳入的參數(shù)是:",title);
                },
                
        }
        obj.show("云崖");</script>

匿名函數(shù)

　　全局聲明的標(biāo)準(zhǔn)定義函數(shù)會(huì)被存入window對(duì)象中，這樣做會(huì)產(chǎn)生很多弊端。

　　因?yàn)槲覀兊暮瘮?shù)名如果不恰當(dāng)?shù)脑捒赡茉斐?code>window方法缺失。

復(fù)制代碼

<script>
        "use strict";        function func(title){
                console.log(title);
        }
        func("云崖先生的博客");
 
        console.log(window.func); // 有的</script>

　　因此，可以通過賦值來(lái)進(jìn)行匿名函數(shù)的定義，定義前使用let/const進(jìn)行聲明，這樣就不會(huì)壓入至window對(duì)象中，注意后面要以;結(jié)束。 注意：以var聲明的匿名函數(shù)會(huì)壓入至window對(duì)象中

復(fù)制代碼

<script>
        "use strict";
        let func = function (title) {
                console.log(title);
        };
        func("云崖先生的博客");
        console.log(window.func);  //  undefined</script>

函數(shù)執(zhí)行

函數(shù)提升

　　標(biāo)準(zhǔn)定義的函數(shù)會(huì)進(jìn)行函數(shù)提升，可以先使用后定義，這是不符合規(guī)范的。

　　但是匿名函數(shù)不會(huì)進(jìn)行函數(shù)提升。

　　函數(shù)的提升是排在var變量提升之前的，因此如果函數(shù)名與用var定義的變量重復(fù)那么該名字會(huì)被變量拿到，函數(shù)則會(huì)被當(dāng)做垃圾回收。

　　即使使用了var來(lái)定義匿名函數(shù)，也不會(huì)進(jìn)行函數(shù)提升， 但是會(huì)將該函數(shù)壓入window對(duì)象中，所以建議使用let/const來(lái)對(duì)匿名函數(shù)進(jìn)行接收。

　　標(biāo)準(zhǔn)聲明函數(shù)會(huì)進(jìn)行提升

復(fù)制代碼

<script>
        "use strict";
        func("云崖先生的博客"); // 執(zhí)行了
        function func (title) {
                console.log(title);
        }
        console.log(window.func);  // 有的</script>

　　匿名函數(shù)不會(huì)進(jìn)行提升

復(fù)制代碼

<script>
        "use strict";
        func("云崖先生的博客");  // Uncaught ReferenceError: Cannot access 'func' before initialization
        let func = function (title) {
                console.log(title);
        }
        console.log(window.func);  
</script>

自執(zhí)行函數(shù)

　　在很早之前，如果你寫了一個(gè)Js模塊，為了防止全局作用域的污染，你會(huì)將代碼放入一個(gè)自執(zhí)行函數(shù)里面。

　　但是現(xiàn)在不用了，因?yàn)?code>let/const具有塊作用域，它們的出現(xiàn)決定我們今后寫的模塊不用再拿自執(zhí)行函數(shù)來(lái)進(jìn)行封裝了。

　　首先來(lái)看一下自執(zhí)行函數(shù)怎么使用。

復(fù)制代碼

<script>
        "use strict";
        (function (title) {
                console.log(title);  // 自己執(zhí)行
        })("云崖先生的博客");  // 這里調(diào)用</script>

　　自執(zhí)行函數(shù)封裝

復(fù)制代碼

(function () {        function show() {
                console.log("執(zhí)行了show功能");
        }        function test() {
                console.log("執(zhí)行了test功能");
        }
        window.module = { show, test };
})();

　　let作用域封裝

復(fù)制代碼

{
        let show = function () {
                console.log("執(zhí)行了show功能");
        }
        let test = function () {
                console.log("執(zhí)行了test功能");
        }
        window.module = { show, test };
};

　　調(diào)用

復(fù)制代碼

<script src="JavaScript.js"></script> 
<script>
        // 注意上面要引入模塊
    
        "use strict";
        module.show();
        module.test();</script>

參數(shù)相關(guān)

形參實(shí)參

　　形參是在函數(shù)聲明時(shí)設(shè)置的參數(shù)，實(shí)參指在調(diào)用函數(shù)時(shí)傳遞的值，注意，傳參時(shí)必須一一對(duì)應(yīng)！

　　形參數(shù)量大于實(shí)參時(shí)，沒有傳參的形參值為 undefined

　　實(shí)參數(shù)量大于形參時(shí)，多于的實(shí)參將忽略并不會(huì)報(bào)錯(cuò)

　　使用函數(shù)名.length可獲取需要傳遞形參的數(shù)量

復(fù)制代碼

<script>
        "use strict";        function test(f1, f2, f3) {
                console.log(f1);  // 第一個(gè)
                console.log(f2);  // 第二個(gè)
                console.log(f3);  // undefined
        }
        test("第一個(gè)","第二個(gè)");</script>

默認(rèn)形參

　　默認(rèn)形參要放在最后，當(dāng)沒有實(shí)參傳遞時(shí)采用默認(rèn)形參的值，當(dāng)有實(shí)參傳遞時(shí)采用實(shí)參傳遞的值。

復(fù)制代碼

<script>
        "use strict";        function test(f1, f2, f3) {
                f3 = f3 || "默認(rèn)形參";  // 老版設(shè)置默認(rèn)形參的方式
                console.log(f1);  // 第一個(gè)
                console.log(f2);  // 第二個(gè)
                console.log(f3);  // 默認(rèn)形參                
        }
        test("第一個(gè)","第二個(gè)");</script>

復(fù)制代碼

<script>
        "use strict";        // 新版設(shè)置默認(rèn)形參的方式
        function test(f1, f2, f3="默認(rèn)形參") { 
                console.log(f1);  // 第一個(gè)
                console.log(f2);  // 第二個(gè)
                console.log(f3);  // 默認(rèn)形參
        }
        test("第一個(gè)","第二個(gè)");</script>

函數(shù)參數(shù)

　　函數(shù)本身也可當(dāng)做一個(gè)參數(shù)傳遞給另一個(gè)函數(shù)。

復(fù)制代碼

<script>
        "use strict";        function f1(func) {
                console.log("f1...");
                console.log("參數(shù):",func);
                func("給f2傳遞的參數(shù)"); // 執(zhí)行f2        }        function f2(y) { 
                console.log("f2");
                console.log("參數(shù):",y);
         }
         f1(f2);</script>

arguments

　　當(dāng)某個(gè)函數(shù)要接收無(wú)限多的參數(shù)時(shí)，可不指定形參，使用arguments來(lái)進(jìn)行接收（必須是這個(gè)名字）。

　　注意：arguments是Arguments對(duì)象，并不是一個(gè)數(shù)組。但是我們可以將它轉(zhuǎn)換為數(shù)組再進(jìn)行操作

復(fù)制代碼

<script>
        "use strict";        function show() {
                console.log(arguments );                // Arguments(6) [1, 2, 3, 4, 5, 6, callee: (...), Symbol(Symbol.iterator): ?]
        }
        show(1,2,3,4,5,6);</script>

...語(yǔ)法

　　當(dāng)形參要接收無(wú)限多的參數(shù)時(shí)，可在形參名前加入...，使用進(jìn)行接收。該形參會(huì)作為一個(gè)Array對(duì)象接收無(wú)限多的參數(shù)。

　　這個(gè)是更推薦使用的方式

復(fù)制代碼

<script>
        "use strict";        function show(...args) {
                console.log(args );                // (6) [1, 2, 3, 4, 5, 6]        }
        show(1,2,3,4,5,6);</script>

　　當(dāng)實(shí)參是一個(gè)數(shù)組或者類數(shù)組的數(shù)據(jù)類型時(shí)，可以使用...語(yǔ)法來(lái)為形參一一對(duì)應(yīng)傳參。但是要注意，嚴(yán)格模式下不允許這樣做。

復(fù)制代碼

<script>
        // "use strict"; 嚴(yán)格模式下不能這么做
        function show(f1,f2,f3,f4,f5,f5) {
                console.log(f1);  // 1
                console.log(f2);  // 2
                console.log(f3);  // 3
                console.log(f4);  // 4
                console.log(f5);  // 5        }
        show(...[1,2,3,4,5,6]);</script>

箭頭函數(shù)

　　箭頭函數(shù)是函數(shù)聲明的簡(jiǎn)寫形式，在使用遞歸調(diào)用、構(gòu)造函數(shù)、事件處理器時(shí)不建議使用箭頭函數(shù)。

　　無(wú)參數(shù)時(shí)使用空擴(kuò)號(hào)即可，代碼塊過于簡(jiǎn)短可省略花括號(hào)。

　　函數(shù)體為單一表達(dá)式時(shí)不需要 return 返回處理，系統(tǒng)會(huì)自動(dòng)返回表達(dá)式計(jì)算結(jié)果。

　　多參數(shù)傳遞與普通聲明函數(shù)一樣使用逗號(hào)分隔

　　只有一個(gè)參數(shù)時(shí)可以省略參數(shù)括號(hào)。

　　無(wú)參數(shù)時(shí)使用空擴(kuò)號(hào)即可，代碼塊過于簡(jiǎn)短可省略花括號(hào)。

復(fù)制代碼

<script>
        "use strict";
        let show = () => console.log("執(zhí)行了");
        show();</script>

　　函數(shù)體為單一表達(dá)式時(shí)不需要 return 返回處理，系統(tǒng)會(huì)自動(dòng)返回表達(dá)式計(jì)算結(jié)果。

復(fù)制代碼

<script>
        "use strict";
        let show = () => "你真帥";
        const res = show();
 
        console.log(res);  // 你真帥</script>

　　多參數(shù)傳遞與普通聲明函數(shù)一樣使用逗號(hào)分隔

復(fù)制代碼

<script>
        "use strict";
        let show = (f1, f2, f3) => {
                console.log(f1);
                console.log(f2);
                console.log(f3);
        };  // 注意加分號(hào)
        show("第一", "第二", "第三")</script>

　　只有一個(gè)參數(shù)時(shí)可以省略參數(shù)括號(hào)。

復(fù)制代碼

<script>
        "use strict";
        let show = f1 => console.log(f1);
        show("第一")  // 第一</script>

遞歸調(diào)用

　　遞歸指函數(shù)內(nèi)部調(diào)用自身的方式。

　　主要用于數(shù)量不確定的循環(huán)操作

　　要有退出時(shí)機(jī)否則會(huì)陷入死循環(huán)

　　以下示例將展示使用遞歸進(jìn)行累加操作。

復(fù)制代碼

<script>
        "use strict";        function show(num) {                if (!num) {                        return 0;
                }                return num + show(num - 1);
        }
        let res = show(100);
        console.log(res);  // 5050</script>

　　以下示例將展示使用遞歸打印倒三角。

復(fù)制代碼

<script>
        "use strict";        function show(num) {                if (!num) {                        return ;
                }
                console.log("*".repeat(num));
                show(num - 1);
        }
        show(5);     
</script>

回調(diào)函數(shù)

　　回調(diào)函數(shù)是指在某一特定情況下會(huì)被其他函數(shù)所調(diào)用的函數(shù)，比如處理鼠標(biāo)事件，鍵盤事件的函數(shù)都是回調(diào)函數(shù)。

復(fù)制代碼

<script>
        "use strict";                                                                // 回調(diào)函數(shù)
        document.querySelector("div").addEventListener("click",(event)=> console.log(event.target));  // 由于this指向不同，所以我們使用event.target進(jìn)行打印
     </script>

標(biāo)簽函數(shù)

　　當(dāng)使用模板字面量對(duì)字符串進(jìn)行格式化時(shí)，可指定一個(gè)標(biāo)簽函數(shù)。第一個(gè)參數(shù)是字符串值的數(shù)組，其余的參數(shù)為標(biāo)簽變量。

　　注意！標(biāo)簽函數(shù)會(huì)自動(dòng)執(zhí)行！

復(fù)制代碼

<script>
        "use strict";        function show(str, ...args) {
                console.log(str);  // (3) ["姓名是:", "?年齡是:", "", raw: Array(3)]
                console.log(args);  // (2) ["云崖", 18]                
        }
        let username = "云崖";
        let age = 18;
        let str = show`姓名是:${username}\n年齡是:${age}`;</script>

到此，相信大家對(duì)“JavaScript中的Function對(duì)象怎么使用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！