JavaScript基础笔记4：函数、作用域、预解析

本文深入探讨JavaScript中的函数定义、调用、作用域及预解析等核心概念，包括求最大值、斐波那契数列、arguments对象的使用，以及函数作为参数和返回值的应用。同时，详细解析了全局与局部变量的区别，作用域链，以及预解析机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数练习</title>
  <script>

    //求一组数字中的最大值
    function getArrayMax(array) {
      //定义变量假设这个变量中存储的是最大值
      var max = array[0];
      for (var i = 0; i < array.length; i++) {
        if (max < array[i]) {
          max = array[i];
        }
      }
      return max;
    }
    var max = getArrayMax([90, 40, 55, 80, 44]);//可以直接把数组传到函数中的
    console.log(max);

  </script>
</head>
<body>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数练习</title>
  <script>

    //求斐波那契数列,12---144
    //1 1 2 3 5 8 13 21 34 55 89 144
    function getFib(num) {
      var num1=1;
      var num2=1;
      var sum=0;
      for(var i=3;i<=num;i++){
        sum=num1+num2;
        num1=num2;
        num2=sum;
      }
      return sum;
    }
    console.log(getFib(12));
  </script>
</head>
<body>


</body>
</html>

arguments对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>arguments</title>
  <script>

    //计算n个数字的和
    //定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传了几个参数,没办法计算,
	//但是如果在函数中知道了参数的个数,也知道了，每个参数的值.可以

    function f1() {
      //获取的是函数在调用的时候,传入了几个参数
      console.log(arguments.length);
      //使用arguments对象可以获取传入的每个参数的值
      console.log(arguments);
    }
    f1(10,20,30,40);//调用

    function f2() {
      //arguments----->数组使用------伪数组---
      var sum=0;
      for(var i=0;i<arguments.length;i++){
        sum+=arguments[i];
      }
      return sum;
    }
    console.log(f2(10,20,30));
  </script>
</head>
<body>


</body>
</html>

函数的其他定义方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数的其他定义方式</title>
  <script>

    /*
     * 命名函数:函数如果有名字,就是命名函数
     *
     * 匿名函数:函数如果没有名字,就是匿名函数
     *
     * 函数的另一种定义方式
     * 函数表达式:
     * 把一个函数给一个变量,此时形成了函数表达式
     * var 变量=匿名函数;
     * 例子:
     * var f1=function (){
     *
     * };
     * 如果是函数表达式,那么此时前面的变量中存储的就是一个函数,而这个变量就相当于是一个函数,就可以直接加小括号调用了
     * f1();
     *
     * 注意:
     * 函数表达式后面,赋值结束后,要加分号
     *
     * 函数定义:
     * 1. 函数声明--函数定义
     * function 函数名(){
     *     函数体
     * }
     *
     * */

    //函数的自调用,没有名字,调用---声明的同时,直接调用
    //一次性的--------
    //    (function(){console.log("啦啦啦");})();
    //    (function(){console.log("嘎嘎")})();
  </script>
</head>
<body>


</body>
</html>

函数也是一种数据类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数也是一种数据类型</title>
  <script>

    function f1() {
      console.log("我是函数");
    }
    //如何获取某个变量的类型? typeof
    console.log(typeof f1);
    //函数是有数据类型,数据类型:是function 类型的
  </script>
</head>
<body>

</body>
</html>

函数作为参数使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数作为参数使用</title>
  <script>

    //函数可以作为参数使用,如果一个函数作为参数,那么我们说这个参数(函数)可以叫回调函数
    //只要是看到一个函数作为参数使用了,那就是回调函数

    function sayHi(fn) {
	  fn();//fn此时应该是一个函数
      console.log("不好");
    }
    function suSay() {
      console.log("您好啊");
    }
    sayHi(suSay);

    //函数声明,fn是变量,fn是参数,
    function f1(fn) {
      fn();//函数调用---说明fn这个变量中存储的是一个函数
    }
    function f2() {
      console.log("可以");
    }
    f1(f2);
  </script>
</head>
<body>


</body>
</html>

函数作为返回值使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数作为返回值使用</title>
  <script>
    function f1() {
      console.log("f1函数调用了");
      return function () {
        console.log("这是一个函数");
      };
    }

    var ff=f1();//调用
    //ff就是一个函数了
    ff();
    console.log(ff);
  </script>
