箭头函数的使用

一、复习函数

1、函数的定义

var  fn=function(){}
var obj={
    name:"zhou "
    say:function(){}
}

2、函数的声明（直接在写function）除开这种方式，其余全是函数的定义

function  fn(){}

箭头函数

var fn=(a,b)=>{
    return  a+b;

}
var re= fn(10,20);
console.log(re);//30

1、函数与this的连用

    var fn=(a,b)=>{
   
        console.log(this ,1111);
        return  a+b;
}
    // var re= fn(10,20);
    var obj={
        name:"zhou",
        fn
    }
    obj.fn(10,20);
结果是window

原因：this是离他最近的嵌套function/方法这个函数的调用者，直到顶层没有就是window

和普通的函数有一个区别就是要多一层函数|function

var obj={
        name:"zhou",
        say:function(){
            var fn=(a)=>{
                console.log(this,111);
            }
            fn(10)
        }
    }
    obj.say();//obj

2、可以省略(不是很建议)

如果箭头函数只有一个参数体可以省略小括号，代码块只有return可以省略{}

var fn= a=>a*10
console.log(fn(3));//30
即：
var fn= （a）=>{
    return a*10
}
console.log(fn(3));//30

2、不能创作对象

原因：因为this不是箭头函数的调用者，用this添加的成员会变成window的成员，而不是对象的成员

3、当实参比形参多，不能用arguments，我们可以用以下这个方法

var fn=(a,...x)=>{
    console.log(a,x)
}
   fn(10,20,30);

结果：

 解释：当实参比形参多，可以用...x（名字随便取）来装多的实参，但是是以数组的形式，如果实参和形参一样那就是空数组，而不是undefined,剩余参数必放在...x里面

使用的场景

ES6 之前，JavaScript 的 this 对象一直很令人头大，回调函数，经常看到 var self = this 这样的代码，为了将外部 this 传递到回调函数中，那么有了箭头函数，就不需要这样做了，直接使用 this 就行。

所以，当我们需要维护一个 this 上下文的时候，就可以使用箭头函数。

总结：

• 要有个箭头

• 箭头的前面是小括号，放形参，只有一个形参的时候可以省略小括号；

• 箭头的后面是函数体；

• 如果函数体只有一个语句，没有{}，此时的返回值不需要return；

• 箭头函数里面的this总是指向最靠近的function 内部的this；

• 对象里面的方法，尽可能不要使用箭头函数；

• 箭头函数里面没有arguments，可以使用…reset，接收过来就是数组类型，接收的是形参之外的所有的实参；