• 技术文章 >web前端 >js教程

    Javascript中 带名 匿名 箭头函数的重要区别(推荐)

    高洛峰高洛峰2017-02-03 13:57:40原创1043
    带名函数是指函数显示地给出了一个名字的函数,function abs(x){}。匿名函数是指函数只带有function这个关键字,而没有像abs这种函数名称的函数,如function(){}。ES6标准新增了一种新的函数:Arrow Function(箭头函数)箭头函数表面上相当于匿名函数,并且简化了函数定义。它们各自的区别是什么呢?

    1 带名和匿名函数的区别

    区别:匿名函数需要讲地址赋值给另一个变量let a,然后再用a来调用函数;而带名函数因为显示地给出了函数名称,所以可以直接用这个函数名称调用。

    带名函数返回值是函数体内的返回值,如abs(x)函数的返回值是number变量。函数调用时,直接abs(6)调用,这个非常好理解。

    function abs(x){
     if(x>=0){
      return x;
     }else{
      return -x;
     }
    }

    但是匿名函数呢?如下所示,函数未显示地给出一个函数名称,但是此处的abs被赋值为这个匿名函数的地址,所以使用时可以直接用abs(-3),诸如此类的调用。

    let abs=function(x){
     if(x>=0){
      return x;
     }else{
      return -x;
     }
    }

    2 箭头函数

    ES6标准新增了一种新的函数:Arrow Function(箭头函数)。为什么叫Arrow Function?因为它的定义用的就是一个箭头。箭头函数表面上相当于匿名函数,并且简化了函数定义。

    箭头函数有两种格式,一种是只包含一个表达式,连{ … }和return都省略掉了。

    x => x * x

    上面的箭头函数相当于一个匿名函数“”

    function (x) {
     return x * x;
    }

    还有一种可以包含多条语句,这时候就不能省略{ … }和return:

    (x,y) => {
     if (x > 0) {
      return x + y;
     }
     else {
      return -x + y;
     }
    }

    3 箭头函数和匿名函数的不同

    箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。

    调用函数obj1.getAge(2017)和调用obj2.getAge(2017)会得到相同的结果吗?

    obj1中fn函数,由于JavaScript函数对this绑定的错误处理,得不到预期的结果,this.birth指向window或undefined。

    但是obj2,fn函数是箭头函数,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj2。

    var obj1 = {
     birth: 1990,
     getAge: function (year) {
      let fn=function(y){
       return y - this.birth; // this指向window或undefined
      };
      return fn(year);
     }
    };
    var obj2 = {
     birth: 1990,
     getAge: function (year) {
      var fn = (y) => y - this.birth; // this.birth为1990
      return fn(year);
     }
    };

    4 总结

    和带名函数相比,匿名函数需要讲地址赋值给另一个变量let a,然后再用a来调用函数;和匿名函数比,箭头函数完全修复了this的指向,this总是指向词法作用域。

    以上所述是小编给大家介绍的Javascript中 带名 匿名 箭头函数的重要区别,希望对大家有所帮助,如果有任何疑问欢迎给我留言,小编会及时回复大家的!

    更多Javascript中 带名 匿名 箭头函数的重要区别(推荐)相关文章请关注PHP中文网!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    上一篇:JavaScript基础之AJAX简单的小demo 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 一文详解多版本node的安装和管理• Angular学习之聊聊Http ( 错误处理 / 请求拦截 )• 浅析Angular中的Change Detection机制• 实战学习:聊聊Node.js怎么操作数据库• 一文聊聊node中的path模块
    1/1

    PHP中文网