JavaScript中的匿名函数和箭头函数

        在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))   //15

3.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()