箭头函数不仅仅是编写简洁代码的“捷径”。
它还具有非常分外且有用的特性。

JavaScript 充满了我们须要编写在其他地方实行的小函数的情形。

例如:

html箭头元素深刻懂得JavaScript中的箭头函数 SQL

arr.forEach(func) —— forEach 对每个数组元素都实行 func。
setTimeout(func) —— func 由内建调度器实行。
……还有更多。

JavaScript 的精髓在于创建一个函数并将其通报到某个地方。

在这样的函数中,我们常日不想离开当前高下文。
这便是箭头函数的主沙场啦。

一、箭头函数没有 “this”

正如我们在 工具方法,"this" 一章中所学到的,箭头函数没有 this。
如果访问 this,则会从外部获取。

例如,我们可以利用它在工具方法内部进行迭代:

let group = { title: "Our Group", students: ["John", "Pete", "Alice"], showList() { this.students.forEach( student => alert(this.title + ': ' + student) ); }};group.showList();

这里 forEach 中利用了箭头函数,以是个中的 this.title 实在和外部方法 showList 的完备一样。
那便是:group.title。

如果我们利用正常的函数,则会涌现缺点:

let group = { title: "Our Group", students: ["John", "Pete", "Alice"], showList() { this.students.forEach(function(student) { // Error: Cannot read property 'title' of undefined alert(this.title + ': ' + student) }); }};group.showList();

报错是由于 forEach 运行它里面的这个函数,但是这个函数的 this 为默认值 this=undefined,因此就涌现了考试测验访问 undefined.title 的情形。

但箭头函数就没事,由于它们没有 this。

不能对箭头函数进行 new 操作

不具有 this 自然也就意味着另一个限定:箭头函数不能用作布局器(constructor)。
不能用 new 调用它们。

箭头函数 VS bind

箭头函数 => 和利用 .bind(this) 调用的常规函数之间有细微的差别:

.bind(this) 创建了一个该函数的“绑定版本”。
箭头函数 => 没有创建任何绑定。
箭头函数只是没有 this。
this 的查找与常规变量的搜索办法完备相同:在外部词法环境中查找。
二、箭头函数没有 “arguments”

箭头函数也没有 arguments 变量。

当我们须要利用当前的 this 和 arguments 转发一个调用时,这对装饰器(decorators)来说非常有用。

例如,defer(f, ms) 得到了一个函数,并返回一个包装器,该包装器将调用延迟 ms 毫秒:

function defer(f, ms) { return function() { setTimeout(() => f.apply(this, arguments), ms) };}function sayHi(who) { alert('Hello, ' + who);}let sayHiDeferred = defer(sayHi, 2000);sayHiDeferred("John"); // 2 秒后显示:Hello, John

不用箭头函数的话,可以这么写:

function defer(f, ms) { return function(...args) { let ctx = this; setTimeout(function() { return f.apply(ctx, args); }, ms); };}

在这里,我们必须创建额外的变量 args 和 ctx,以便 setTimeout 内部的函数可以获取它们。

三、总结

箭头函数:

没有 this没有 arguments不能利用 new 进行调用它们也没有 super,但目前我们还没有学到它。
我们将在 类继续 一章中学习它。

这是由于,箭头函数是针对那些没有自己的“高下文”,但在当前高下文中起浸染的短代码的。
并且箭头函数确实在这种利用场景中大放异彩。