一、前言
使用JS经常会看到如下写法来定义函数：
第一种：const App= () => {} //箭头函数 第二种：function App() {} //普通函数
他们之间除了长的不一样还有一些区别是我们需要注意的，这里给大家介绍一下。
二、箭头函数和普通函数的常见区别
1）写法不同
箭头函数比普通函数更简洁：
//普通函数 const sum = function sum(a, b) { return a + b } //箭头函数 相当于python的匿名函数了 const sum = (a, b) => a + b
箭头函数的写法跟Python中的匿名函数类似。
2）箭头函数没有自己的this
箭头函数不能作为构造函数，也没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变：
var id = '1'; var obj = { id: '2', a: function(){ console.log(this.id); }, b: () => { console.log(this.id); } }; obj.a(); // '2' obj.b(); // '1' new obj.a() // undefined new obj.b() // Uncaught TypeError: obj.b is not a constructor
3）普通函数有arguments方法，箭头函数没有
f1(12,23,45); //普通函数 const f1 = function () { console.log(arguments);//Arguments(3) [12, 23, 45, callee: (...), Symbol(Symbol.iterator): ƒ] } //箭头函数 const f1 = () => console.log(arguments);// Throws an error - arguments is not defined //箭头函数可以使用rest语法解决 const f1 = (...args) => console.log(args);//[12, 23, 45]
4）箭头函数没有new.target
new.target是用来检测函数是否被当做构造函数使用，他会返回一个指向构造函数的引用：
箭头函数打印new.target出现报错
5）箭头函数没有变量提升
变量提升即将变量声明提升到它所在作用域的最开始的部分，如下面的代码所示：
func(); function func(){ console.log("aa"); }
func的调用执行可以定义在函数创建之前，也不会报错，但箭头函数则不行：
6）箭头函数不能作为构造函数使用
普通函数
function Cls(a,b) { this.a=a this.b=b } let obj=new Cls(1,2) console.log(obj.a) //1
箭头函数
let Cls = (a, b) => { this.a = a this.b = b } let obj = new Cls(1, 2) console.log(obj.a)//undefiend
三、总结
经过上述分析发现普通函数的功能会比箭头函数更强大一些，但这也不是说我们就要避免使用箭头函数。而是应该根据实际的应用场景来选择。对于使用react hooks来开发前端的我而言，基本很少使用普通函数，大部分的箭头函数使用也未造成开发的影响，代码反而简洁了不少。这两者也没有谁优谁劣的说法，看个人喜好来选择也是可以的。没必要在这些问题上花费过多的时间去争论，哪种让自己用起来更舒服用哪种就行。
