箭头函数与普通函数在JavaScript中有着不同的使用方式和特点。

普通函数是我们在JavaScript中一直以来使用的“老派”函数:

function run() {

}

它们可以直接调用:

run();

或者赋值给一个变量:

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}`);
  }
};

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

但是在stop()方法中,它是一个箭头函数,它不会指向对象本身。

this并没有绑定到对象实例上,它指向外部作用域中的this

这意味着在想要访问this时,箭头函数不适合用作对象的方法