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

最新推荐文章于 2025-01-13 01:27:33 发布
最新推荐文章于 2025-01-13 01:27:33 发布
阅读量407 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43653670/article/details/106095962
本文深入探讨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>

 

 

 

 

 

 

 

JavaScript 高级一 函数的定义和调用；this的指向call、apply、bing；严格模式；高级函数；闭包；递归
m0_55170432的博客
03-25 266
1.0 函数的定义和调用 1.1 函数的定义方式 创建函数的三种方式 1. 自定义函数(命名函数) function fn() {}; 2. 函数表达式 (匿名函数) var fun = function() {}; 3. 利用 new Function('参数1','参数2', '函数体'); Function是构造函数 // 这个只是了解 书写起来太复杂，执行效率低 var f
JavaScript——JavaScript基础：数组 | JavaScript函数：使用、作用域、函数表达式、预解析
li13437542099的博客
06-18 1097
在JavaScript中，内嵌函数可以访问定义在外层函数中的所有变量和函数，并包括其外层函数能访问的所有变量和函数。①全局变量：不在任何函数内声明的变量（显式定义）或在函数内省略var声明的变量（隐式定义）都称为全局变量，它在同一个页面文件中的所有脚本内都可以使用。函数表达式与函数声明的定义方式几乎相同，不同的是函数表达式的定义必须在调用前，而函数声明的方式则不限制声明与调用的顺序。③块级变量：ES 6提供的let关键字声明的变量称为块级变量，仅在“{}”中间有效，如if、for或while语句等。
JavaScript高级03——函数
小白的学习路
02-16 357
1.函数的定义和调用 1.1函数的定义方式 1. 方式1 函数声明方式 function 关键字 (命名函数) function fn(){} 2. 方式2 函数表达式(匿名函数) var fn = function(){} 3. 方式3 new Function() var f = new Function('a', 'b', 'console.log(a + b)'); f(1, 2); var fn = new Function('参数1','参数2'..., '函数体') 注意 /*Fun
34.js--fn.fn的题、原型
m0_63774574的博客
07-06 507
fn.fn的题、原型
JS 学习笔记 | 函数进阶
鲁毅的博客
06-15 294
1.函数的定义和调用 1.1 函数的定义方式 1.1.1 函数声明 语法： function func() {}; 1.1.2 函数表达式 语法： var func = function() {}; 1.1.3 构造函数 语法： var func = new Function("参数1", "参数2",..., "函数体"); 注意： Function 里面参数都必须是字符串格式 第三种方式执行效率低，也不方便书写，所以使用较少。 所有函数都是 Function 的实例（对象） 函数也属于对象。
JavaScript学习之函数的定义方式及调用
篱落~~成殇~~
02-19 383
javascript学习之函数的定义方式及调用 （一）函数的定义 1、自定义函数（命名函数） 定义格式如下： function 函数名 (参数1，参数2，...) { 函数体 }； 2、函数表达式（匿名函数） 定义格式如下： var 变量名 = function (参数1，参数2，...) { 函数体 }； 3、利用new Function(‘参数1’，‘参数2’，…，‘函数体’) 定义格式如下： var 变量名 = new Function ('参数1'，'参数2'，...，'
Javascript学习笔记之函数篇（六） : 作用域与命名空间
11-30
例如，以下代码展示了JavaScript的函数作用域： ```javascript function test() { // a scope for(var i = 0; i ; i++) { // not a scope // count } console.log(i); // 10 } ``` 在这个例子中，尽管`for`...
Javascript学习笔记之函数篇（六） : 作用域与命名空间
10-25
- **函数作用域**：在JavaScript中，只有函数可以创建新的作用域。在函数内部定义的变量和函数仅在其所在函数内部可见，不能被外部访问。如示例所示，`test`函数内的`i`变量仅在函数内部有效，全局的`console.log(i...
JavaScript学习笔记(三)：JavaScript也有入口Main函数
01-19
在C和Java中，都有一个程序的入口函数或方法，即main函数或main方法。而在JavaScript中，程序是从JS源文件的头部...具体来说，在执行流程进入函数时会建立一个新的作用域，在函数执行完成退出时会销毁这个作用域。函
Javascript学习笔记之 函数篇（一） : 函数声明和函数表达式
01-19
函数 foo 将会在整个程序执行前被 hoist (提升)，因此它在定义 foo 函数的整个 scope (作用域)中都是可用的。即使在函数定义之前调用它也没问题。 foo(); // Works because foo was created before this code runs ...
一道优雅面试题分析js中fn()和return fn()的区别
11-22
在js中，经常会遇到在函数里调用其它函数的情况，这时候会有 fn() 这种调用方式，还有一种是 return fn() 这种调用方式，一些初学者经常会被这两种方式给绕晕了。这里用一个优雅的面试题来分析一下两种方式的不同之处。  var i = 0; function fn(){ i++; if(i < 10){ fn(); }else{ return i; } } var result = fn(); console.log(result); 这是一道隐藏了坑的面试题，看似很简单，大部分人可能想都不想就答出了10。而实际上运行可知打印出来的是 undefined。这道陷阱题很
Javascript 基础_var obj={x 1} function fn(o){ o=100 } fn(obj) cons
最新发布
2501_90231106的博客
01-13 346
有时我们会尝试“改变”字符串的内容，但在JS中，任何看似对string值的”修改”操作，实际都是创建新的string值。是因为，在js中，如果某个变量没有var声明，会自动到上一层作用域中去找这个变量的声明语句，如果找到，就使用，如果没有找到，继续向上查找，一直查找到全局作用域为止，如果全局中仍然没有这个变量的声明语句，那么会自动在全局作用域进行声明，这个就是js中的。如果是按引用传递，修改形参o的值，应该影响到实参才对。据按共享传递的求值策略，a和b是两个不同的引用(b是a的引用副本)，但引用相同的值。
js-函数（闭包、私有、递归、自调）、变量(隐士)和作用域
muzidigbig的博客
06-21 4006
匿名函数 闭包 递归 高阶函数 函数柯里化 变量和作用域 变量声明提升 作用域链
探索创新：Fn.js - 轻量级JavaScript函数库
gitblog_00004的博客
04-26 459
探索创新：Fn.js - 轻量级JavaScript函数库 是一个开源的JavaScript函数库，专注于提供简单、高效的工具函数，为你的Web应用开发赋予更多的灵活性和便利性。在这个快速发展的Web世界中，Fn.js以其轻巧、模块化的设计理念，旨在简化开发者的工作流程，提高代码质量。 技术分析 Fn.js的核心是一个精心挑选的功能集，包括数组处理、对象操作、类型检查等常用功能。每个功能都是独立的...
jquery插件开发方法
程序人生
06-23 1248
jquery插件开发方法转自:http://ioryioryzhan.javaeye.com/blog/232971For: 初学者 jQuery为开发插件提拱了两个方法，分别是： jQuery.fn.extend(object);jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身
再谈Javascript中function fn(){}和var fn=function(){}
pusongyang的专栏
12-02 6400
用Javascript 两大特点，也是JS引擎的实现必然导致的： 1) 返回值。在JS引擎中，所有的语法，操作都有返回值，而且通常返回值是它本身或undefined。通常我们可以用"()"操作符，来获取当前句子的返回值(部分操作符不能用，如var)。例如：a=3;其实这行的返回值就是3，所以在a=b=3时，JS引擎就可以正确的执行下去，首先3赋值给b,然后当前的返回值3再赋值给a（而不是大家所认
jQuery中$.extend
06-10 177
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子：$("#div").abc(); jQuery为开发插件提拱了两个方法，分别是： jQuery.extend(object);为扩展...
45、JavaScript的运动----链式运动----回调函数fn参数的添加
Learning
06-28 550
1、链式运动框架       回调函数         • 运动停止时，执行函数         • 运动停止时，开始下一次运动 2、测试代码       2.1 move.js代码 function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

什么都不懂的菜鸟玩家

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值