首頁 web前端 js教程 JavaScript中什麼是匿名函數?應用場景淺析

JavaScript中什麼是匿名函數?應用場景淺析

Aug 04, 2022 pm 01:10 PM
javascript 匿名函數

匿名函數顧名思義指的是沒有名字的函數,在實際開發中使用的頻率非常高,也是學好JS的重點。以下這篇文章就來給大家詳細介紹一下JavaScript中的匿名函數,希望對大家有幫助!

JavaScript中什麼是匿名函數?應用場景淺析

#匿名函數:沒有實際名字的函數。

首先我們宣告一個普通函數:

//声明一个普通函数,函数的名字叫fn
function fn(){
    console.log("web-chubby");
}
登入後複製

然後將函數的名字去掉即是匿名函數:

//匿名函数,咦,运行时,你会发现报错啦!
function (){
    console.log("web-chubby");
}
登入後複製

到此,你會發現單獨運行一個匿名函數,由於不符合語法要求,報錯啦!

JavaScript中什麼是匿名函數?應用場景淺析

解決方法:只需要給匿名函數包裹一個括號,使之成為表達式即可:

//匿名函数在其它应用场景括号可以省略
(function (){
    //由于没有执行该匿名函数,所以不会执行匿名函数体内的语句。
    console.log("web-chubby");
})
登入後複製

如何執行和使用匿名函數?

1、執行匿名函數

如果需要執行匿名函數,在匿名函數後面加上一個括號即可,也就是立即執行函數

  • #小括號只將匿名函數包裹起來後面跟隨執行的小括號(常用)

#
(function () {
      alert('匿名函数执行方式一')
})();
登入後複製
  • 小括號將匿名函數以及執行匿名函數的小括號都包起來整體構成一個表達式

2、匿名函數傳參

與其他普通參數的傳參方式一樣,直接將參數寫到括號內即可:

 (function (m) {
      alert(m)
    }('这是匿名函数传进来的参数'));
登入後複製

匿名函數的應用

  • ##綁定事件時的方法

  • <input type="button" value="点我啊!" id="sub">
    <script>
        //获得按钮元素
        var sub=document.querySelector("#sub");
        //给按钮增加点击事件。
        sub.onclick=function(){
            alert("当点击按钮时会执行到我哦!");
        }
    </script>
    登入後複製
  • 函數表達式將匿名函數賦值給一個變數

  • //将匿名函数赋值给变量fn。
    var fn=function(){
        return "我是一只小小小小留下,怎么飞也飞不高!"
    }
    //调用方式与调用普通函数一样
    console.log(fn());//我是一只小小小小留下,怎么飞也飞不高!
    登入後複製
    ##對象裡面的函數屬性
  • var obj={
        name:"web-chubby",
        age:18,
        fn:function(){
            return "我叫"+this.name+"今年"+this.age+"岁了!";
        }
    };
    console.log(obj.fn());//我叫web-chubby今年18岁了!
    登入後複製
    回呼函數,將匿名函數當作其中的一個參數
  • ##

     //过滤出值为9的值
        let numArr = [1, 5, 9, 10]
        let newArr = numArr.filter(function (item) {
          if (item !== 9) {
            return item
          }
        });
    登入後複製

#函數傳回值,即將函數作為一個返回值
  • //将匿名函数作为返回值
    function fn(){
        //返回匿名函数
        return function(){
            return "web-chubby";
        }
    }
    //调用匿名函数
    console.log(fn()());//web-chubby
    //或
    var box=fn();
    console.log(box());//web-chubby
    登入後複製

#模仿區塊級作用域

##區塊級作用域,有的地方稱為私有作用域。 JavaScript中是沒有區塊級作用域的,例如:

if(1==1){//条件成立,执行if代码块语句。
    var a=12;//a为全局变量
}
console.log(a);//12
for(var i=0;i<3;i++){
    console.log(i);
}
console.log(i);//4
登入後複製
if(){}for(){}等沒有自己的作用域。如果有,出了自己的作用域,宣告的變數就會立刻被銷毀了。但咱們可以透過匿名函數來模擬區塊級作用域:

(function(){
    //这里是我们的块级作用域(私有作用域)
})();
登入後複製

嘗試區塊級作用域:

