ES6箭头函数

一. 基本用法
以前的函数定义

let func = function() { 
    console.log('ES5')
}

箭头函数

let func = () => {  // 没有参数
    console.log('ES6箭头函数没有参数时')
}
let func = (a, b) => { // 有参数
    console.log('ES6箭头函数有参数时')
}

二. 箭头函数特性
1. this指向性

var a = '这是全局变量a'
var obj = {
    a: '这是局部变量a',
    func1: function() {
        console.log(this.a)
    },
    func2: () => {
        console.log(this.a)
    }
}
obj.func1() // 这是局部变量a
obj.func2() // 这是全局变量a

普通函数的this指向最近的一个对象，而箭头函数的this实际上是指向定义时的this
我们再把上面函数改造一下

var obj = {
    a: '这是局部变量a',
    func1: function() {
        console.log(this.a)
    },
    func2: () => {
        console.log(this.a)
    }
}
obj.func1() // 这是局部变量
obj.func2() // undefined

此时箭头函数是指向全局的，这里的fn1和fn2都是全局函数，所以箭头函数this指向的是定义时的全局，全局没有变量a则输出undefined,而普通函数的this指向的是最近的一个对象
我们再来看一个例子：

this.a = '全局a';
function Timer() {
    this.a = 'timer中的a';
    // 普通函数
    setTimeout(function () {
        console.log('普通函数:', this.a);
    });
    // 箭头函数
    setTimeout(() => {
        console.log('箭头函数:',this.a);
    });
}
new Timer();

输出结果：
普通函数: 全局a
箭头函数: timer中的a
这里普通函数会指向全局是因为，距离普通函数最近的对象是setTimeOut,而setTimeOut是挂在全局作用域中，所以普通函数指向全局，箭头函数指向的是定义时的对象，箭头函数是在Timer中定义的，所以箭头函数指向Timer
我们再来改造一下这个函数：

this.a = '全局a';
function Timer() {
    this.a = 'timer中的a';
    // 普通函数
    setTimeout(function () {
        console.log('普通函数:', this.a);
    });

    // 箭头函数
    setTimeout(() => {
        console.log('箭头函数:',this.a);
    });
}
Timer();

输出结果：

普通函数: timer中的a
箭头函数: timer中的a

这个是为什么呢，因为如果是new Timer相当于是构造函数，构造了一个对象，如果是Timer()就相当于是调用函数Timer()这两者还是有区别的，如果是调用函数Timer()，这个时候this的指向都是全局，在局部修改this.a会覆盖全局的this.a

通过以上，我们可以知道普通函数跟箭头函数this指向的区别是：

普通函数：this指向最靠近的一个对象

箭头函数：this指向定义时的对象，也就是说箭头函数一旦定义完成，它的指向是固定的，没法改变，它的指向是定义时所在的作用域，而不是执行时的作用域
2. 不可以当做构造函数
箭头函数不可以当做构造函数，也就是不可以new一个，否则会报错。
因为箭头函数本身没有属于自己的this，所以箭头函数不可以当做构造函数，也因为箭头函数没有自己的this，所以call()、apply()、bind()这些方法去改变this的指向对箭头函数也是无效的