箭头函数语法

箭头函数是es6语法,在js开发中常规语法常常会有this指向丢失的问题,为了解决这个问题我们通常使用箭头函数来解决它

首先了解箭头函数的基础语法:

1.函数中有多个参数多个表达式

  (参数1, 参数2, ...,参数n) => { 函数声明 }

2.函数中有多个参数只有一个表达式

  (参数1, 参数2, ...,参数n) =>  函数声明  //在只有一个表达式的时候,表达式可以不加大括号{},(为了规范,一般都加大括号)

3.函数中只有一个参数和只有一个表达式

  写法1:   参数1  =>  函数声明   //在参数只有一个的情况下,可以去掉参数的括号,只有一个表达式可以去掉表达式的大括号(为了规范,一般都加括号和大括号)

  写法2:   (参数1) => 函数声明  这样还适合于多个参数一个表达式 ,如  : (参数1,参数2, ...  => 函数声明

  写法3: 参数1  => { 函数声明 }  这样还适应于一个参数多个表达式,如  : 参数1  => { 函数声明1,函数声明2, ... }

  写法4: (参数1) => { 函数声明 }  (规范写法,这样不管是多个参数,多个表达式。还是一个参数,一个表达式,一个参数,多个表达式,多个参数,一个表达式都能使用)

4. 没有参数的函数

  () => { 函数声明 }  在没有参数的情况下是不能省略参数的括号的

小结综合上面语法可以得出,最好的方法还是有一个统一的规范,就是不管有多少参数和表达式,都加上括号和大括号,这样就不会出现不必要的麻烦。

实例1:

  常规语法:function  hua (params) {

        return params  *  2;

       }

       hua( 4 ) // 输出 8

  箭头函数:var hua =  (params)  => {params * 2 }

       hua( 4 ) // 输出 8

同样的作用,但是箭头函数能写少很多代码

实例2:(this指向问题)

  function liang(){

    this.num = 1;

    this.timer = setInterval( () => {

      this.num ++;

      console.log(this.num);

      console.log('this==>>', this);

    },1000);

  }

  var b = new liang ();

  console.log('b==>>>', b);

  clearInterval(b.timer); //停止执行定时器(测试完之后才使用,否则上面代码不会有效果显示)

说明:在代码中定时器使用了箭头函数,使this指向在liang函数中不会丢失,如果使用常规写法就会导致this丢失而指向window

(但是要注意的是,如果liang函数也是使用箭头函数的写法,那么该函数的作用域就是属于window了,从而this也是指向window,所以为了有固定的作用域liang函数只能使用常规写法)。

 

原文地址:https://www.cnblogs.com/hermit-gyqy/p/11206240.html