箭头函数和普通函数的常见区别

一、前言

使用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来开发前端的我而言，基本很少使用普通函数，大部分的箭头函数使用也未造成开发的影响，代码反而简洁了不少。这两者也没有谁优谁劣的说法，看个人喜好来选择也是可以的。没必要在这些问题上花费过多的时间去争论，哪种让自己用起来更舒服用哪种就行。