JavaScript-匿名函数

原文链接：https://blog.csdn.net/weixin_45203607/article/details/124227504

什么是匿名函数
1、匿名函数,即没有名称的函数
2、如果单独只写一个匿名函数，此时是不符合语法要求的 会报错。需要给 匿名函数包裹一个括号，使之成为表达式。
3、被小括号包裹的内容会被js识别为一个函数表达式

如何执行和使用匿名函数？
需要执行匿名函数 后面追加括号即可 也就是立即执行函数；后面紧跟一对括号 ()，表示立即执行

方式一：小括号只将匿名函数包裹起来 后面跟随执行的小括号(常用)

(function () {
      alert('匿名函数执行方式一')
    })();

小括号将匿名函数以及执行匿名函数的小括号都包裹起来 整体构成一个表达式

 (function () {
      alert('匿名函数执行方式二')
    }());

　　匿名函数传参 与其他普通参数的传参方式一样，调用的时候将参数传入即可

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

　　

匿名函数的应用
绑定事件时的方法

  let item = document.getElementById("item")
    item.onclick = function () {
      alert("我是输入框的点击事件")
    }

　　函数表达式 将匿名函数赋值给一个变量

  let fun2 = function () {
      alert('这是一个函数表达式')
    }
    fun2();

　　对象里面的函数属性

   let obj = {
      name: "Year",
      age: 28,
      hobby: function () {
        return '我喜欢跳舞'
      }
    };
    alert(obj.hobby());

　　回调函数，将匿名函数作为其中的一个参数

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

　　函数返回值，即将函数作为一个返回值

     //内部函数可以访问外部函数的所有变量
    function box() {
      return function() {
        alert("函数作为返回值的应用")
      }
    }
    box()();

　　

在 (function($, 中，$ 是一个参数，通常用于传递 jQuery 对象。这种模式在 jQuery 插件开发中非常常见，用于确保 $ 在插件内部始终指向 jQuery，即使在全局作用域中 $ 被覆盖或未定义。

完整的结构通常如下：

JavaScript复制

(function($, window, document, undefined) {
    // 插件代码
})(jQuery, window, document);

参数解释

1. $：通常用于传递 jQuery 对象。这样可以确保在插件内部 $ 始终是 jQuery，即使在全局作用域中 $ 被覆盖（例如，某些库可能使用 $ 作为其他用途）。
2. window 和 document：将 window 和 document 作为参数传递，可以提高代码的性能，避免在函数内部重复访问全局对象。
3. undefined：将 undefined 作为参数传递，可以确保在函数内部 undefined 的值不会被意外覆盖（尽管在现代 JavaScript 中，undefined 是不可变的）。

匿名函数的用途

1. 回调函数：在异步操作（如 AJAX 请求、事件监听器）中使用。
2. 局部作用域：通过自执行匿名函数创建局部作用域，避免全局变量污染。
3. 高阶函数：作为参数传递给其他函数，或者作为函数的返回值。
4. 简化代码：在需要简单逻辑时，使用匿名函数可以避免定义过多的命名函数。

匿名函数的优缺点

优点

1. 简洁：不需要定义函数名，代码更简洁。
2. 灵活：可以作为参数传递，也可以作为返回值返回。
3. 局部作用域：通过自执行匿名函数可以创建局部作用域。

缺点

1. 调试困难：由于没有名称，调试时可能难以识别。
2. 可读性：如果匿名函数过长或逻辑复杂，可能会降低代码的可读性。