箭头函数（优化函数写法）

1.声明式函数。

没有赋值，不能优化了。

2.函数表达式。

原型：

（1）优化：去掉function关键字，在小括号和大括号中间加上箭头。

箭头左边是参数（），右边是方法体{大括号包着的就叫方法体}

（2）优化：当方法体内部只有一行代码时，连大括号也不需要，return也不需要。

箭头函数标准写法：

（1）无参数

（2）2个参数

（3）1个参数时，小括号都可以省了。

我们来实现一个点击按钮的效果。

补充：addEventListener（）事件可以监听到用户点击了多少次。

image.png

普通函数下this指向当前对象

接下来让我们来优化函数代码，让其变成箭头函数。

看下效果：

哦嚯！为什么报错了？

这是因为this指向对于当前对象的引用，在箭头函数里面，是没有this指向的。

所以箭头函数有特定的适用场景，并不是任何场景都可以使用箭头函数去优化代码，箭头函数里面的this指向跟普通函数的this指向是不同的。

(1)把箭头函数作为事件的回调函数去写，this指向不是再是当前对象，而是window

（2）我们来做个判断就知道了。

所以箭头函数里面的this指向真的是指到顶层window当中去的。

案例：对象中的属性和方法，如何优雅地使用箭头函数。
原型：

（1）使用箭头函数优化后：

依旧是同样一种情况，箭头函数不要使用this指向。

因为箭头函数里面的this指向是window.

注意这里有一个巧合，window下面有一个默认的name属性的，我们将其展开看看，找到它。

所以我们不要在对象里面使用name（当你使用了箭头函数）
所以我们的原型要修改下：

（2）继续优化：关于ES6对象的简写形式，对于对象中的方法可以将其冒号去掉，function关键字可以去掉。
前后对比以下：

前

后

应用场景3

原型：

在普通函数下，控制台可以返回arguments.
（1）修改成箭头函数后。

这报错是说：箭头函数里面不能使用ararguments

应用场景4 类,有点像构造函数和构造对象。

(1)es5写法:

（2）箭头函数写法。

报错：不能使用箭头函数作为构造函数。

拓展es6语法：模板字符串拼接，使用反引号包裹${引用的变量}，取代了双引号和单引号。

（2）箭头函数下：

同理，箭头函数下，this指向永远是window对象。
经过这么多的例子，说明this指向在箭头函数里面水火不容阿，有箭头函数就不能用this了，切记。

总结：箭头函数如下几个场景不能使用this指向。

1.作为事件的回调函数不能用this指向。
2.通过箭头函数去定义对象里面的方法，不能用this指向。
3.通过箭头函数去定义的函数不能使用arguments对象。
4.箭头函数不能作为构造函数使用。
5.箭头函数不能去定义原型下面的方法。