箭头函数与JavaScript中的常规函数

90 阅读4分钟

了解何时和何时不使用箭头函数

今天,在JavaScript中,有两种常见的声明函数的方法。箭头函数和正则函数。在大多数场合,我们都会使用这两个函数,而不考虑它们的适用性和差异。

然而,这些函数在很多方面都有很大的不同,我们不能用一个来代替另一个。

因此,在这篇文章中,我将详细探讨其中的5个关键区别。

1."this "关键词

this关键字是JavaScript中最常用的关键字之一。但是当涉及到正则函数和箭头函数时,它的行为方式完全不同。

在普通函数中,this根据函数的调用方式而变化。

  • 简单调用: 这等于全局对象,如果你使用严格模式,可能是未定义。
  • 方法调用: 这相当于拥有该方法的对象。
  • 间接调用: 这相当于第一个参数。
  • 构造函数调用: 这相当于新创建的实例。
// Simple Invocation
--------------------------------------------------------------------
// Method Invocation
--------------------------------------------------------------------
// Indirect Invocation
--------------------------------------------------------------------
// Constructor Invocation

但是,在箭头函数中,这个的行为完全改变了。

箭头函数没有自己的 "this",也不会在函数中重新定义 "this "的值。

无论你如何执行箭头函数,箭头函数内的this总是指外部上下文中的this。这意味着这个关键字在箭头函数中被词法 绑定。

为了更好地理解它,让我们考虑一下上面的方法调用与箭头函数的例子,看看其中的区别。

var variable = “Global Level Variable”;
let myObject = { 
 variable: “Object Level Variable”, 
arrowFunction:() => { 
regularFunction(){ 
myObject.arrowFunction(); 

箭头函数的这种行为使得它们在方法内部使用回调时非常有用。

你不需要在箭头函数中使用const self = this或callback.bind(this)这样的变通方法,而且它可以防止在回调中使用this而引起的任何错误。

2.2.arguments对象。

在常规的JavaScript函数中,当函数被调用时,可以使用arguments关键字来访问传递的参数。

例如,如果我调用一个有3个参数的函数,我将能够像这样使用arguments关键字访问它们。

function exampleFunction() {
exampleFunction(1,2,3)

但是,箭头函数没有自己的参数,它使用外部函数的参数。

arguments关键字在箭头函数中的行为与我们前面讨论的这个关键字的行为类似,它是通过词法解决的。

let exampleFunction = {

然而,如果你想在一个箭头函数中直接访问参数,你可以使用其余参数的功能

let exampleFunction = {

3.构造器/"new "关键字

众所周知,我们可以用常规函数轻松地构造对象。我们只需要用new关键字来调用函数。

function Article(topic) {

然而,箭头函数不能作为构造函数使用。

因为这个关键字在箭头函数中是通过词法解决的,我们不能用它来构造对象。

4.隐式返回

在普通函数中,我们可以使用return关键字从一个函数中返回任何值。如果我们不返回任何东西,该函数将隐式返回未定义的值。

function exampleFunction() {
--------------------------------------------------------------------
function exampleFunction() {
--------------------------------------------------------------------
function exampleFunction() {

箭头函数在返回值时的行为也是如此。但有一个好处,你可以从中获取。

如果箭头函数包含一个表达式,你可以省略大括号,然后表达式将被隐式返回。

const addOne = (number) => number + 1;

最后的思考

在这篇文章中,我已经讨论了JavaScript中正则函数和箭头函数之间的一些重要区别。基于这些结果和优势,你可能会觉得箭头函数比正则函数更好。

但是,并不是所有的情况都是如此,有些情况下你应该避免使用箭头函数。

在处理Promises、带有动态上下文的Callback函数和Object方法时,建议使用普通函数。

所以,作为一个开发者,你应该了解这些差异,以确定最符合你要求的函数类型。

谢谢你的阅读!!

用Bit构建和共享独立组件

比特是一个超级可扩展的工具,让你可以用独立编写、版本和维护的组件来创建真正的模块化应用程序 。

用它来构建模块化的应用程序和设计系统,编写和交付微前端,或简单地在应用程序之间共享组件。

一个 "产品形式 "的组件是独立的源代码控制的,并与比特分享。

了解更多


箭形函数与JavaScript中的正则函数》最初发表于《Bits and Pieceson Medium》,人们在这里通过强调和回应这个故事来继续进行对话。