箭头函数是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函数只能使用常规写法)。