/

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

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

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

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

1
2
3
function run() {

}

它们可以直接调用：

1
run();

或者赋值给一个变量：

1
2
3
4
5
const run = function run() {

}

run();

在赋值给变量时，函数也可以是匿名的：

1
2
3
4
5
const run = function () {

}

run();

唯一的区别是，在出现错误时，当我们查看堆栈追踪信息时，将不再显示函数名。

箭头函数是在2015年ES6中引入的，它们有点像普通函数的最后一个版本，因为它们不具有名称。从来没有。

它们的语法比较简洁：

1
2
3
4
5
const run = () => {

}

run();

如果只有一个参数，我们可以省略括号：

1
2
3
4
5
const run = param => {

}

run();

如果只有一条语句，我们还可以省略大括号：

1
2
const run = param => 'running';
run();

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

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

现在我们来谈谈这两种函数之间最大的区别，即与方法中绑定this有关。

考虑以下示例：

1
2
3
4
5
6
7
8
9
10
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时，箭头函数不适合用作对象的方法。