箭头函数

箭头函数没有自己的this，arguments，super或new.target。箭头函数适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

1.基础语法

（param1, param2, ..., paramN） => { statements }

(param1, param2, ..., paramN) => expression
//相当于： （param1， param2, ..., paramN） => {return expression}
//当函数体内只有一句代码时，retrun 和 {}可以省略

//当只有一个参数时，圆括号也是可选的, 可省略
（singleParam） => {statements}
  singleParam => {statements}
//没有参数的函数应该写成一对圆括号
() => {statements}
　　//空的箭头函数返回undefined
10　let empty = () => {};

1.1.返回对象时要加括号

params => ({foo: bar}) //返回对象字面量表达式

1.2.支持剩余参数和默认参数

（param1, param2, ...rest） => {statements}
(param1=defaultValue1, param2, ..., paramN=defaultValueN) => {statements}

1.3.支持参数列表解构

let f = ([a, b] = [1, 2], {x: c} = {x : a + b}) => a + b + c;
f(); //6

2.箭头函数不绑定this

普通函数是根据它是如何被调用的来定义这个函数的this值

• 如果该函数是一个构造函数，this指向一个新的对象(实例对象）
• 在严格模式下的函数调用，this指向undefined
• 如果该函数是一个对象的方法，则它指向这个对象

2.1箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。

function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++;  // this 指向p 实例
    }, 1000);
}

var p = new Person();

2.2通过 call 或 apply 调用时

由于箭头函数没有自己的 this，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this），它们的第一个参数会被忽略。(这种现象对bind方法也成立)

var adder = {
    base: 1,
    
    add: function(a) {
        var f = v => v + this.base;
        return f(a);
    },
    
    addThruCall: function(a) {
        var f = v => v + this.base;
        var b = {
            base: 2
        };
         return f.call(b, a);
    }
};

console.log(adder.add(1));  //2
console.log(adder.addThruCall(1))  // 2

3.不绑定arguments

箭头函数不绑定Arguments对象。不可以使用arguments对象，该对象在函数体内不存在。

function foo(n) {
   var f = () => arguments[0] + n; //隐式绑定 foo 函数的 arguments 对象。arguments[0] 是 n, 即传给foo函数的第一个参数
   return f();
}

foo(1); //2
foo(2); //4
foo(3); //6
foo(3,2); //6

 在大多数情况下，使用剩余参数是相较使用arguments对象的更好选择。

function foo(arg) {
    var f = (..args) => args[0];
    return f(arg);
}

foo(1);  //1

function foo(arg1, arg2) {
    var f = (...args) => args[1];
    return f(arg1, arg2);
}

foo(1, 2);  //2

4.箭头函数不能用作构造函数，和new一起使用会抛出错误。

5.箭头函数没有prototype属性

6.箭头函数不能用作函数生成器，因为yield关键字通常不能再箭头函数中使用(除非是嵌套在允许使用的函数内)。

7.箭头函数不适合用作对象的方法

'use strict';
var obj = {
    i: 10,
    b: () => console.log(this.i, this),
    c: function() {
        console.log(this.i, this);
    }
}

obj.b(); //undefined, window{...}
obj.c(); //10, Object{...}


var obj = {
    a: 10
};

Object.defineProperty(obj, "b", {
    get: () => {
        console.log(this.a, typeof this.a, this);
        return this.a + 10;
        //this 代表全局对象 'window', 因此，'this.a' 返回 'undefined'
    }
});
obj.b;  //undefined "undefined" Window{postMessage: f, blur: f, focus: ƒ, close: ƒ, frames: Window, …}

8.箭头函数的解析顺序

箭头函数具有与常规函数不同的特殊运算符优先级解析规则

let callback;

callback = callback || function() {};  //ok

callback = callback || () => {}; //SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});  //ok

9.箭头函数使用三元运算符：

var simple = a => a > 15 ? 15 : a;

simple(16); //15
simple(10); //10


let max = (a, b) => a > b ? a : b;

10.箭头函数内定义的变量及作用域

//常规写法
var greeting = () => {let now = new Date(); return ("Good" + ((now.getHours() > 17) ? "evening." : "day."));}
greeting();          //"Good day."
console.log(now);    // ReferenceError: now is not defined 标准的let作用域

//参数括号内定义的变量是局部变量（默认参数）
var greeting = (now=new Date()) = > "Good" + (now.getHours() > 17 ? "evening." : "day.);
greeting();          //"Good day."
console.log(now);    // ReferenceError: now is not defined

//对比： 函数体内{}不使用var定义的变量是全局变量
var greeting = () => {now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting();           //"Good day."
console.log(now);     // Fri Dec 22 2017 10:01:00 GMT+0800 (中国标准时间)

//对比： 函数体内{} 用var定义的变量是局部变量
var greeting = () => {var now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting(); //"Good day."
console.log(now);    // ReferenceError: now is not defined

11.箭头函数可以使用闭包

//标准的闭包函数
function A() {
    var i = 0;
    return function b() {
        return (++i);
    };
}

var v =A();
v();  //1
v(); //2

//箭头函数的闭包（i=0 是默认参数）
var Add = (i=0) => {return (() => (++i))};
var v = Add();
v(); //1
v(); //2

12.箭头函数递归

var fact = (x) => (x == 0 ? 1 : x*fact(x-1));

fact(5);  //120