04-JavaScript函数-CSDN博客

本文链接：https://blog.csdn.net/weixin_55702682/article/details/137082924

本文详细介绍了JavaScript中的函数创建方式（包括字面量、匿名、构造函数和自执行函数），arguments对象的用法，以及函数作为数据类型的概念。此外，还探讨了作用域和作用域链的原理及其在实际案例中的应用。

摘要由CSDN通过智能技术生成

1.创建函数

1.1.字面量形式创建（推荐）

        //function 函数名（参数）{函数执行的代码}
        //  形式参数 形参
        function fun(num1, num2) {
            console.log(num1 + num2);
        }
        //调用函数
        //实际参数 实参
        fun(1, 2);

1.2匿名函数

        var fun2 = function() {
            console.log("这是一个匿名函数");
        }
        fun2();

1.3构造函数

        var fun3 = new Function("a", "b", "console.log(a+b)");
        fun3(10, 20);

1.4自执行函数

        (function() {
            console.log("这是自执行函数");
        })();

2.创建函数

        //1.创建函数
        function fun(a, b) {
            console.log(a + b);

            //2.返回值
            return a + b;

            //3.return之后的语句不执行
            console.log(a);
        }

        fun(1, 2);

        console.log(fun(1, 2)); //4.函数返回值

        var res = fun(4, 5);
        console.log(res);

3.arguments对象

function fun(a, b, c, d) {
            console.log(a);
            console.log(b);
            console.log(c);
            console.log(d);

            //1.arguments对象    
            //传递的参数组成的伪数组
            console.log(arguments);
            //2.数组,伪数组不能使用数组的操作方法
            console.log(arguments[0]);
            console.log(arguments.length);
        }

        fun(1, 2, 3, 4);


        //3.不管有没有形参，只要传递实参，都会存到arguments对象里
        function fun2() {
            console.log(arguments);

            //4.arguments对象作用：不固定参数的情况下，求所有参数之和(遍历)
            var sum = 0;
            for (i = 1; i < arguments.length; i++) {
                sum += arguments[i];
            }
            console.log(sum);
        }
        fun2(1, 2, 3, 4, 5, 6, 7, 8, 9)

4.函数也是一种数据类型

        function fun() {
            console.log("hello world");
        }

        //1.函数是数据类型,引用数据类型
        console.log(typeof fun);


        function fun2(a) {
            //fun();
            a();
        }

        //2.调用fun2.函数可以当作参数来传递
        fun2(fun);

5.作用域

        // 全局作用域
        var num1 = 10; // 全局变量

        console.log(num1);

        // 创建函数
        function fun() {
            console.log(num1);

            // 局部作用域
            var num2 = 20; // 局部变量
            console.log(num2);

            num3 = 30;
        }
        fun();

        console.log(num3);

        // 作用域链：在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做**作用域链**。

6.作用域链

        var num = 10;

        function fun1() {
            // var num = 20;
            function fun2() {
                // var num = 30;
                console.log(num);
            }
            fun2();
        }

        fun1();

        // 案例1
        function f1() {
            // var num = 123;
            function f2() {
                console.log(num);
            }
            f2();
        }
        f1();
        var num = 456;

7.函数案例

        // 1.
        // var x;
        // console.log(x)
        // x = 3;


        // 2.
        // var a = 1;
        // function test() {
        //     console.log(a);
        //     var a = 1;
        //     // var a;
        //     // console.log(a);
        //     // a = 1;
        // }
        // test();


        // 3.
        // var b = 1;
        // function fun1() {
        //     b = 2;
        //     function fun2() {
        //         var b = 3;
        //         console.log(b);
        //     }
        //     fun2();
        //     console.log(b);
        // }
        // fun1();
        // console.log(b);



        // 4.
        // var b = 1;
        // function fun1(b) {
        //     b = 2;
        //     console.log(b);
        // }
        // fun1('yy');
        // console.log(b);



        // 5.
        var b = 2;
        function test2() {
            window.b = 3;
            console.log(b);
        }
        test2();
        console.log(b);


        // 6.
        c = 5;
        function test3() {
            window.c = 3;
            console.log(c);
            var c;
            console.log(window.c);
        }
        test3();
        console.log(c);