箭头函数与普通函数在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
时,箭头函数不适合用作对象的方法。