JavaScript ES6为JavaScript语言添加了许多新功能，其中一些功能比其他功能更具开创性和广泛应用。
例如
ES6 Classes之类的
东西
，虽然新颖，但只是在现有的方法基础上添加语法糖，以便在JavaScript中创建类，而像Generators这样的功能虽然功能非常强大，但却保留用于更专业的任务。
1）JavaScript箭头功能
ES6 JavaScript中我最喜欢的一个新功能并不是一个新功能，而是一个令人耳目一新的新语法集，每次我使用它时都会在我脸上露出笑容。
我在谈论Arrow函数，它提供了一种在JavaScript中定义匿名函数的极其优雅和简约的方法。
简而言之，Arrow函数会删除“
function
”关键字，并使用箭头（
=>
）
将函数
的
参数部分与
匿名
函数
的函数BODY
分开
：
|
1
|
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>（x，y）=> x * y;</font></font>
|
这相当于：
|
1
2
3
|
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
function
（x，y）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
返回x * y;</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
}</font></font>
|
要么：
|
1
2
3
4
|
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>（x，y）=> {</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
var
factor = 5;</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
var
growth =（xy）* factor;</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
}</font></font>
|
这与：
|
1
2
3
4
|
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
function
（x，y）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
var
factor = 5;</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
var
growth =（xy）* factor;</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
}</font></font>
|
使用传统的匿名函数时，箭头函数也会删除错误的关键源，这是
this
函数内部
“
”对象的值。
使用箭头函数，“
this
”是词法绑定的，这
只是一种说法，它的值与父作用域绑定，并且从不改变。
如果
在自定义对象“
”中
定义
了
箭头
函数，则“
countup
”的值
this
指向“
countup
” - 不需要猜测。
例如：
|
1
2
3
4
五
6
7
8
9
10
11
|
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
var
countup = {</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
柜台：15，</font></font><font></font>
<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
开始：函数（）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
window.addEventListener（
'click'
，（）=> {</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
alert（
this
.counter）
}）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
}</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
};</font></font><font></font>
<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
countup.start（）;</font></font>
|
将其与传统的匿名函数进行比较，其中“
this
”
的值
根据其定义的上下文而变化。
this.counter
在上述情况下
尝试引用时的结果
将返回
undefined
，这种行为可能会混淆许多不熟悉动态错综复杂的行为捆绑。
使用箭头功能，“
this
”
的值
始终可预测且易于推断。
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69933200/viewspace-2649532/
，如需转载，请注明出处，否则将追究法律责任。
