JavaScript学习总结（作用域、JS预解析）

2023-09-16 16:22:52

一、作用域

1、作用域概述

       通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.JavaScript作用域：就是代码名字（变量）在某个范围内起作用和效果  目的是为了提高程序的可靠性更重要的是减少命名冲突
        // 2. js的作用域（es6）之前：全局作用域 局部作用域
        // 3. 全局作用域：整个script标签 或者是一个单独的js文件
        var num = 10;
        var num = 30;
        console.log(num);  // 结果为：30

        // 4. 局部作用域 在函数内部就是局部作用域 这个代码的名字只是在函数内部起效果和作用
        function fn(){
            // 局部作用域
            var num = 20;
            console.log(num);  // 结果为：20
        }
        fn();  // 调用
    </script>
</body>
</html>

二、变量的作用域

1、变量作用域的分类

      在JavaScript中，根据作用域的不同，变量可以分为两种：

  • 全局变量
  • 局部变量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 变量的作用域：根据作用域的不同，变量可以分为全局变量和局部变量
        // 1. 全局变量：在全局作用域下的变量  在全局下都可以使用
        // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
        var num = 10;  // num就是一个全局变量
        console.log(num);  //结果为：10

        function fn() {
            console.log(num);  //结果为：10
        }
        fn();

        // 2. 局部变量：在局部作用域的变量  后者在函数内部的变量就是局部变量
        // 注意：函数的形参也可以看做是局部变量
        function fun() {
            var num1 = 10; // num1就是局部变量 只能在函数内部使用
            num2 = 20;
        }
        fun();
        console.log(num2);  //结果为：20

        // 3. 从执行效率来看全部变量和局部变量
        // (1) 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
        // (2) 局部变量 当我们程序执行完毕就会销毁，比较节约内存资源
    </script>
</body>
</html>

2、全局变量

      在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）

  • 全局变量在代码的任何位置都可以使用
  • 在全局作用域下 var 声明的变量 是全局变量
  • 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

3、局部变量

      在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

  • 局部变量只能在该函数内部使用
  • 在函数内部 var 声明的变量是局部变量
  • 函数的形象实际上就是局部变量

4、全局变量和局部变量的区别

  • 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
  • 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码运行结束后，就会被销毁，因此更节省内存空间

5、JS 没有块级作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // js中没有块级作用域 js的作用域：全局作用域 局部作用域 现阶段我们js 没有块级作用域
        // 我们js 也是 es6 的时候新增的块级作用域
        // 块级作用域{} if{} for{}
        // java
        // if(xx) {
        //     int num = 10;
        // }
        // 外面的是不能调用num的
        if (3 < 5) {
            var num = 10;
        }
        console.log(num);  //结果为：10
    </script>
</body>
</html>

三、作用域链

  • 只要是代码，就至少有一个作用域
  • 写在函数内部的局部作用域
  • 如果函数中还有函数，那么在这个作用域中就可以诞生一个作用域
  • 根据在内部可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 作用域链：内部函数访问外部函数变量，采取的是链式查找的方式来决定取那个值 这种结构我们成为作用域链 就近原则
        var num = 10;

        function fn() {  // 外部函数
            var num = 20;

            function fun() {  // 内部函数
                console.log(num);
            }
            fn();
        }
        fn();
    </script>
</body>
</html>

案例1：结果是几？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 案例1：结果是几？
        function f1() {
            var num = 123;

            function f2() {
                var num = 0;
                console.log(num);  //结果为：123
            }
            f2();
        }
        var num = 456;
        f1();
    </script>
</body>
</html>

案例2：结果是几？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a = 1;
        function fn1() {
            var a = 2;
            var b = '22';
            fn2();
            function fn2() {
                var a = 3;
                fn3();
                function fn3() {
                    var a = 4;
                    console.log(a);  //结果为：4
                    console.log(b);  //结果为：22
                }
            }
        }
        fn1();
    </script>
</body>
</html>

四、JavaScript 预解析