function fn(){
    (function(){
        var la="啦啦啦!";
    })();
    console.log(la);//报错---la is not defined
}
fn();
登入後複製

匿名函數的作用:

1.透過匿名函數可以實現閉包,關於閉包在後面的文章會重點講解。這裡簡單介紹一下:閉包是可以存取在函數作用域內定義的變數的函數。若要建立一個閉包,往往都需要用到匿名函數。 2、模擬區塊級作用域,減少全域變數。執行完匿名函數,儲存在記憶體中相對應的變數會被銷毀,從而節省記憶體。再者,在大型多人開發的專案中,使用區塊級作用域,會大幅降低命名衝突的問題,從而避免產生災難性的後果。自此開發者再也不必擔心搞亂全域作用域了。

【相關推薦:

javascript學習教學

#

以上是JavaScript中什麼是匿名函數?應用場景淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1655
14
CakePHP 教程
1414
52
Laravel 教程
1307
25
PHP教程
1255
29
C# 教程
1228
24
C++ 匿名函式的用法和特點 C++ 匿名函式的用法和特點 Apr 19, 2024 am 09:03 AM

匿名函數,又稱lambda表達式,是一種不指定名稱的函數,用於一次性使用或傳遞函數指標。特點有:匿名性、一次性使用、閉包、回傳類型推論。實戰中常用於排序或其他一次性函數呼叫。

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

Golang 匿名函數可以傳回多個值嗎? Golang 匿名函數可以傳回多個值嗎? Apr 13, 2024 pm 04:09 PM

是的,Go語言中的匿名函數可以傳回多個值。語法:func(arg1,arg2,...,argN)(ret1,ret2,...,retM){//函數體}。使用方法:使用:=運算元接收回傳值;使用return關鍵字傳回多個值。

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務

Python Lambda表達式:讓程式設計變得更輕鬆 Python Lambda表達式:讓程式設計變得更輕鬆 Feb 19, 2024 pm 09:54 PM

pythonLambda表達式是一個小的匿名函數,它可以將一個表達式儲存在變數中並傳回它的值。 Lambda表達式通常用於執行簡單的任務,這些任務可以透過編寫一個單獨的函數來完成,但Lambda表達式可以使程式碼更簡潔和易讀。 Lambda表達式的語法如下:lambdaarguments:expressionarguments是Lambda表達式接收的參數列表,expression是Lambda表達式的體,它包含需要執行的程式碼。例如,以下Lambda表達式將兩個數字相加並傳回它們的和:lambdax,

lambda 表達式與匿名函數有什麼不同? lambda 表達式與匿名函數有什麼不同? Apr 17, 2024 pm 03:18 PM

lambda表達式和匿名函數都是Python中創建匿名函數的方法,但存在差異。賦值方式:lambda表達式傳回一個函數,而匿名函數必須賦值給變數才能使用。程式碼複雜度:lambda表達式只能包含一個表達式,而匿名函數可以包含多個語句。

JavaScript和WebSocket:打造高效率的即時搜尋引擎 JavaScript和WebSocket:打造高效率的即時搜尋引擎 Dec 17, 2023 pm 10:13 PM

JavaScript和WebSocket:打造高效率的即時搜尋引擎引言:隨著網路的發展,使用者對即時搜尋引擎的要求也越來越高。傳統的搜尋引擎在進行搜尋時,使用者需要點擊搜尋按鈕後才能得到結果,這種方式無法滿足使用者對於即時搜尋結果的需求。因此,採用JavaScript和WebSocket技術來實現即時搜尋引擎成為了一個熱門的話題。本文將詳細介紹使用JavaScri

Python Lambda表達式:縮寫,簡潔,強大 Python Lambda表達式:縮寫,簡潔,強大 Feb 19, 2024 pm 08:10 PM

pythonLambda表達式是一個強大且靈活的工具,可用於建立簡潔、可讀且易於使用的程式碼。它們非常適合快速建立匿名函數,這些函數可以作為參數傳遞給其他函數或儲存在變數中。 Lambda表達式的基本語法如下:lambdaarguments:expression例如,以下Lambda表達式將兩個數字相加:lambdax,y:x+y這個Lambda表達式可以傳遞給另一個函數作為參數,如下所示:defsum( x,y):returnx+yresult=sum(lambdax,y:x+y,1,2)在這個例子

See all articles