箭头函数

1.箭头函数

基本语法：
ES6允许使用“箭头”（=>）定义函数

var f = a = > a    类似与python中的lambda函数： 如 ----> f = lambda a : a
//等同于
var f = function(a){
   return a;  
}

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

//无形参
var f = () => 5;    如 ----> f = lambda : 5
// 等同于
var f = function () { return 5 };

//多个形参
var sum = (num1, num2) => num1 + num2;   如 ---->f = lambda num1, num2: num1 + num2
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

2.使用箭头函数注意点：

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

<script>
    var name = '张三';
    var person = {
        name: '小马哥',
        age: 18,
        fav: function () {
            // 当前的this 对象，在哪里使用，就是哪里的this
            console.log(this);
            console.log(this.name)
        }
    };
    person.fav();

    var person2 = {
        name: '小马哥',
        age: 18,
        fav: () => {
            // 当前this指向了定义时所在的对象（window），在window中定义的，所以this对象是window
            console.log(this, 'bb');
            console.log(this.name, 'aa')
        }
    };
    person2.fav();
</script>

结果对比

function foo() {
        setTimeout(() => {
            console.log('id:', this.id);
        }, 1000);
    }

    var id = 21;

    foo.call({id: 42}); # 该箭头函数是在foo中经过替换定义的
    foo()  # 该箭头函数的this是在window中定义的

结果为：
id: 42
id: 21

说明：
上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 1000毫秒后。
如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象
（本例是{id: 42}），所以输出的是42。

不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

var person3 = {
        name: '小马哥',
        age: 18,
        fav: (...rest) => {
            console.log(rest);
        }
    };

    person3.fav('把妹', '把爷', {'a': 'a'});
说明： ...rest 接收不定长参数，并且只能放在参数的最后一位