新版语法 - 箭头函数 ¶

• 作者：KK

• 发表日期：2018.10.14

要点速读 ¶

• function(a, b){ return 1 + b - a }等同于(a, b) => 1 + b - a，你当成是函数的简写方式。

介绍 ¶

由于写JS的时候经常要用到函数，比如xxx.click(function(){ ... })，为了简化这种编码工作，在ES2016中推出了箭头函数：

xxx.click(function(参数1, 参数2){
    return 参数1 + 参数2;
})

xxx.click((参数1, 参数2) => {
    return 参数1 + 参数2;
}) //这样

xxx.click((参数1, 参数2) => 参数1 + 参数2) //这样也行，省了return
xxx.click((参数1, 参数2) => ({a: 参数1, b:参数2})) //如果要返回一个对象，由于对象有花括号包住可能会干扰原来的语法，于是外层包个括号就好了
xxx.click(只有一个参数 => 只有一个参数 + 999) //一个参数就连参数表的括号都可以省了

总的来说我个人觉得太繁杂……不太理解为什么要搞这么多种，让人有点不适应。

this指向上一级上下文，没有arguments ¶

let obj = {
    age: 999,

    aaa: function(){
        console.log(this.age); // 999
        console.log(arguments); // x y z
    },
    
    bbb: () => {
        console.log(this.age); // undefined  因为this不是指向obj，而指向调用这个方法的空间，bbb在() 哪里调用？在全局，全局属于window的空间，所以this指向了window
        console.log(arguments); //报错说这个不存在
    }
};

obj.aaa('x', 'y', 'z');
obj.bbb('x', 'y', 'z');

所以如果jQuery里面的事件要用到this来访问 dom 对象的话，就不能用箭头函数了，原则上我所有 jQuery 事件回调都不会用箭头函数；但是大部分其它回调还是可以用的，比如 ajax 的回调，以及 node.js 各种模块的回调。