JavaScript基础（六）——ES6函数进阶

一、ES6可以为函数的形参设置默认值

（1）不设置默认值

    <script>
        function fun(m, n) {
            return m + n;
        }

        console.log(fun());
    </script>

显示如下：

分析：

        因为m，n都没有传入值，所以，m、n都为undefined，两个undefined相加，结果就为NaN。

        NaN的意思就是not a number，不是一个数字。

（2）设置默认值

    <script>
        function fun(m = 10, n = 20) {
            return m + n;
        }

        console.log(fun());
    </script>

显示如下：

 二、（匿名）函数的立即执行（不常用）

    <script>
        (function () {
            console.log("hello world")
        })()
    </script>

输出显示如下： 

 三、作用域链

如果当前作用域下有值，则使用该值。

如果没有值，则去上一层找，直到找到。

或者都找不到。

    <script>
        var str = "hello";
        var num = 10;

        function fun1() {
            var str = "world";

            function fun2() {
                console.log(str);
                console.log(num);
            }
            fun2();
        }

        fun1();
    </script>

输出如下：

 

分析：

str上层有值，则使用“world”，num上层没值，则继续往上找，找到10。 

 四、闭包

1、什么是闭包函数？

声明在一个函数中的函数，叫作闭包函数。

其实也可以说是内部函数。

2、内部函数可以访问其所在的外部函数中声明的参数和变量。

    <script>
        function fun1() {
            let num1 = 10;
            let num2 = 20;

            function fun2() {
                return num1 + num2;
            }
            return fun2;
        }

        const f = fun1();
        const result = f();
        console.log(result);
    </script>

输出结果为30：

分析：

我们在fun1()内部，fun2()外部定义了两个变量：num1，num2。

因为我们不想让外部来调用这两个变量，所以我们将他们定义在了函数内部。即对象中的封装。

当我们需要使用的时候，我们可以通过fun2()方法来调用。

const f = fun1();    这行代码中的f即为fun2。

所以，result就等于fun2()。

所以，输出的是num1+num2的值。

 五、箭头函数（重点）

    <script>
        const fun = function (x) {
            return x * x;
        }

        let result = fun(2);
        console.log(result);
    </script>

    <script>
        const fun = (x) => {
            return x * x;
        }

        console.log(fun(2));
    </script>

结果都为4：

以上两种方法等价，第一种是常规的函数，第二种就是箭头函数。 

箭头函数甚至还可以写成这样：

    <script>
        const fun3 = x => x * x;

        console.log(fun3(2));
    </script>

六、this 

    <script>
        const cat = {
            name: "miaomiao",
            sayName() {
                console.log(this);
                setInterval(function () {
                    console.log(this);
                }, 1000);
            }
        }

        cat.sayName();
    </script>

输出如下： 

上面一个this在sayName()方法内，指的是cat对象。

下面一个this在setInterval()方法内，指的是windows对象。

当然，我们也可以使用箭头函数简写：

    <script>
        const cat2 = {
            name: "miaomiao",
            sayName() {
                setInterval(() => {
                    console.log(this);
                }, 1000);
            }
        }

        cat2.sayName();
    </script>

输出如下： 

 

就相当于sayName()方法直接调用了this，所以，this指的是cat2对象。