ES6中的箭头函数

箭头函数对比传统函数：

	// 传统js中的函数
    function showName1() {
        console.log("name1");
    }
    // 箭头函数
    let showName2 = () => {
        console.log("name2");
    }
    showName1();//name1
    showName2();//name2

区别一：

传统js中的函数，存在变量的默认提升
箭头函数：由let定义，不存在变量提升，只能先定义，再调用

	showName1(); //name1
    showName2(); //报错
    function showName1() {
        console.log("name1");
    }
    // 箭头函数
    let showName2 = () => {
        console.log("name2");
    }

区别二：

在传统函数中this的指向性会随使用环境，不停发生变化，但是，箭头函数的this是静态的，始终指向声明时所在的作用域

传统函数中：

	// this指向window
    function showName() {
        console.log(this);
    }
    showName(); //Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

    // this指向obj
    let obj = {
        name: "wangyi",
        showName: showName
    }
    obj.showName(); //{name: "wangyi", showName: ƒ}

    // this指向button
    let bt1 = document.getElementsByTagName("button")[0];
    bt1.onclick = showName; //<button>点击</button>

箭头函数中：

	// this指向window
    let showName = () => {
        console.log(this);
    }
    showName(); //Window

    // this指向window
    let obj = {
        name: "wangyi",
        showName: showName
    }
    obj.showName(); //Window

    // this指向window
    let bt1 = document.getElementsByTagName("button")[0];
    bt1.onclick = showName; //Window 

区别三：

传统js中的函数，利用构造函数来创建对象，箭头函数不能作为构造函数
传统函数中：

	function Student(name, age) {
        this.name = name;
        this.age = age;
    }
    let s1 = new Student("王一", 21);
    console.log(s1);//Student {name: "王一", age: 21}

箭头函数中：

	let Student = (name, age) => { //构造函数Student
        this.name = name; //this指向window
        this.age = age;
    }
    let s1 = new Student("王一", 21); //new做了三步：1.自己创建了一个空对象 2.把构造函数中this的指向指到空对象上，同时把所有的属性挂载给空对象 3.return返回出来，赋值给s1这个变量
    console.log(s1); //报错：Student is not a constructor（构造器）

区别四：

传统js中的函数，存在arguments参数集合，箭头函数中没有

	// 传统函数中
    let sum=(a, b, c) {
        console.log(arguments);
    }
    sum(1, 2, 3, 5, 10); //Arguments(5)
    
    // 箭头函数中
    let sum = (a, b, c) => {
        console.log(arguments);
    }
    sum(1, 2, 3, 5, 10); //报错 arguments is not defined

箭头函数的应用：

	// 传统函数中：
    let box = document.getElementById("box");
    box.onclick = function () {
        setTimeout(function () {
            this.style.background = "green" //报错 此时this在定时器中指向windown
        }, 3000)
    }

    // 箭头函数中：
    let box = document.getElementById("box");
    box.onclick = function () {
        setTimeout(() => {
            this.style.background = "green" //此时箭头函数在box.onclick的函数内创建，this的指向性永远指向事件源box.onclick的函数
        }, 3000)
    }

总结：箭头函数 适用于 this 无关的问题：定时器，数组相关。。。
不适用于 this 相关的问题，事件的回调，对象的方法中

	// 传统函数：
    let obj = {
        name: "王一",
        showName: function () {
            console.log(this.name); //此时this指向obj对象
        }
    }
    obj.showName();//王一

    // 箭头函数：
    let obj = {
        name: "王一",
        showName: () => {
            console.log(this.name); //此时this指向showName函数
        }
    }
    obj.showName();