web学习笔记（十八）-Toy模板网

这篇具有很好参考价值的文章主要介绍了web学习笔记（十八）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.函数的参数

1.1显式参数

1.2隐式参数

（1）this

(2)Arguments

1.3伪数组转换为真数组

2.函数补充知识点

2.1函数可以调用另一个函数

2.2闭包函数

2.3递归函数

2.4回调函数

2.5高阶函数

1.函数的参数

1.1显式参数

显式参数就是我们自定义的参数。
JavaScript函数定义显式参数时没有指定数据类型。

1.2隐式参数

系统给定的参数叫隐式参数，隐式参数有两个this和Arguments。

（1）this

this代表当前执行代码的对象。它在不同的场景下指向不同的对象。

在全局作用域中，this指向全局对象（在浏览器中是Window对象）。
在函数中，this的指向取决于函数的调用方式。
1. 如果函数作为对象的方法调用，this指向调用该方法的对象。
2. 如果函数作为普通函数调用，this指向全局对象（在浏览器中是Window对象）。
3. 如果函数使用了箭头函数语法，this继承自外层作用域的this，与普通函数不同。
在构造函数中，this指向由该构造函数创建的新对象。
在事件处理函数中，this指向触发事件的元素。
在使用call、apply或bind方法调用函数时，this可以通过第一个参数来指定。

(2)Arguments

arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

Arguments是用来封装实参的对象。
JavaScript函数对隐式参数没有进行类型检测。
JavaScript函数对隐式函数的个数没有进行检测。

Arguments是伪数组，不具有数组的push,pop等方法，但可以进行遍历，可以通过索引号进行取值。

 function show(a,b){
            console.log(arguments instanceof Array);//false
             //instanceof检测出arguments不是一个数组
            console.log(arguments[3]);//6
            // arguments可以通过序列号来进行取值。
            for(var i=0;i<arguments.length;i++){
                console.log(i);//可以进行数组的遍历
            }
        }show(1,2,4,6,7,8)

Arguments是函数的隐式参数，它本身也是一个对象。

 <script>
        function show(a,b){
            console.log(a,b);//1 2
            console.log(arguments);
//Arguments(6) [1, 2, 4, 6, 7, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]
 // arguments可以以一种类似数组（但不是数组）的方式拿到所有的实参。
        }
        show(1,2,4,6,7,8)//传参时，实参个数大于形参个数
    </script>

Arguments有length属性，即使没有形参，也能取出来实参的值。

Arguments有callee属性，这个属性指向的是函数自己，控制台输出的话会将函数打印出来。

 function show1(){
            console.log(arguments.callee);
            /* ƒ show1(){
            console.log(arguments.callee);
        } */
        }show1();

1.3伪数组转换为真数组

方法一

  function show1(){
            console.log(arguments);//伪数组
            
            var arr=[];
            // 定义新数组
            for(var i=0;i<arguments.length;i++){
                arr[i]=arguments[i];
                // 通过循环将arguments里面的每一项元素都复制到新数组中去。
            }
            console.log(arr);
        }show1(1,2,3,4,5,6,677,7,7)

方法二利用展开运算符 ...

  function show2(){
           var arr=[...arguments];
           console.log(arguments);
           console.log(arr); 
           
        }show2(1,2,3,4,5,6,677,7,7);

方法三

 function show3(){
            //       数组  原型     分割  呼叫
           var arr= Array.prototype.slice.call(arguments);
           console.log(arguments);
           console.log(arr);

        }show3(1,2,3,4,5,6,677,7,7)

2.函数补充知识点

2.1函数可以调用另一个函数

因为每个函数都是一个独立的代码块，用于完成某个功能，所以经常会用到函数相互调用的情况。

    function fn1() {
            console.log(111);
            console.log('函数一');
            fn2();
        }

        function fn2() {
            console.log(222);
            console.log('函数二');
        }
        fn1();
     /* 111
        函数一
        222
        函数二*/

2.2闭包函数

闭包函数是指在一个函数内部定义的函数，这个内部函数可以访问外部函数的变量和参数，即使外部函数已经执行完毕，内部函数仍然可以访问和操作外部函数的变量。相当于在函数内部写入了一个函数。

    function outerFunction() {
            var x = 10;

            function innerFunction() {
                console.log(x*2); // 打印外部函数的变量x
            }

            return innerFunction;
        }

        var inner = outerFunction();
        inner(); // 输出20

缺点：由于闭包会使用函数中的变量一直被保存在内存中，内存消耗很大，所以闭包的滥用可能会降代程序的处理速度，造成内存消耗的问题（内存泄露）

优点：使用闭包函数可以避免全局变量污染延伸了变量的作用范围。文章来源地址https://www.toymoban.com/news/detail-831402.html

2.3递归函数

将自身调用自身的函数称为递归函数。
有规律的编程用递归函数可以来完成，例如：求某个数的阶层，斐波那契数列。

递归函数以相反的·顺序结束（最基础的数值是递归的出口）

 <script>
        // 用函数求出10的阶层。
        var i = 10;
        var sum = 1;

        function fn() {
            i--;
            sum *= i;
            console.log(i, sum);
            if (i == 1) {
                // i的最小数值是递归函数的出口
                return sum;
            }
            fn();
        }
        var sum1 = fn();
        console.log(sum1);
    </script>

2.4回调函数

回过头来被调用的函数，自己本身不会执行，需要被别人调用才执行。

定时器中也有使用回调函数 setInterval(回调函数,时间)；

      setInterval(function(){
            console.log('nice');
        },1000)
        // 每间隔一秒调用一次函数，此处的函数是回调函数

使用场景：一般作为函数的参数存在，或者给按钮加调用事件。

    <button id="btn"></button>
    <script>
        var btn = document.querySelector('#btn');
        // 将按钮查找出来才能对其进行操作
        btn.onclick = function () {
            console.log('单击后执行函数');
        }
    </script>

或者写成以下这种格式：（注意：此时的btn.οnclick=fn;而不是btn.οnclick=fn();）

<button id="btn"></button>
    <script>
          var btn = document.querySelector('#btn');
        // 将按钮查找出来才能对其进行操作
       function fn () {
            console.log('单击后执行函数');
        }
        btn.onclick=fn;
    </script>

2.5高阶函数

就是比较高级一点的函数。比如：（1）函数的参数部分有函数（定时器）（2）返回值return后面有函数
```
    function fn(){
            return function(){
                console.log('aaa');
            }
        }
        fn();
```