ES6箭头函数

箭头函数

函数是所有编程语言都拥有的重要部分，ES6版本中出现了一种很特别的函数形式——箭头函数

一个小例子

let fn = (a,b)=>{
    console.log(a+b);
};
fn(1,2);       //控制台打印3

上面的定义方法就是箭头函数
箭头函数由三个部分组成

1. 圆括号()，内容物就是函数的参数
2. 箭头=>，我个人理解为参数和函数的链接
3. 花括号{} ， 函数体

简单来说就是下面这样的形式

function /*函数名*/(/*参数*/){
    //函数体
}

// 这条注释上下的内容等价

(/*参数*/)=>{
    //函数体
}

匿名函数

函数还是那个函数，匿名还是那个匿名，直接上代码对比

(function(b){
    console.log(b);
})(20);             //控制台打印20
((a)=>{
    console.log(a);
})(10);             //控制台打印10

两个特殊情况

1. 如果只有一个函数参数，圆括号可以省略

//没有省略
let fn1 = (a)=>{
    console.log(a);
};
//省略
let fn2 = b =>{
    console.log(b);
};
fn1(10);
fn2(10);

2. 如果只有一个return，没有其他函数语句，花括号和return可以一起省略

//没有省略
let fn1 = (a,b) => {return a-b;};
//省略
let fn2 = (a,b) => a-b;
console.log(fn1(10,5));
console.log(fn2(10,5));

箭头函数与this

不要认为箭头函数只是一种简写，没有什么特定的场合，只是用来代替

var fn = function(){
    //函数体
};

但是呢，箭头函数被创造的初衷是为了解决this的指向问题。一般函数this指向在执行时绑定，箭头函数中的this是在定义函数的时候绑定。

箭头函数默认绑定的是外层的this，并且如果有多层对象件套，this会直指最外层。

const obj = {
    a: function() { console.log(this) },
    b: {
    	c: () => {console.log(this)}
	}
}
obj.a()   //obj
obj.b.c()  //window