1、预解析

      JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1问
        // console.log(num);
        // 2问
        console.log(num);  // undefined 
        var num = 10;
        // 相当于执行了以下代码
        // var num;
        // console.log(num);
        // num = 10;

        // 3问
        fn(); 

        function fn() {
            console.log(11);  //结果为：11
        }
        // 4问
        // fun();  // 报错
        var fun = function() {
            console.log(22);  //结果为：22
        }
        fun();
        //函数表达式 调用必须写在函数表达式的下面
        // 相当于执行了以下代码
        // var fun;
        // fun();
        // fun = function() {
        //     console.log(22);
        // }
        
        // 1. 我们js引擎运行js 分为两步： 预解析 代码运行
        // (1). 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
        // (2). 代码执行 按照代码书写的顺序从上往下执行

        // 2. 预解析分为 变量预解析 (变量提升) 和 函数预解析(函数提升)
        // (1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面  不提升赋值操作
        // (2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面  不调用函数
    </script>
</body>
</html>

2、预解析案例

案例1：结果是几？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 预解析案例
        // 案例1
        var num = 10;
        fun();

        function fun() {
            console.log(num);  // 结果为：undefined
            var num = 20;
        }
        // 相当于执行了以下操作
        // var num;

        // function fun() {
        //     var num;
        //     console.log(num);
        //     num = 20;
        // }
        // num = 10;
        // fun();
    </script>
</body>
</html>

案例2：结果是几？


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 案例2
        var num = 10;

        function fn() {
            console.log(num);  //结果为：undefined
            var num = 20;
            console.log(num);  //结果为：20
        }
        fn();
        // 相当于以下代码
        var num;
        function fn() {
            var num
            console.log(num);  //结果为：undefined
            var num = 20;
            console.log(num);  //结果为：20
        }
        num = 10;
        fn();
    </script>
</body>
</html>

案例3：结果是几？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 案例3
        var a = 18;
        f1();

        function f1() {
            var b = 9;
            console.log(a);  // 结果为：undefined
            console.log(b);  // 结果为：9
            var a = '123'
        }
        // 相当于以下代码
        var a;
        function f1() {
            var b;
            var a;
            b = 9;
            console.log(a);  // 结果为：undefined
            console.log(b);  // 结果为：9
            var a = '123'
        }
        a = 18;
        f1();
    </script>
</body>
</html>

案例4：结果是几？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 案例4
        f1();
        console.log(c);  // 结果为：9
        console.log(b);  // 结果为：9
        console.log(a);  // 报错

        function f1() {
            var a = b = c = 9;
            console.log(a);  // 结果为：9
            console.log(b);  // 结果为：9
            console.log(c);  // 结果为：9
        }
        // 以下代码
        function f1() {
            var a;
            var a = b = c = 9;
            // 相当于  var a = 9; b = 9; c = 9;  b和c 直接赋值 没有var声明 当全局变量看
            // 集体声明 var a = 9, b = 9, c = 9;
            console.log(a);  //结果为：9
            console.log(b);  // 结果为：9
            console.log(c);  // 结果为：9
        }
        f1();
        console.log(c);  // 结果为：9
        console.log(b);  // 结果为：9
        console.log(a);  // 报错
    </script>
</body>
</html>

更多推荐

Linux下的buff/cache

目录一、buff/cache二、buff/cache与内存管理三、buff/cache对系统性能的影响四、优化buff/cache1、调整vm.dirty_ratio和vm.dirty_background_ratio2、配置vm.swappiness3、配置vm.vfs_cache_pressure五、释放buff/

5G相关信息

