ES6中的箭头函数表达式

在react中使用了一些ES6的语法，在此总结一下！借鉴了好多大神写的博客，如有雷同，勿喷！仅用于个人学习总结！谢谢
主要借鉴如下站点：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
廖雪峰老师的站点：
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001438565969057627e5435793645b7acaee3b6869d1374000

---

箭头函数表达式

一、箭头函数的定义：

x => x+x;

上面的函数相当于：

function(x){
    return x+x;
}

二、箭头函数的语法：

1. 基本语法：

param1，param2，param3，...，paramN）=> {statements}
(param1，param2，param3,...，paramN) => 表达式
//等价于 =>{return : expression}

当只有一个参数当时候，括号是可选的。反之，多个参数必须加上括号：
(singleParam）=> {statements} 或 singleParam => {statements}

没有参数的时候可以直接写一对小括号： 
() => {statements}

2. 高级语法：

以下相关内容具体可参考：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

括号化函数体,返回对象文字表达式：
注意：如果要返回的对象是一个单表达式，必须使用括号,否则会报错
params =>{ECMAScript:"test"}   // SyntaxError:
params => ({ECMAScript:"test"})  // ok

// 其余的力学参数和默认参数都支持
(param1，param2，... rest）=> {statements} 
(param1 = defaultValue1，param2，...，paramN = defaultValueN）=> {陈述}

// 解构的参数列表中也支持
var f =（[a，b] = [1,2]，{x：c} = {x：a + b}）=> a + b + c;
F（）; // 6

三、箭头函数的优势

箭头函数的语句较短并且不具约束力this.

1.语句相对简短

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(function(element ) { 
  return element.length; 
}); // [8, 6, 7, 9]

elements.map(element => {
  return element.length;
}); // [8, 6, 7, 9]

elements.map(({ length }) => length); // [8, 6, 7, 9]

2.箭头函数中没有单独的this

箭头函数看上去类似匿名函数的简写，但是这其中有一个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
例如：如下文中this只向的是window，所以无法得到我们预期的结果

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};

现在箭头函数修复了this的指向，修改代码如下：即可获得预期结果

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

使用了箭头函数，以前的hack的写法就不需要了

var that = this;

由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略：

var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25

四、使用箭头函数需要注意几个问题

1.箭头函数不能用作构造函数，并且使用时会抛出错误

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

2.箭头函数没有prototype属性

var Foo = () => {};
console.log(Foo.prototype); // undefined

3.在简洁的主体中，只指定了一个表达式，该表达式为显式返回值。在块体中，必须使用显式return语句。

var func = x => x * x;                  
// 只有一个表达式的时候可以直接写 x*x；

var func = (x, y) => { return x + y; }; 
// 当参数有两个，则必须使用return语句；

4.箭头函数不能在其参数与其箭头之间包含换行符。

var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'

文中主要借鉴了上面的两个官网！仅用作个人学习！