es6箭头函数

箭头函数只有表达式方式定义

1. 基本用法

ES6 允许使用“箭头”（=>）定义函数。

箭头函数

​ () => {

​ }

1.2 常用的使用方法

如果想写语句,那么语句的写法是这样的

() => {

​ 语句;

​ return;

}

这才是一个完整的箭头函数的写法

let show = (a,b) => {
    console.log(a,b);
    return a + b;
}
show();

2. 箭头函数注意点

箭头函数需要注意一下几点:

2.1 箭头函数的this指向

箭头函数没有自己的this，会查找父作用域this

let obj = {
    age: 18,
    show: function(){
        console.log(this.age);
    }
}
obj.show();   // 毋庸置疑 打印18 this 指向obj

// 如果换成箭头函数呢
var age = 20;
let obj = {
    age: 18,
    show: () =>{
        console.log(this.age);  // 20 箭头函数没有this  查找父作用域，这里是window
    }
}
obj.show();


// 关于this指向定义时作用域中的this
var a = 11;
function test(){
    this.a = 22; // this 指向test
    let b = () =>{
        console.log(this.a) // 22  箭头函数没有自己的this，父作用域为test
    }
    b()
}
var obj = new test();

// 如果我里面添加定时器
let obj = {
    age : 18,
    show: function(){
        setTimeout(function(){
            alert(this.age); // undefined  定时器里this指向window
        },2000)
    }
}
obj.show();

// 如果使用箭头函数呢
let obj = {
    age:18,
    show: function(){
        setTimeout(()=>{
            alert(this.age);  // 18  箭头函数没有自己的this，查找父作用域function，this指向obj
        },2000)
    }
}
obj.show();

箭头函数的this指向,函数定义时所在函数的this对象

因为箭头函数this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

2.2 箭头函数中的arguments

在箭头函数中没有arguments

// 普通函数
function show(){
    console.log(arguments);
}
show(1,2,3,4,5);  // Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 箭头函数
let show = () => {
    console.log(arguments);
}
show(1,2,3,4,5); // 报错
// Uncaught ReferenceError: arguments is not defined at show

那在箭头函数里面没有arguments,那用什么呢,可以用剩余参数

// 箭头函数
let show = (...args) => {
    console.log(args);
}
show(1,2,3,4,5);  // 打印 [1, 2, 3, 4, 5]

2.3 箭头函数不能到构造函数

因为箭头函数内部没有this,所有不能当成构造函数使用

// 普通的构造函数
function Show(){
    this.name = "abc";
}
let show = new Show();
console.log(show.name);  // abc

// 箭头函数
let Show = () => {
    this.name = "abc"
}
let show = new Show();
console.log(show.name);  // 报错  类型错误
// Uncaught TypeError: Show is not a constructor

2.4 总结一下

1. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
2. 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
3. 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

3. 函数参数的尾逗号

ES2017 允许函数的最后一个参数有尾逗号（trailing comma）。

这样的规定也使得，函数参数与数组和对象的尾逗号规则，保持一致了。

知道一点东西

function show(a,b,c,){
    console.log(a,b,c)
}
show(1,2,3,)
// 以前这么写会报错,参数最后不能加逗号结束
// 但是ES2017 以后就不报错了