JavaScript Arrow函数教程

箭头功能是ES6 / ES2015中最具影响力的更改之一,如今已广泛使用。它们与常规功能略有不同。了解如何

在ES6 / ECMAScript 2015中引入了Arrow函数,自从引入以来,它们就永远改变了JavaScript代码的外观(和工作方式)。

我认为此更改非常受欢迎,以至于您现在几乎看不到function现代代码库中的关键字。尽管那仍然有它的用法。

从视觉上看,这是一个简单而值得欢迎的更改,它使您可以使用较短的语法来编写函数,这些函数来自:

const myFunction = function() {
  //...
}

const myFunction = () => {
  //...
}

如果函数主体仅包含一条语句,则可以省略方括号,并将所有内容写在一行上:

const myFunction = () => doSomething()

参数在括号中传递:

const myFunction = (param1, param2) => doSomething(param1, param2)

如果有一个(只有一个)参数,则可以完全省略括号:

const myFunction = param => doSomething(param)

由于这种简短的语法,箭头功能鼓励使用小功能

隐式回报

箭头函数可让您隐式返回:无需使用return关键词。

当函数体中有单行语句时,它可以工作:

const myFunction = () => 'test'

myFunction() //‘test’

另一个示例,在返回对象时,请记住将花括号括在括号中,以避免将其视为包裹函数的主体括号:

const myFunction = () => ({ value: 'test' })

myFunction() //{value: ‘test’}

如何this在箭头功能中工作

this这是一个很难理解的概念,因为它随上下文的不同而变化很大,并且还取决于JavaScript的模式(严格模式或不)。

弄清这个概念很重要,因为箭头功能与常规功能的行为大不相同。

当定义为对象的方法时,在常规函数中this引用对象,因此您可以执行以下操作:

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: function() {
    return `${this.manufacturer} ${this.model}`
  }
}

呼唤car.fullName()将返回"Ford Fiesta"

this具有箭头功能的范围是遗传从执行上下文。箭头功能不绑定this根本没有,所以它将在调用堆栈中查找它的值,因此在此代码中car.fullName()将不起作用,并将返回字符串"undefined undefined"

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: () => {
    return `${this.manufacturer} ${this.model}`
  }
}

因此,箭头功能不适合作为对象方法。

箭头函数也不能用作构造函数,在实例化对象时会引发一个TypeError

在这里应该改用常规函数,当不需要动态上下文时

在处理事件时,这也是一个问题。 DOM事件侦听器集this成为目标元素,如果您依靠this在事件处理程序中,常规函数是必需的:

const link = document.querySelector('#link')
link.addEventListener('click', () => {
  // this === window
})
const link = document.querySelector('#link')
link.addEventListener('click', function() {
  // this === link
})

免费下载我的JavaScript初学者手册


更多js教程: