箭头函数详解

箭头函数详解

什么是箭头函数

箭头函数是ES6的新特性，箭头函数本质上也是一个匿名函数。箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
创造箭头函数的初衷就是为了简化函数的定义，以及规避this指向带来的问题。

1. 写法：

x => x * x
1

相当于：

function (x) {
    return x * x;
}
1
2
3

2. 如果使用箭头函数，以前的那种hack写法就不再需要了。

var that = this; // 不再需要这样的写法
1

箭头函数的原理

实现原理还没找到，后续补充

箭头函数的特点（和普通函数的区别）

1. this指向：

   • 普通函数this指向：
     指向它的调用者，如果没有调用者则默认指向window
   • 箭头函数指向：
     箭头函数本身并无this，箭头函数的this由定义箭头函数时所处的作用域决定，即箭头函数的this永远指向定义箭头函数时所在的作用域的this（也可以说是上层作用域，强调的是作用域！）。箭头函数的this只和定义时的作用域this有关，和调用者无关，和调用环境无关，也永远不会改变（因此不能使用call\apply\bind改变箭头函数的this指向）。
     MDN的解释：箭头函数不会创建自己的this，所以它没有自己的this，它只会从自己的作用域链的上一层继承this。

2. 箭头函数不能当构造函数，用的话会抛出一个错误（因此也不能使用new关键字）

   var Fun = (name, age) => { this.name = name; this.age = age; };
   var foo = new Foo('张三', 20); // TypeError: Foo is not a constructor
   1
   2

   我们先了解一下构造函数的new都做了些什么？简单来说，分为四步：

   ① JS内部首先会先生成一个对象；

   ② 再把函数中的this指向该对象；

   ③ 然后执行构造函数中的语句；

   ④ 最终返回该对象实例。

   但是！！因为箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会随在哪里调用、被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用new调用时会报错！

3. 箭头函数没有 prototype 属性

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

4. 箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。

   // 例子一
   let fun = (val) => {
       console.log(val);   // 111
       // 下面一行会报错
       // Uncaught ReferenceError: arguments is not defined
       // 因为外层全局环境没有arguments对象
       console.log(arguments); 
   };
   fun(111);
   
   // 例子二
   function outer(val1, val2) {
       let argOut = arguments;
       console.log(argOut);    // ①
       let fun = () => {
           let argIn = arguments;
           console.log(argIn);     // ②
           console.log(argOut === argIn);  // ③
       };
       fun();
   }
   outer(111, 222);
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22

   依据上面的输出结果，
   很明显，普通函数outer内部的箭头函数fun中的arguments对象，其实是沿作用域链向上访问的外层outer函数的arguments对象。

   但是，我们可以在箭头函数中使用rest参数（也叫剩余参数）代替arguments对象，即通过（形式为： …rest）来访问箭头函数的参数列表！！

   function foo(...arg) { 
     return arg; 
   }
     foo(1, 2, 3, 4); // 1
   1
   2
   3
   4

   function foo(...numbers) { 
     numbers.forEach((number)=>{
   	console.log(number);
     })
   } 
   foo(1, 2, 3, 4);  // 1 2 3 4
   1
   2
   3
   4
   5
   6

5. 无法使用yield命令，yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内），所以箭头函数无法用作Generator函数

6. 因为没有自己的this，所以没法通过bind、call、apply来改变this指向

7. 但是这不代表箭头函数的this指向是静态的，我们可以通过改变它外层代码库的this指向来控制

8. 箭头函数的this从外层代码库继承，所以箭头函数的this是在定义的时候就绑定好了的，而普通函数是在调用的时候确定this指向

9. 字面量对象中直接定义的箭头函数的this不绑定该对象，而是往外找一层，最简单的情况是绑定到window（因为对象字面量形成不了作用域）

10. 只有一个参数的时候，参数可以不加小括号，没有参数或2个及以上参数的，必须加上小括号

11. 返回语句只有一条的时候可以不写{}和return，会自动加上return的，返回多条语句时必须加上{}和return

12. 箭头函数在返回对象的时候必须在对象外面加上小括号
    记住用params => {object:literal}这种简单的语法返回对象字面量是行不通的。

    var func = () => { foo: 1 };
    // Calling func() returns undefined!
    
    var func = () => { foo: function() {} };
    // SyntaxError: function statement requires a name
    1
    2
    3
    4
    5

    这是因为花括号（{} ）里面的代码被解析为一系列语句（即 foo 被认为是一个标签，而非对象字面量的组成部分）。

    所以，记得用圆括号把对象字面量包起来：

    var func = () => ({foo: 1});
    1

13. 箭头函数位于构造函数内部，它的定义生效的时候，是在构造函数执行的时候。这时，箭头函数所在的运行环境，肯定是实例对象，所以this会总是指向实例对象。

14. 箭头函数是匿名函数，普通函数可以是匿名函数也可以是具名函数