web学习笔记(十八)

简介: web学习笔记(十八)

1.函数的参数

1.1显式参数

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

1.2隐式参数

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

(1)this

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

  • 在全局作用域中,this指向全局对象(在浏览器中是Window对象)。
  • 在函数中,this的指向取决于函数的调用方式。
  1. 如果函数作为对象的方法调用,this指向调用该方法的对象。
  2. 如果函数作为普通函数调用,this指向全局对象(在浏览器中是Window对象)。
  1. 如果函数使用了箭头函数语法,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();

方法一

  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

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

优点:使用闭包函数可以避免全局变量污染 延伸了变量的作用范围。

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(回调函数,时间);
1.      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();
相关文章
|
4月前
|
JavaScript
web学习笔记(二十)
web学习笔记(二十)
26 0
|
2月前
|
自然语言处理 运维 JavaScript
web-flash 学习笔记
web-flash 学习笔记
|
4月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
34 0
|
4月前
|
存储 JSON JavaScript
web学习笔记(二十八)
web学习笔记(二十八)
32 0
|
4月前
web学习笔记(二十七)PC端网页特效
web学习笔记(二十七)PC端网页特效
28 0
|
4月前
|
JavaScript 前端开发 Go
web学习笔记(二十六)
web学习笔记(二十六)
32 0
|
4月前
|
JavaScript 前端开发 内存技术
web学习笔记(二十五)BOM开始
web学习笔记(二十五)BOM开始
32 0
|
4月前
|
JavaScript
web学习笔记(二十四)
web学习笔记(二十四)
31 0
|
4月前
|
JavaScript 前端开发
web学习笔记(二十三)
web学习笔记(二十三)
56 0
|
4月前
|
XML JavaScript 前端开发
web学习笔记(二十二)DOM开始
web学习笔记(二十二)DOM开始
32 0