箭头函数与JavaScript中的普通函数有什么不同

65 阅读1分钟

箭头函数与JS中的普通函数有什么不同?

普通函数是我们从JavaScript诞生之初就使用的 "老式 "函数。

它们可以直接运行。

或者可以将它们分配给一个变量。

const run = function run() {
  
}

run()

当你这样做时,该函数可以是匿名的。

const run = function () {
  
}

run()

唯一的区别是,现在在出现错误时出现的堆栈跟踪中,你不会再看到函数的名字了。

2015年在ES6中引入的箭头函数,有点像这个最后版本的普通函数,因为它们没有名字。从来没有。

语法的 "足迹 "更小。

const run = () => {
  
}

run()

如果我们有一个参数,我们可以省略括号。

const run = param => {
  
}

run()

而如果我们只有一条语句,我们也可以省略大括号。

const run = param => 'running'
run()

在这种情况下,返回值是字符串'running'

箭头函数和普通函数都可以作为对象方法使用。

现在,这两个函数之间最大的区别来了,它与this 在方法中的绑定方式有关。

考虑一下这个例子。

const car = {
  brand: 'Ford',
  model: 'Fiesta',
  start: function() {
    console.log(`Started ${this.brand} ${this.model}`)
  },
  stop: () => {
    console.log(`Stopped ${this.brand} ${this.model}`)
  }
}

this 在 方法中指的是对象本身。start()

但在stop() 方法中,它是一个箭头函数,它没有。

this 并没有绑定到对象实例。它指向 在外部作用域中指向的东西。this

这意味着当你想访问this箭头函数不适合用于对象方法