ES6箭头函数详解

一、基本语法

参数

1. 如果箭头函数没有参数，直接写一个空括号即可。

   let fun1 = () => {
     console.log('fun1');
   };
   

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

   let fun2 = name => {
     console.log(`Hello ${name}`);
   };
   

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

   let fun3 = (x, y) => {
     console.log(`${x} + ${y} = ${x + y}`);
   };
   

函数体

1. 如果箭头函数的函数体只有一句代码，可以省去函数体的大括号{ }。

   let fun4 = (val) => val;
   
   

2. 如果箭头函数的函数体只有一句代码，就是返回一个对象，可以像下面这样写：

   let fun5 = (id) => ({ id: id, name: 'jack' });
   
   

3. 如果箭头函数的函数体只有一条语句并且不需要返回值（最常见是调用一个函数），可以给这条语句前面加一个void关键字

   let fun6 = () => void fun1();
   

模式

//  一个参数对应一个表达式
param => expression;// 例如 x => x+2;
​
// 多个参数对应一个表达式
(param [, param]) => expression; //例如 (x,y) => (x + y);
​
// 一个参数对应多个表示式
param => {statements;} //例如 x = > { x++; return x;};
​
//  多个参数对应多个表达式
([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;};
​
//表达式里没有参数
() => expression; //例如var flag = (() => 2)(); flag等于2
​
() => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1
​
 //传入一个表达式，返回一个对象
([param]) => ({ key: value });
//例如  var fuc = (x) => ({key:x})
        var object = fuc(1);
        alert(object);//{key:1}

二、箭头函数与普通函数区别

1. 语法更加简洁清晰；
2. 箭头函数不会创建自己的 this ，只会从自己的作用域链的上一层继承 this 。即捕获自己在定义时所处的外层执行环境的 this ，并继承这个 this 的值，所以箭头函数的 this 指向永远不会改变。

三、箭头函数的 this

箭头函数在运行时会首先到父作用域寻找 this 值，如果父作用域还是箭头函数，则接着向上找，直到找到 this 指向。

**例： **

var name = 'leo';
var teacher = {
  name: 'jack',
  showName: function () {
    let showTest = () => alert(this.name);
    showTest();
  },
};
teacher.showName();

箭头函数中的 this 其实是父级作用域中的 this 。箭头函数引用了父级的变量词法作用域就是一个变量的作用在定义的时候就已经被定义好，当在本作用域中找不到变量，就会一直向父作用域中查找，直到找到为止。

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

var obj = {
  birth: 1996,
  getAge: function (year) {
    var b = this.birth; // 1996
    var fn = (y) => y - this.birth; // this.birth仍是1996
    return fn.call({ birth: 1990 }, year);
  },
};
console.log(obj.getAge(2018)); // 22 （ 2018 - 1996）

四、箭头函数的特性

1. 箭头函数没有 arguments

箭头函数既没有自己的 this ，也没有 arguments ，如果获取到则是来自于父作用域的。

function foo() {
  return () => console.log(arguments)
}
​
foo(1, 2)(3, 4)  // 1，2

如果箭头函数有作用域，则应该输出3, 4。

** 箭头函数不绑定arguments，而是使用 rest 参数...来取代。 **

var foo = (...args) => {
  return args
}
​
console.log(foo(1,3,56,36,634,6))    // [1, 3, 56, 36, 634, 6]

2. 箭头函数不能作为构造函数

let Person = (name) => {
  this.name = name;
};
let one = new Person("galler");

构造函数的new执行以下步骤：

1. js 内部首先生成一个对象；
2. 将函数中的 this 指向该对象；
3. 执行构造函数中的语句；
4. 返回对象实例。

箭头函数在第二步已经无法执行，因为它没有自己的 this 。

3. 箭头函数可以与变量解构结合使用

const full = ({ first, last }) => first + ' ' + last;
​
// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}
​
 full({first: 1, last: 5}) // '1 5'

4. 箭头函数没有原型属性

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

function A() {
  this.foo = 1
}
​
A.prototype.bar = () => console.log(this.foo)
​
let a = new A()
a.bar()  //undefined

箭头函数中的 this 不是指向 A ，而是根据变量查找规则回溯到了全局作用域。

5. 箭头函数不能换行

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