JavaScript中的Function對象怎么使用

本篇內容主要講解“JavaScript中的Function對象怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript中的Function對象怎么使用”吧!

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：空間域名、虛擬空間、營銷軟件、網站建設、鉛山網站維護、網站推廣。

實例定義

在Js中函數是Fuction類的實例對象，因此我們可以用實例化的方式來定義函數，這也能充分理解函數也是對象這一概念。

復制代碼

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

標準定義

使用Function類的方式定義函數太過麻煩，因此推薦使用function標準語法進行定義。

復制代碼

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

對象字面量

我們可以在一個對象中定義函數，這通常會被稱之為對象方法。

復制代碼

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

匿名函數

全局聲明的標準定義函數會被存入window對象中，這樣做會產生很多弊端。

因為我們的函數名如果不恰當的話可能造成window方法缺失。

復制代碼

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

因此，可以通過賦值來進行匿名函數的定義，定義前使用let/const進行聲明，這樣就不會壓入至window對象中，注意后面要以;結束。 注意：以var聲明的匿名函數會壓入至window對象中

復制代碼

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

函數執行

函數提升

標準定義的函數會進行函數提升，可以先使用后定義，這是不符合規范的。

但是匿名函數不會進行函數提升。

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

即使使用了var來定義匿名函數，也不會進行函數提升，但是會將該函數壓入window對象中，所以建議使用let/const來對匿名函數進行接收。

標準聲明函數會進行提升

復制代碼

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

匿名函數不會進行提升

復制代碼

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

自執行函數

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

但是現在不用了，因為let/const具有塊作用域，它們的出現決定我們今后寫的模塊不用再拿自執行函數來進行封裝了。

首先來看一下自執行函數怎么使用。

復制代碼

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

自執行函數封裝

復制代碼

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

let作用域封裝

復制代碼

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

調用

復制代碼

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

參數相關

形參實參

形參是在函數聲明時設置的參數，實參指在調用函數時傳遞的值，注意，傳參時必須一一對應！

形參數量大于實參時，沒有傳參的形參值為 undefined
實參數量大于形參時，多于的實參將忽略并不會報錯
使用函數名.length可獲取需要傳遞形參的數量

復制代碼

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

默認形參

默認形參要放在最后，當沒有實參傳遞時采用默認形參的值，當有實參傳遞時采用實參傳遞的值。

復制代碼

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

復制代碼

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

函數參數

函數本身也可當做一個參數傳遞給另一個函數。

復制代碼

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

arguments

當某個函數要接收無限多的參數時，可不指定形參，使用arguments來進行接收（必須是這個名字）。

注意：arguments是Arguments對象，并不是一個數組。但是我們可以將它轉換為數組再進行操作

復制代碼

<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>

...語法

當形參要接收無限多的參數時，可在形參名前加入...，使用進行接收。該形參會作為一個Array對象接收無限多的參數。

這個是更推薦使用的方式

復制代碼

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

當實參是一個數組或者類數組的數據類型時，可以使用...語法來為形參一一對應傳參。但是要注意，嚴格模式下不允許這樣做。

復制代碼

<script>
        // "use strict"; 嚴格模式下不能這么做
        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>

箭頭函數

箭頭函數是函數聲明的簡寫形式，在使用遞歸調用、構造函數、事件處理器時不建議使用箭頭函數。

無參數時使用空擴號即可，代碼塊過于簡短可省略花括號。
函數體為單一表達式時不需要 return 返回處理，系統會自動返回表達式計算結果。
多參數傳遞與普通聲明函數一樣使用逗號分隔
只有一個參數時可以省略參數括號。

無參數時使用空擴號即可，代碼塊過于簡短可省略花括號。

復制代碼

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

函數體為單一表達式時不需要 return 返回處理，系統會自動返回表達式計算結果。

復制代碼

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

多參數傳遞與普通聲明函數一樣使用逗號分隔

復制代碼

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

只有一個參數時可以省略參數括號。

復制代碼

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

遞歸調用

遞歸指函數內部調用自身的方式。

主要用于數量不確定的循環操作
要有退出時機否則會陷入死循環

以下示例將展示使用遞歸進行累加操作。

復制代碼

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

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

復制代碼

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

回調函數

回調函數是指在某一特定情況下會被其他函數所調用的函數，比如處理鼠標事件，鍵盤事件的函數都是回調函數。

復制代碼

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

標簽函數

當使用模板字面量對字符串進行格式化時，可指定一個標簽函數。第一個參數是字符串值的數組，其余的參數為標簽變量。

注意！標簽函數會自動執行！

復制代碼

<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>

到此，相信大家對“JavaScript中的Function對象怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是創新互聯網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！

名稱欄目：JavaScript中的Function對象怎么使用
當前鏈接：http://vcdvsql.cn/article20/pdspco.html

成都網站建設公司_創新互聯，為您提供移動網站建設、網站排名、靜態網站、做網站、定制開發、網站導航

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

JavaScript中的Function對象怎么使用

實例定義

標準定義

對象字面量

匿名函數

函數執行

函數提升

自執行函數

參數相關

形參實參

默認形參

函數參數

arguments

...語法

箭頭函數

遞歸調用

回調函數

標簽函數