JavaScript箭头函数

---

前言

JavaScript在es6之前可以通过函数声明或者函数表达式定义函数，es6之后新增了箭头函数表达式用来定义函数。箭头函数表达式是比函数表达式更简洁的语法，下面记录一下箭头函数和其他两种函数的不同点。

---

一、箭头函数的this是静态的

箭头函数的this就是定义时上层作用域的this，也就是说箭头函数内部的this指向是固定的，相比较下普通函数的this指向是可变的。首先我们使用函数声明和箭头函数表达式定义两个函数

function func1() {
	console.log(this.name);
}
const func2 = () => {
	console.log(this.name);
}

创建一个name属性

window.name = "葫芦娃";

1、直接调用

func1(); // 葫芦娃
func2(); // 葫芦娃

2、新建一个包含name属性的对象然后通过call方法调用

const obj = {
	name: "哪吒"
};
func1.call(obj); // 葫芦娃
func2.call(obj); // 哪吒

二、箭头函数不能用作构造函数

箭头函数作为构造函数实例化对象时会报错

const Person = (name) => {
	this.name = name;
}
const p1 = new Person("葫芦娃"); // TypeError: Person is not a constructor

三、箭头函数不能使用arguments

普通函数可以使用arguments获取函数的参数，但是在箭头函数中不能使用。如果要获取参数可以使用rest参数（…rest）

const func = () => {
	console.log(arguments);
};
func(1,2,3,4,5); // ReferenceError: arguments is not defined
const func1 = (...rest) => {
	console.log(rest);
}
func1(1,2,3,4,5); // [1,2,3,4,5]

四、箭头函数的简写

箭头函数在特殊情况下是可以进行简写操作的
1、省略小括号
箭头函数在有且只有一个参数时可以省略小括号

const func = params = > {
	console.log(params);
}

2、省略大括号
箭头函数的函数体只有一条语句时可以省略大括号

const func = (a, b) = > a + b;
func(1, 2); // 3