</head>
<body>

</body>
</html>

作用域:使用范围

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作用域:使用范围</title>
  <script>
    /*
    * 全局变量:声明的变量是使用var声明的,那么这个变量就是全局变量,全局变量可以在页面的任何位置使用
    * 除了函数以外,其他的任何位置定义的变量都是全局变量
    * 局部变量:在函数内部定义的变量,是局部变量,外面不能使用
    * 全局变量,如果页面不关闭,那么就不会释放,就会占空间,消耗内存
    *
    * 全局作用域:全局变量的使用范围
    * 局部作用域:局部变量的使用范围
    *
    * 块级作用域:一对大括号就可以看成是一块,在这块区域中定义的变量,只能在这个区域中使用,但是在js中在这个块级作用域中定义的变量,外面也能使用;
    * 说明:js没有块级作用域,只有函数除外
    *
    * 隐式全局变量:声明的变量没有var,就叫隐式全局变量
    * 全局变量是不能被删除的,隐式全局变量是可以被删除的
    * 定义变量使用var是不会被删除的,没有var是可以删除的
    * */

    function f1() {
      number=10;//是隐式全局变量
    }
    f1();
    console.log(number);

    var num1=10;
    num2=20;
    delete num1;//把num1删除
    delete num2;//把num2删除
    console.log(typeof num1);//number
    console.log(num1);//10
    console.log(typeof num2);//undefined,删除了

    {
      var num=10;
      console.log(num);//10
    }
    console.log(num);//10

    var i=0;
    while (i<5){
      var num=100;
      i++;
    }
    console.log(num);//100

    var num=10;
    console.log(num);//10
  </script>
  <script>
    console.log(num);//10
  </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作用域链</title>
  <script>

    var num=10;
    function f1() {
      var num=20;
      function f2() {
        var num=30;
        function f3() {
          var num=40;
          console.log(num);
        }
        f3();
      }
      f2();
    }
    f1();//40
  </script>
</head>
<body>

</body>
</html>

预解析:提前解析代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>预解析:提前解析代码</title>
  <script>
    /*
    * 预解析做什么事?
    * 把变量的声明提前了--提前到当前所在的作用域的最上面
    * 函数的声明也会被提前--提前到当前所在的作用域的最上面
    *
    * */

    //函数调用的时候,会把函数的声明提升到作用域的上面

    f1();//undefined
    var num=20;//这个变量的声明会提升到变量使用之前
    function f1() {
      console.log(num);
      var num=10;
    }

	f2();//lll
    function f2() {
      console.log("hhh");
    }
	function f2(){
	  console.log("lll");
	}

    f3();//啦啦啦
    function f3() {
      console.log("啦啦啦");
    }
    f3();//啦啦啦

    //把变量的声明提前了
    var num3;
    console.log(num3);//undefined
    num3=10;

  </script>
</head>
<body>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>预解析</title>
  <script>
    //预解析中,变量的提升,只会在当前的作用域中提升,提前到当前的作用域的最上面
    //函数中的变量只会提前到函数的作用域中的最前面,不会出去
    //预解析会分段(多对的script标签中函数重名,预解析的时候不会冲突)

    function f1() {
      console.log(num);//undefined
      var num=10;
    }
    f1();
    //console.log(num);//报错

	
    function f2() {
      console.log("哈哈");
    }
  </script>
  <script>
    f2();//嘎嘎
    function f2() {
      console.log("嘎嘎");
    }
  </script>
</head>
<body>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$永远的24k纯帅$</title>
  <script>

    var a;
    function a() {
      console.log('aaaaa');
    }
    console.log(a);//函数a
    a = 1;
    console.log(a);//1

    var a1;
    a1 = 18;
    function f1() {
      var b1;
      var a1;
      b1 = 9;
      console.log(a1);//undefined
      console.log(b1);//9
      a1 = '123';
    }
    f1();


    function f2() {
      var a2;//局部变量
      a2=9;
      //隐式全局变量
      b2=9;
      c2=9;
      console.log(a2);//9
      console.log(b2);//9
      console.log(c2);//9
    }
    f2();
    console.log(c2);//9
    console.log(b2);//9
    //console.log(a2);//报错

  </script>

  <script>

    //f3();//报错
    var f3=function () {
      console.log(a);
      var a=10;
    };

  </script>
</head>
<body>


</body>
</html>