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

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

青灯夜游
發布: 2022-08-04 13:10:36
轉載
2382 人瀏覽過

匿名函數顧名思義指的是沒有名字的函數,在實際開發中使用的頻率非常高,也是學好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中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板