JavaScript中，函数可以用箭头“=>”来定义，称之为箭头函数，有时候也称之为lambda表达式（lambda Expression）。箭头函数是一个匿名函数，其语法比函数表达式更简洁，相比函数表达式，箭头函数没有自己的 this、arguments、super或new.target。箭头函数更适用于那些需要匿名函数的地方，并且它不能用作构造函数。

1.基础语法

//多个参数
(param1, param2, …, paramN) => { statements }
//只有一个参数
(param) => { statements }
//当只有一个参数时，圆括号可以省略
param => { statements }
//函数体只有一条 return语句
(param1, param2, …, paramN) => { return expression; }
//当函数体只有一条 return语句时，可以省略 return关键字和函数体的花括号
(param1, param2, …, paramN) => expression
//没有参数的函数必须写一对圆括号
() => { statements }

2.高级语法

//加圆括号的函数体返回对象字面量表达式
params => ({foo: bar})
//支持剩余参数和默认参数
(param1, param2, …rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
    statements
}
//支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();　// 6

3.箭头函数不绑定 this

在普通函数中，this总是指向调用它的对象，如果是构造函数，this指向创建的对象实例。箭头函数本身没有 this，但是它在声明时可以捕获其所在上下文的 this。例如：

var msg = "hello";
let func = () => {
    console.log(this.msg);
}；
func();//hello

在上面的代码中，箭头函数在全局作用域声明，所以它捕获全局作用域中的 this，this.msg即得到全局作用域中的 msg的值"hello"。

4.箭头函数不会暴露arguments对象

普通函数调用后都具有一个 arguments 对象存储实际传递的参数，但是箭头函数没有这个对象。在大多数情况下，可以使用rest参数来代替arguments对象。例如：

念

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。为什么叫Arrow Function？

因为它的定义用的就是一个箭头：

x => x * x

示例相当于如下代码：

function (x) {
    return x * x;
}

JavaScript箭头函数是ECMAScript 6中引入的编写函数表达式的一种简便方法。

箭头函数的语法如下：

(parameters) => { statements }

如果没有参数，则表示一个箭头函数，如下所示：

() => { statements }

当您只有一个参数时，左括号是可选的：

parameters => { statements }

如果包含只返回返回表达式，请删除方括号：

parameters => expression

带来的好处

简洁的语法

让我们看一下常规函数：

function funcName(params) { 
  return params + 2; 
}
funcName(2); // 4

然后通过箭头函数精简之后为：

var funcName=params => params+2;
funcName(2); // 4

可以看到通过箭头函数实现之后，语法更加精简。

不绑定this

与常规函数不同，箭头函数不绑定this。相反，它是在词汇上绑定的(即this保持其原始上下文的含义)。

由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果：

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

但是，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：

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

使用箭头函数的限制条件

应用箭头函数时要注意的一些限制条件：

如果你尝试使用箭头函数作为构造函数，那么你会得到异常。请看下面的代码：

var foo = (name, age) => { name = name, age = age };
var f1 = new foo("cat", 6);

代码试图通过使用箭头函数foo作为构造函数来创建对象f1，JavaScript将抛出以下异常：

而且，当你试图输出箭头函数的原型值时，你会得到undefined的输出：

var foo = (name, age) => { name = name, age = age };
console.log(foo.prototype);

发生这种情况的原因是因为箭头函数没有原型属性。请记住：虽然箭头函数为你提供了编写函数表达式的简短方法，但它没有自己的this值，也不能用作构造函数。

端小白Earl笔记

箭头函数的基本语法

• 箭头函数属于函数表达式。箭头函数表达式的写法与函数申明以及普通函数表达式的写法有所不同。

//函数申明
function f1(){
    console.log('普通函数')
}
function f2(a, b){
    return a + b;
}

//普通函数表达式
let f1 = function(){
    console.log('普通函数')
}
let f2 = function(a, b){
    return a + b;
}

//箭头函数表达式
let f1 = () => {
    console.log('箭头函数')
}
let f2 = (a, b) => {
    return a + b;
}

• 箭头函数的函数体如果只有一个表达式，可以写成一行的简写体，省略return，直接返回该表达式。

//基础语法
let f2 = (a, b) => {
    return a + b;
}

//简写体
let f2 = (a, b) => a + b

• 箭头函数如果只有一个参数，可以省略小括号。

//基础语法
let f3 = (a) => {
    return a + 1;
}
let f4 = (a) => {
    console.log(a);
}

//简写体
let f3 = a => a + 1
let f4 = a => {
    console.log(a);
}

• 箭头函数的加小括号的函数体返回对象字面量表达式。

let f5 = age => ({Age: age})
console.log(f5(18))  // {Age: 18}

• 箭头函数支持参数列表解构。

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

箭头函数的特点

• 箭头函数表达式比普通函数表达式更简洁，指向性更强，可读性更好。
• 箭头函数属于表达式函数，因此不存在函数提升。
• 箭头函数相当于匿名函数，不能作为构造函数，不可以使用new命令。
• 箭头函数没有prototype属性。
• 箭头函数不绑定this，它只会从自己的作用域链的上一层继承 this。

var user1={
  name:'earl',
  fullname:function(){ return this.name }  // 'earl' 这里的this指向user1
}

var user2={
  name:'earl',
  fullname:()=>this.name  //'' 箭头函数没有定义this绑定，这里的this指向window
}

var user3={
  name:'earl',
  sleep:function(){ 
    console.log(this)   // 这里的this指向user3
    var fn = ()=>{console.log(this)} // 这里的this也指向user3
    fn()
  }  
}

• 使用call,apply,bind并不会改变箭头函数中的this指向。

window.name = "window_name";
let f1 = function () {
  return this.name
}
let f2 = () => this.name
let obj = { name: "obj_name" }

console.log(f1.call(obj))  //obj_name
console.log(f2.call(obj)) // window_name

• 箭头函数不绑定arguments，它只会从自己的作用域链的上一层继承arguments。箭头函数可以使用剩余参数。