箭头函数

Arrow Functions are one of the most impactful changes in ES6/ES2015, and they are widely used nowadays. They slightly differ from regular functions. Find out how
Arrow函数是ES6/ES 2015中最具影响力的变化之一,目前已被广泛使用。它们与常规函数略有不同。了解如何
Arrow functions were introduced in ES6 / ECMAScript 2015, and since their introduction they changed forever how JavaScript code looks (and works).
箭头函数是在ES6 / ECMAScript 2015中引入的,自从引入以来,它们永远改变了JavaScript代码的外观(和工作方式)。
In my opinion this change was so welcoming that you now rarely see the usage of the function keyword in modern codebases. Although that has still its usage.
在我看来,这个变化是如此的受欢迎,以至于你现在很少看到在现代代码库中使用function关键字。尽管它仍然有它的用途。
Visually, it’s a simple and welcome change, which allows you to write functions with a shorter syntax, from:
从视觉上看,这是一个简单而受欢迎的变化,它允许你用更短的语法编写函数,从:
to
If the function body contains just a single statement, you can omit the brackets and write all on a single line:
如果函数体只包含一条语句,你可以省略括号,将所有语句写在一行中:
Parameters are passed in the parentheses:
参数在括号中传递:
If you have one (and just one) parameter, you could omit the parentheses completely:
如果你有一个(而且只有一个)参数,你可以完全省略括号:
Thanks to this short syntax, arrow functions encourage the use of small functions.
由于这种简短的语法,箭头函数鼓励使用小函数。

Implicit return隐性收益

Arrow functions allow you to have an implicit return: values are returned without having to use the return keyword.
箭头函数允许你有一个隐式的返回:返回值,而不必使用return关键字。
It works when there is a one-line statement in the function body:
当函数体中有一行语句时,它可以工作:
Another example, when returning an object, remember to wrap the curly brackets in parentheses to avoid it being considered the wrapping function body brackets:
另一个例子,当返回一个对象时,记得将大括号括在括号中,以避免它被认为是函数体括号:

How 如何 this works in arrow functions 在箭头函数中工作

this is a concept that can be complicated to grasp, as it varies a lot depending on the context and also varies depending on the mode of JavaScript (strict mode or not).
this是一个很难理解的概念,因为它会根据上下文的不同而变化很大,也会根据JavaScript的模式(严格模式或非严格模式)而变化。
It’s important to clarify this concept because arrow functions behave very differently compared to regular functions.
澄清这个概念很重要,因为箭头函数的行为与常规函数非常不同。
When defined as a method of an object, in a regular function this refers to the object, so you can do:
当定义为对象的方法时,在常规函数中this引用对象,所以你可以这样做:
calling car.fullName() will return "Ford Fiesta".
调用car.fullName()将返回"Ford Fiesta"
The this scope with arrow functions is inherited from the execution context. An arrow function does not bind this at all, so its value will be looked up in the call stack, so in this code car.fullName() will not work, and will return the string "undefined undefined":
带有箭头函数的this作用域继承自执行上下文。箭头函数根本不绑定this,因此它的值将在调用堆栈中查找,因此在此代码中car.fullName()将不起作用,并将返回字符串"undefined undefined"
Due to this, arrow functions are not suited as object methods.
因此,箭头函数不适合作为对象方法。
Arrow functions cannot be used as constructors either, when instantiating an object will raise a TypeError.
箭头函数也不能用作构造函数,当实例化一个对象时会引发TypeError
This is where regular functions should be used instead, when dynamic context is not needed.
这是当不需要动态上下文时,应该使用常规函数的地方。
This is also a problem when handling events. DOM Event listeners set this to be the target element, and if you rely on this in an event handler, a regular function is necessary:
这在处理事件时也是一个问题。DOM事件侦听器将this设置为目标元素,如果您在事件处理程序中依赖this,则需要一个常规函数:
清空数组
Loading...
目录
文章列表
王小扬博客
产品
Think
Git
软件开发
计算机网络
CI
DB
设计
缓存
Docker
Node
操作系统
Java
大前端
Nestjs
其他
PHP