ES6 箭头函数

普通函数

• 命名函数

function fn1(a){
    console.log(a);//6
}
fn1(6);

• 字面量的形式

var fn2 = function(a){
    console.log(a);
}
fn2(3);//3

箭头函数

• 多个参数

var fn3 = (a,b) =>{
    console.log(a,b);//10   11
}
fn3(10,11);

• 一个参数

//没有参数的时候，可以省略括号
var fn4 = a =>{
    console.log(a);//8
}
fn4(8);

• 没有参数

//没有参数的时候，不能省略括号
var fn5 = () =>{
    console.log(123);//123
}
fn5();

案列

function aa (){//正常函数
    return 123;
}
let aa1 = () =>123;//箭头函数
//箭头函数中如果只有一条 return 语句，则可以省略大括号
//如果这个箭头函数有且只有一个形参，则小括号也可以省略

点击函数

btn.onclick = function(){ 
    console.log(this);//标签
}
btn1.onclick =() =>{ 
    console.log(this);//window
}
//一般绑定事件函数的时候，不要使用箭头函数

• 总结
  1 普通函数，谁调用我，我的this指向谁
  2 箭头函数，我在谁里面被定义，我的this就指向谁

btn.onclick = function(){
    btn1.onclick = function(){
        console.log(this);//btn1标签
    }
    btn1.onclick = () =>{
        console.log(this);//btn标签
    }
//当内部函数使用箭头函数时，不会改变外部函数的this指向
}