目录

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

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/

搜一搜