普通函数与箭头函数有什么区别

31310-34-310 约 888 字预计阅读 2 分钟次阅读

0x00 引言

大家好，我是以卖码为生的海门。今天想和大家探讨一下普通函数与箭头函数有什么区别？

大家也许在面试的时候被问及过这个问题，而我是在一次和同事的交谈中被问及的。我当时的回答是：普通函数可以在它定义之前的位置使用它，即与位置无关，而箭头函数不行，且箭头函数没有 this。这么回答很显然是说服不了任何人的。

0x01 书写形式

简单罗列几种使用过程中的书写形式。主要介绍定义方式，有参无参，返回一条语句或一个对象的情况。相信大家很容易区分书写方式的异同，在实际开发过程中或多或少写这么写过，书写形式方面的区别就不做过多的赘述了，一句话总结就是箭头函数更加简洁明了。

箭头函数

1
2
3
4
5
6
7
const doSomething = () => {
  return a + b;
}

const doSomething1 = (a, b) => a + b;

const doSomething2 = c => ({name: c}); 

普通函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const doSomething = function() {
  return a + b;
}

const doSomething1 = function(a, b) {
  return a + b;
}

const doSomething2 = function(c) {
  return {name: c};
}

0x02 关于 this

想必大家都有被 this 指针搞晕的情况，我最近还遇到了，由于 JS 的特殊关系，this 是在运行时确定的，往往会在代码中产生一些迷惑的行为。箭头函数不会创建自己的 this，它的 this 来源于它继承在外层的一个普通函数的 this，所以说箭头函数是没有 this 的，没有this也就说明它没有原型了，所以也不能做构造函数使用了。

有人就会说自己经常用apply、call和bind去动态修改this的指向，可是箭头函数在定义的时候就已经注定改变不了自己的this了，所以这些方法对它无效。

对了，大家大概还会记得 arguments 这个参数，由于箭头函数的 this 不是它自己的，所以它也是没有 arguments 这个对象。那么我们怎么在箭头函数中获取多个参数，使用 rest 参数去拿咯。

还有我在开头的时候说，普通函数可以在它定义之前的位置使用它，这句话其实是有误的。当普通函数使用函数式定义时，与箭头函数一样，也就是可以看成是一个变量，不能在定义它之前使用它。

最后就是箭头函数不能当做 Generator 函数,因为其不能使用 yield 关键字。

0x03 总结

关于箭头函数的理解，第一是其书写简洁明了，另外就是其共享父域的 this。

B 站链接：https://space.bilibili.com/383362014 博客地址：https://yihaimen.github.io/

目录

普通函数与箭头函数有什么区别

0x00 引言

0x01 书写形式

0x02 关于 this

0x03 总结