JavaScript箭头函数

发表于 | 分类于
  1. 箭头函数的介绍
  2. 箭头函数的定义方式
  3. 箭头函数的优点
  4. 箭头函数与匿名函数的区别

箭头函数的介绍

​ 箭头函数(Arrow Function)是ES6标准新增的一种的函数 箭头函数就是定义时使用的是箭头。

箭头函数的定义方式

下面是其几种常见的定义方式：

  • 无函数名

    参数=>函数体（相当于匿名函数，省略了return和花括号）

    1
    x => x*5

    等价于

    1
    2
    3
    function(x){
        return x*5;
    }

    调用：

    1
    2
    let t = (x=>5*x)(8) //自运行数
    console.log(t);//输出40

  • 有函数名

    let 函数名 = 参数=>函数体

    1
    let f = x*x;

    等价于

    1
    2
    3
    let f = function(x){
      return x*x;
    }

    调用:

    1
    console.log(f(8)); //输出64

  • 函数体有多条语句

    不能省略函数体的花括号和return

    1
    2
    3
    4
    5
    6
    7
    x=>{
      if(x>0){
          return x*x;
      }else{
          return -x*x;
      }
    }

  • 函数有多个参数

    参数要用括号括起来

    1
    (x,y)=> x>y?x:y;

    定义并运行:

    1
    2
    3
    4
    5
    6
    7
    var t = ((x,y)=>x>y?x:y)(12,5);//立即运行
    console.log(t);

    //定义
    //var f = (x,y)=>x>y?x:y;
    //调用
    //console.log(f(12,5));

  • 无参

    参数要用括号括起来

    1
    ()=>24*3200;

  • 可变参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var f = (a...end)=>{ //相当于把省略号的所有值，作为数组end处理
      var sum = a;
      for(var i = 0;i<end.length;i++){
          sum +=end[i];
      }
      return sum;
    }

    console.log(f(1,2,3,4,5));//调用

  • 返回值是对象

    1
    2
    3
    4
    5
    var f = (id,name)=>({
      id:id,name:name
    }); //函数体必须要用()括起来 对象的花括号和函数体的花括号冲突

    console.log*(f("007","张无忌").id);

    ​

箭头函数的优点

对this转移的处理：箭头函数内部的this是词法作用域,由上下文确定。

原来的代码： 

1
2
3
4
var that = this;
this.bannerTimer = setInterval(function(){
    this.goStep();
},1000);

用箭头函数的代码:

1
2
3
this.bannerTimer = srtInterval(
	()=>{this.goStep();}
,1000);

箭头函数与匿名函数的区别

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：

  1. 箭头函数内部的this是词法作用域，由上下文确定。
  2. 匿名函数中的this指向，一般指向window或者undefined。