5G（第五代移动通信技术）是一种高级的通信技术，包括了多种算法和协议，用于实现高速、低延迟、可靠的无线通信。要实现5G算法，需要深入了解各种子系统和协议的工作原理，并根据需要编写相应的代码。以下是一些与5G相关的核心算法和技术，以及简要的描述：1.**OFDM(OrthogonalFrequencyDivisionMu

【Python】Python 网络编程 ( Socket 套接字简介 | Socket 套接字使用步骤 | Socket 套接字服务端与客户端开发 )

文章目录一、Socket套接字简介1、Socket套接字概念2、Socket套接字类型3、Socket套接字使用步骤4、Socket套接字服务端与客户端二、Socket服务端与客户端开发1、服务端2、客户端3、执行结果一、Socket套接字简介1、Socket套接字概念Socket套接字是一种进程之间的通信机制,通过套

人工智能安全-2-非平衡数据处理(2)

5算法层面代价敏感：设置损失函数的权重，使得少数类判别错误的损失大于多数类判别错误的损失；单类分类器方法：仅对少数类进行训练，例如运用SVM算法；集成学习方法：即多个分类器，然后利用投票或者组合得到结果。6代价敏感算法6.1相关问题经典分类方法一般假设各个类别的错分代价是相同的，并且以全局错分率最低为优化目标。以入侵检

Observability：使用 OpenTelemetry 手动检测 Go 应用程序

作者：LucaWintergerstDevOps和SRE团队正在改变软件开发的流程。DevOps工程师专注于高效的软件应用程序和服务交付，而SRE团队是确保可靠性、可扩展性和性能的关键。这些团队必须依赖全栈可观察性解决方案，使他们能够管理和监控系统，并确保问题在影响业务之前得到解决。整个现代分布式应用程序堆栈的可观察性

SpringBoot接受请求参数

1.简单参数1.1原始方法说明：获取请求传来的name参数，age参数的值。//简单方式@RestControllerpublicclassRequestController{@GetMapping("/books")publicStringsimpleParam(HttpServletRequestrequest){

Java 基础学习总结（207）—— 具有革命性、未来性、开创新纪元的 JDK 21， 它来了

具有革命性、未来性、开创新纪元的JDK21按照官方的时间计划表，今天终于是要正式GA了：https://openjdk.org/projects/jdk/21/GA，就是我上面框起来的“GeneralAvailability”的缩写，直译成中文，虽然是“普通可用”的意思，但是在软件行业，它就代表正式版。如果对外发布一个

慢SQL治理经验总结

在过去两年的工作中，我们团队曾负责大淘宝技术的慢SQL治理工作，作为横向的数据安全治理平台，如何快速准确地发现部门内所有应用的慢SQL，并进行高效的推动治理，同时覆盖多个开发、生产环境，是一个很大的挑战。以下是一些经验分享，我们通过持续的慢SQL推动治理，有效降低了DB相关的线上问题，极大提高了系统稳定性。关于慢SQL

MVVM 模式、Vue 双向绑定原理

MVVM模式是什么传统的MVC指的是,用户操作会请求服务端路由，路由会调用对应的控制器来处理，控制器会获取数据。将结果返回给前端,页面重新渲染MVVM（Model-View-ViewModel）是一种软件架构模式，用于实现界面（UI）和业务逻辑的分离。他的设计目标是将界面的开发与后端的业务逻辑分离，使得代码易于理解、维

为什么要选择Spring cloud Sentinel

为什么要选择SpringcloudSentinel🍎对比Hystrix🍂雪崩问题及解决方案🍂雪崩问题🍂.超时处理🍂仓壁模式🍂断路器🍂限流🍂总结🍎对比Hystrix在SpringCloud当中支持多种服务保护技术：NetfixHystrixSentinelResilience4J早期比较流行的是Hyst

线性回归网络

李沐大神的《动手学深度学习》，是我入门机器学习的首课，因此在这里记录一下学习的过程。线性回归的从零开始实现线性回归是理解机器学习的基础，它经常用来表示输入和输出之间的关系。线性回归基于几个简单的假设：首先，假设自变量X和因变量y之间的关系是线性的，即y可以表示为X中元素的加权和，这里通常允许包含观测值的一些噪声。下面基

热文推荐
  1. 如何延迟Fragment的导航过渡

    目录前言postponeEnterTransitionstartPostponedEnterTransitionexecutePendingTransactions总结前言做应用提高用户体验是很关键的，对于用户体验来说有一件事是不能回避的，就是页面切换的过渡动画。因为后一个页面可能会加载数据，所以切换时后一个页面是空白

  2. npm发布vue3自定义组件库--方法二

    npm发布vue3自定义组件库创建项目vuecreatetest-ui自定义组件创建自定义组件，组件名称根据你的需求来，最好一个组件一个文件夹，下图是我的示例。src/components组件和你写页面一样，所谓组件就是方便实用，不用重复搬动页面到不同的项目，可以直接install到你本地的项目，下图是一个组件示例。编

  3. 【python】系列之item.taobao 获取商品详情API接口调用

    item.taobao获取商品详情API接口调用API从技术角度来说就是应用程序编程接口。通过API我们可以直接获取一些我们需要的数据结果，而不需要自己编写相应的程序，有点类似模块化调用函数，大大加快了我们编程的速度。当然这个数据传输是需要网络的，所以一般API的形式看起来有点像网页链接。通俗来说API是什么呢？就是一

  4. 网络安全（红客）自学

    前言1.这是一条坚持的道路,三分钟的热情可以放弃往下看了.2.多练多想,不要离开了教程什么都不会了.最好看完教程自己独立完成技术方面的开发.3.有时多google,baidu,我们往往都遇不到好心的大神,谁会无聊天天给你做解答.4.遇到实在搞不懂的,可以先放放,以后再来解决.一、什么是网络安全网络安全可以基于攻击和防御

  5. 【C++】内联函数 ④ ( C++ 编译优化 - 没有 inline 关键字修饰的函数也可能被内联 | C++ 编译器内联限制 | 内联失败的几种情况 )

    文章目录一、C++编译优化-没有inline关键字修饰的函数也可能被内联1、函数内联的不确定性2、C++编译器的内联优化3、内联优化细节二、C++编译器内联限制1、内联失败的几种情况2、内联失败的本质分析一、C++编译优化-没有inline关键字修饰的函数也可能被内联1、函数内联的不确定性现在的C++编译器能够进行编译

  6. 6.3 应用动态内存补丁

    动态内存补丁可以理解为在程序运行时动态地修改程序的内存，在某些时候某些应用程序会带壳运行，而此类程序的机器码只有在内存中被展开时才可以被修改，而想要修改此类应用程序动态补丁将是一个不错的选择，动态补丁的原理是通过CreateProcess函数传递CREATE_SUSPENDED将程序运行起来并暂停，此时程序会在内存中被

  7. 【LeetCode题目详解】第十章 单调栈part03 84.柱状图中最大的矩形（day60补）

    本文章代码以c++为例！一、力扣第84题：柱状图中最大的矩形题目：给定n个非负整数，用来表示柱状图中各个柱子的高度。每个柱子彼此相邻，且宽度为1。求在该柱状图中，能够勾勒出来的矩形的最大面积。示例1:输入：heights=[2,1,5,6,2,3]输出：10解释：最大的矩形为图中红色区域，面积为10示例2：输入：hei

  8. 前端自定义导出PPT

    1、背景前端导出PPT，刚接触这个需求，还是比较懵逼，然后就在网上查找资料，最终确认是可行的；这个需求也是合理的，我们做了一个可视化数据报表，报表导出成PPT，将在线报表转成文档类型留存；2、技术方案实现这种复杂的功能，都得依赖前辈匠人，还好有一个比较完善好用的库：pptxgenjs只有英文文档：QuickStartG

  9. 代码大全阅读随笔(七)

    循环控制循环控制会出现什么样的错误，任何一种答案都可以归结到下面所说的问题之一：忽略或者错误的对循环执行初始化，忽略了对累加变量或者其他与循环有关变量执行初始化，不正确的嵌套，不正确的循环终止，忽略或者错误的增加了循环变量的值，以及用不正确的循环下标访问数组元素等等。要点：循环很复杂。保持循环简单将有助于别人阅读你的代