在JavaScript学习过程中总会遇到匿名函数，箭头函数，每次似乎都是稀里糊涂地就过去了，今天整理一下相关的知识点。
匿名函数
匿名函数与具名函数相对，分为两种表达形式，函数表达式和立即执行函数
1.函数表达式
let fn = function () {
console.log("aa")
}
fn()
let fn2 = function (x, y) {
console.log(x + y)
return x + y
}
console.log(fn2(1, 2))
console.log(fn2())第一个函数fn(），不需要形参，因此可以直接调用，此时控制台会打印出aa的字样。
第二个函数fn2()，会接受两个参数，并且返回两者的和，但console.log(fn2(1, 2))语句打印出的依旧是该函数体，如下所示：
ƒ (x, y) {
console.log(x + y)
return x + y
}
另外两个语句因为没有传入匹配的形参，会输出NaN。
并且注意，对于这种形式的匿名函数类似于变量，要先声明后使用。
2.立即执行函数
立即执行函数是做大模块时为了避免变量的相互污染。
语法形式：(function(){})()
其中黄色括号实际上是在调用红色括号内的函数，里面放置实参；黑色小括号放置形参。
(function () {
let num = 2
console.log(num)
})();
(function () {
let num = 3
console.log(num)
})();分号（必须的）实现两个函数中对于num赋值的分割，防止变量污染。
另一种写法是(function(){}())
箭头函数
1.基本语法
用更简短的函数写法并且不用绑定this，适用于本身需要匿名函数的场景
const fun = function () {
console.log('111')
}
fun()
const fun0 = () => {
console.log('222')
}
fun0()
const fun1 = (x) => {
console.log(x)
}
fun1(1)
// 只有一个参数时 小括号可以省略，但没有参数时 小括号也不能省略
const fun2 = x => {
console.log(x)
}
fun2(1)
// 函数内部逻辑只有一行时 大括号可以省略
const fun3 = (x) => console.log(x)
fun3(1)
// 函数内部逻辑只有一行且是return语句时,不用写return，直接写返回表达式
const fun4 = x => x + x
console.log(fun4(1))
const fun5 = x => {
return x + x
}
console.log(fun5(1))
// 函数返回对象时，为避免混淆，小括号不再省略
const fun6 = name => ({ m_name: name })
console.log(fun6('aaa').m_name)2.函数参数
箭头函数与普通函数相比较而言
普通函数有动态参数arguments
但箭头函数没有动态参数arguments，但是有剩余参数 ...args
例如场景：定义一个求和函数，其中参数至少有两个
const getSum = (num1, num2, ...args) => {
let sum = num1 + num2
for (let i = 0; i < args.length; i++) {
sum += args[i]
}
return sum
}
console.log(getSum(1, 2, 3, 4, 5)) //153.this指向
function fn() {
console.log(this)
}
fn()控制台输出window对象，是因为在函数方法中this指向window，其中调用语句fn()也等效于window.fn()，也即window调用了fn()函数。
情况一：
但在箭头函数中不会创建自己的this，只会从自己的作用链的上一层去沿用this
const fn = () => {
console.log(this)
}
fn()控制台同样输出window对象，但并不是因为window调用了函数，而是本层的局部作用域中并不会创建自己的this，借用作用链的上一层（也即<script></script>大括号包裹的作用域中）的this（即window对象）
情况二：
对象方法调用
const obj = {
name: 'aa',
sayHello: () => {
console.log(this) //window
}
}
// this指向window
obj.sayHello()
const obj = {
name: 'aa',
sayHello: function () {
let i = 0
const count = () => {
console.log(this) //obj
}
count()
}
}
obj.sayHello()