JavaScript——匿名函数

210 阅读1分钟

这是我参与更文挑战的第10天,活动详情查看: 更文挑战

匿名函数

函数表达式

在讲匿名函数之前我们首先要知道什么是函数表达式。所谓函数表达式就是将声明的函数赋值给一个变量,通过变量完成函数的调用和参数的传递。它是JS中另一种自定义函数的一种方式。 具体示例如下:

    <script>
        //定义函数表达式
       var f = function add(a,b){
           return a+b;
       }
       //通过变量名调用函数
       f();
    </script>

函数表达式与普通函数定义的方式几乎相同,需要注意的是,函数表达式的定义要在调用前,且通过变量名来调用。

匿名函数

匿名函数指的是没有函数名称的函数,可以有效地避免全局变量的污染以及函数名的冲突问题。 它既是函数表达式的另一种形式,又可以通过函数声明来调用。 具体示例如下:

<script>
       //方式1:函数表达式省略函数名
       var f1 = function (a,b){
           return a+b;
       }
       f1(1,3);
       //方式2:自调用方式
       (function (a,b){
           return a+b;
       })(1,3);
       //方式3:处理事件
       document.body.onclick = function (){
           alert("Hi,Bob");
       };
    </script>

ES6中引入了一种新的编写匿名函数的语法,叫做箭头函数(和java中的lambda表达式类似,有兴趣的话大家可以去看看我的另一篇博客来写Lambda表达式的。)

箭头函数常见的语法格式如下:

<script>
       //用法1:标准语法
       (p1,p2,...,Pn) =>{函数体}
       //用法2:返回值
       (p1,p2,...,pn) =>{return 返回值;}
       或
       (p1,p2,...,pn) =>return 返回值
       //用法3:含有一个参数
       (参数) =>{函数体}
       或
       参数 =>{函数体;}
       //用法4:无参数箭头函数
      () => {函数体;}
       或
       _ => {函数体;}
    </script>

当函数体中只有一条语句时可以省略大括号,且当这条语句为return语句时可以省略return关键字. 当参数列表只有一个参数时可以省略小括号。 当没有参数时,必须含有小括号或下划线(_)。

来看一个例子:

<script>
        //1个参数且省略了return关键字
      var f = x =>{
          x+2;
      }
      console.log(f(6));//结果为8
      //两个参数,且省略了return关键字
      var f2 = (a,b) => {
          x+y;
      }
      console.log(f2(1,3));//输出结果为4
    </script>

使用箭头函数可以简化匿名函数的代码,使代码更简洁明了。

看了这么多,亲自动手试一下吧!