每日一个前端小知识之箭头函数

1.箭头函数的介绍

箭头函数是ES6推出的一种新型函数，相对于ES5的普通函数的使用要更为简洁

2.箭头函数的基本语法

普通函数的语法格式

function (){}

箭头函数的语法格式

()=>{}

使用样例：

箭头函数的参数使用： 

①如果箭头函数没有参数，写空括号

//没有参数，写空括号
    let fn = () => {
        console.log('hello');
    };

②如果箭头函数有一个参数，也可以省去包裹参数的括号 

//只有一个参数，可以省去参数括号
    let fn = name => {
        console.log(`hello ${name}!`)
    };

 ③如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中。

    let fn = (val1, val2, val3, val4) => {
        return [val1, val2, val3, val4];
    }

 箭头函数的函数体：

①如果箭头函数的函数体只有一句执行代码，简单返回某个变量或者返回一个简单的js表达式，可以省去函数体花括号{ }

//返回某个简单变量val
let f = val => val;
// 等同于
let f = function (val) { return val };


//返回一个简单的js表达式num1+num2
let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
  return num1 + num2;
};

②如果箭头函数的函数体只有一句代码，返回的不是变量和简单的js表达式，而是一个对象。

//错误写法—花括号会被解释为函数体
    let getItem = id => {
        id: id,
        name: 'gaby'
    };
//正确写法
    let getItem = id => ({
        id: id,
        name: 'gaby'
    });

 ③如果箭头函数的函数体只有一条语句且不需要返回值（最常用于回调函数），加上void关键字

let fn = () => void doesNotReturn();

 我们不能为箭头函数命名是因为箭头函数是匿名的函数表达式（用完一次就丢掉），而普通函数可以做函数声明也可以做函数表达式，也不能用new去给匿名函数做一个重复使用的构造能力

3.什么是arguments

arguments式函数内部的一个类似数组的特殊对象，但是箭头函数没有arguments对象

4.普通函数与箭头函数this的指向规则

箭头函数没有自己的this指向，它会捕获自己定义所处的外层执行环境，并且继承这个this值。箭头函数的this指向在被定义的时候就确定了，之后永远都不会改变。如果此时有一个外层普通函数，那么箭头函数在定义的时候就会继承这个this。

例1：

    var id = 'Global';
    //普通函数
    function fn1() {
        setTimeout(function () {
            console.log(this.id)

        }, 1000);
    }
    //箭头函数
    function fn2() {
        setTimeout(() => {
            console.log(this.id)
        }, 1000);
    }

    fn1.call({
        id: 'obj'
    });//Global

    fn2.call({
        id: 'obj'
    });//obj

结果：先后会输出Global和obj

解析：普通函数的setTimeout 一秒后执行是在全局作用域，所有this指向window对象，this.id指向了全局变量id，输出Golbal。箭头函数的this在定义的时候就确定了，继承fn2的执行环境中的this，fn2的this指向被call方法改变绑定到obj这个对象

例2：

    var id = 'Global';
    var obj = {
        id: 'OBJ',
        a: function () {
            console.log(this.id)
        },//方法a普通函数定义
        b: () => {
            console.log(this.id)
        }//方法b用箭头函数定义
    };
    obj.a();//OBJ
    obj.b();//Global

结果：先后输出OBJ和Global

解析：普通函数作为对象的方法调用，this指向所属的对象（谁调用它就指向谁），this.id 就是obj.id；箭头函数继承定义它的执行环境的this，指向window对象，指向全局变量，输出Global。花括号{}无法形成一个单独的执行环境，所有它依然在全局中。

箭头函数的this是继承而来的永远不会变，call/apply/bind也无法改变

5.箭头函数与普通函数简单区别总结

（1）箭头函数语法更简洁清晰，快捷。

（2）箭头函数没有原型prototype，并不会自己创建this，并且this不能被修改，call等都不能修改到。只能间接修改被继承的this

（3）箭头函数的this在定义时就定了，继承外一层的普通函数

（4）如果箭头函数外一层再外一层都不能找到普通函数，在严格和非严格情况下都会指向window对象

（5）箭头函数的this指向全局，使用arguments会报未声明的错误

（6）箭头函数的this指向外一层的普通函数，使用argument继承该普通函数

（7）箭头函数不能构造函数，不能new.target，不能new，没有constructor

（8）箭头函数不支持重复命名参数，普通函数可以重复命名参数