学习易错笔记之箭头函数

一.箭头函数和普通函数的区别：

基本格式：

普通函数：function（）{}

箭头函数：（）=>{}

两者的公共点是（）里写参数，{}里写函数体。当参数只有一个时箭头函数的（）可以省略,如果函数体中只有返回值时可以省略大括号和return。以下是一个例子：

普通函数： 

箭头函数：

 省略后可以写成：

不能为箭头函数命名，它是匿名的,箭头函数不能用new来创建构造函数的实例，普通函数可以（因为箭头函数创建的时候程序不会为它创建construct方法，也就是没有构造能力，用完就丢掉了，不像普通函数重复利用，因此也不需要构造函数原型，也就是不会自动生成prototype属性）

 程序不会给箭头函数创建arguments对象：

 不过箭头函数可以使用闭包来实现类似效果：

 这里normal是普通函数，它返回了一个箭头函数，以为作用域链的关系箭头函数保存了argument的长度，最后返回了结果。

2.this指向不同：普通函数在调用时才确定指向--被谁调用this就指向谁(永远指向最后一个调用它的那个对象)，是动态的。而箭头函数是在定义时就确定了指向，在哪里定义，就指向谁。

例如，定义一个对象想让他延迟0.5s输出名字：

如果这么写就不能输出名字，因为在函数执行时this才确定指向，这里它指向的是setTimeout的执行者----widow，所以无法输出“我是小明”。 可以这么改进：

插一句模板字符串：

被注释的是es6的模板字符串写法，下一行是es5写法，两者功能一样。

而如果使用箭头函数可以这么写：

因为箭头函数的this在定义时确定，这里的this指向的是obj对象， 所以可以得到正确的结果。箭头函数的this会指向在它定义时包裹它的外层函数的对象，若没有外层函数则指向widow。

这里普通函数这里的this指向的是widow会输出undefined，而箭头函数指向外层的arrow，可以正常输出。再看下面一个例子：

 这里红框里第一个this的指向是icecream对象，所以这里的this.flavor是没有问题的，但是第二个this指向的是CodePen（此时正在调用的函数是CodePen），所以我们得到的结果是：

 我们得到了CodePen对象的name，也就是CodePen。这种情况我们可以用bind来解决问题：

 而用箭头函数的话就很简单了：

箭头函数的this指向在定义时确定，第二个this和第一个this一样都指向icecream，所以不会出现之前的问题。箭头函数不能通关call，apply，bind来改变this的值，但是他也可以调用call，apply，bind方法.

总结：

另外箭头函数也没用super和new.target绑定,和argument一样，Super和new.target的值由最近那一层包围的普通函数所决定的。