箭头函数（Arrow Function）

箭头函数（Arrow Function）

箭头函数表达式的语法比>函数表达式更短，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。

首先，我们先来看一个普通函数：

function show(){
    return 1
}    
console.log(show())
//1

上述的函数转化为箭头函数为：

let show=()=>1;
console.log(show())
//1
//但是，这样的箭头函数没什么实用性。

下面，通过一个小例子来了解箭头函数的解构以及简单用法：

let result=(x,y)=>{
    //(x,y)为函数传入的参数
    console.log(x,y);//2,3
    //此处写函数执行语句
    
    return x*y
}
console.log(result(2,3)) //6

所以，箭头函数的语法格式有：

(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

//加括号的函数体返回对象字面表达式：
参数=> ({foo: bar})

//支持剩余参数和默认参数
(参数1, 参数2, ...rest) => {函数声明}
(参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

箭头函数的this指向

var id=1001;
//定义全局变量时 必须用var
let json={
    id:2002,
    show:function(){
        setTimeout(function(){
            console.log(this.id) //1001
            //结果1001是因为setTimeout是由Window执行的，属于全局作用域。
        },2000)
    }
}
json.show()
//若想this指向2002，则需要把this重新定义成that。

上述中的情况可以直接用箭头函数使this指向它的所在 范围：

var id=1001;
let json={
    id:2002,
    show:function(){
        setTimeout(()=>{
            console.log(this.id)//2002
        },2000)
    }
}
json.show()
//箭头函数的this指向是定义函数所在的对象。
//用了箭头函数，this是指向它所在的箭头函数范围。

箭头函数内部的this是词法作用域，由上下文确定。

使用new操作符

箭头函数***不能***用作构造器，和 new一起用会抛出错误。

var fn = () => {};
var fn = new fn(); // TypeError: fn is not a constructor

使用prototype属性

箭头函数***没有***prototype属性。

var fn = () => {};
console.log(fn.prototype); // undefined

以上，就是通过几个例子分析了箭头函数的基本用法，箭头函数在以后的使用中十分重要。