JavaScript 作用域-作用域概述,变量作用域,作用域链

news2024/10/5 18:46:37

JavaScript 作用域-作用域概述,变量作用域,作用域链


目录
  • JavaScript 作用域-作用域概述,变量作用域,作用域链
    • 1. 作用域
      • 1.1 作用域概述
      • 1.2 全局作用域
      • 1.3 局部作用域 (函数作用域)
      • 1.4 JS 没有块级作用域
    • 2. 变量的作用域
      • 2.1 变量作用域的分类
      • 2.2 全局变量
      • 2.3 全局变量和局部变量的区别
    • 3. 作用域链

学习目标:

作用域
变量的作用域
作用域链

1. 作用域

1.1 作用域概述

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

JavaScript(es6前)中的作用域有两种:
	全局作用域
	局部作用域(函数作用域)
<!DOCTYPE html>
<html lang="en">

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

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

<body>

</body>

</html>

1.2 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

1.3 局部作用域 (函数作用域)

作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。

1.4 JS 没有块级作用域

2. 变量的作用域

2.1 变量作用域的分类

在JavaScript中,根据作用域的不同,变量可以分为两种:
	全局变量
	局部变量

2.2 全局变量

2.3 全局变量和局部变量的区别

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

测试:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 变量的作用域: 根据作用域的不同我们变量分为全局变量和局部变量
        // 1. 全局变量: 在全局作用域下的变量 在全局下都可以使用
        // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
        var num = 10; // num就是一个全局变量
        console.log(num);

        function fn() {
            console.log(num);

        }
        fn();
        // console.log(aru);

        // 2. 局部变量   在局部作用域下的变量   后者在函数内部的变量就是 局部变量
        // 注意: 函数的形参也可以看做是局部变量
        function fun(aru) {
            var num1 = 10; // num1就是局部变量 只能在函数内部使用
            num2 = 20;
        }
        fun();
        // console.log(num1);
        // console.log(num2);
        // 3. 从执行效率来看全局变量和局部变量
        // (1) 全局变量只有浏览器关闭的时候才会销毁,比较占内存资源
        // (2) 局部变量 当我们程序执行完毕就会销毁, 比较节约内存资源
    </script>
</head>

<body>

</body>

</html>

3. 作用域链

只要是代码,就至少有一个作用域

写在函数内部的局部作用域

如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域

根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/136247.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

校验和之概念、计算原理、检验原理、实例计算、代码编程,力荐力荐力荐

阅读前请看一下&#xff1a;我是一个热衷于记录的人&#xff0c;每次写博客会反复研读&#xff0c;尽量不断提升博客质量。文章设置为仅粉丝可见&#xff0c;是因为写博客确实花了不少精力。不用担心你关注我而我却不关注你&#xff0c;因为我是个诚信互关的人&#xff01;&…

如何用LightningChart创建Android图表数据可视化应用程序?(下)

LightningChart JS 是一款高性能的 JavaScript 图表工具&#xff0c;专注于性能密集型、实时可视化图表解决方案。 LightningChart .JS | 下载试用&#xff08;qun&#xff1a;740060302&#xff09;https://www.evget.com/product/4189/download 在上一篇&#xff0c;我们介…

CDN是什么?用了CDN就一定比不用更快吗?

对于开发同学来说&#xff0c;CDN这个词&#xff0c;既熟悉又陌生。 平时搞开发的时候很少需要碰这个&#xff0c;但却总能听到别人提起。 我们都听说过它能加速&#xff0c;也大概知道个原因&#xff0c;但是往深了问。 用了CDN就一定比不用更快吗&#xff1f; 就感觉有些…

Node.js操作Dom ,轻松hold住简单爬虫

前言 前段时间&#xff0c;我发现一个开源题库&#xff0c;题目非常有意思。我想把它整成一个JSON文件做为数据储备&#xff0c;方便整活。 一共有一百五十多道题目&#xff0c;手动CV我肯定是不想干的。于是写了个脚本&#xff0c;在写脚本的过程中&#xff0c;我发现一个能…

Opencv(C++)笔记--利用分水岭算法实现图像分割

1--分水岭算法的原理详细原理讲解可参考&#xff1a;博客1和视频1&#xff1b;原理简述&#xff1a;分水岭算法的基本思想是把图像视为拓扑地貌&#xff0c;图像中每一点像素的灰度值表示该点的海拔高度&#xff0c;每一个局部极小值及其影响区域称为集水盆&#xff0c;而两个集…

csrf漏洞原理及防御

攻击原理 从上图可以看出&#xff0c;要完成一次CSRF攻击&#xff0c;受害者必须依次完成两个步骤 1.登录受信任网站A&#xff0c;并在本地生成Cookie 2.在不登出A的情况下&#xff0c;访问危险网站B 防御原理 csrf能防御的本质是&#xff0c;黑客虽然携带了合法的cookie&a…

振弦采集模块的辅助功能寄存器

振弦采集模块辅助功能寄存器 1.频率值模拟量输出 VMXXX&#xff08;仅 VM501、 VM511&#xff09; 模块支持将当前实时频率值以模拟量形式从管脚输出&#xff0c;模拟量有电流和电压两种输出形式。为了使用此功能&#xff0c;需要将辅助功能寄存器 AUX.[0]设置为 1&#xff0…

<Linux开发> ubuntu开发工具-EasyConnect使用记录

&#xff1c;Linux开发&#xff1e; ubuntu开发工具-EasyConnect使用记录 1、安装EasyConnect 打开EasyConnect官网EasyConnect 根据当前电脑系统选择对应版本下载 作者这里是ubuntu 22.04版本 右击&#xff0c;选择 “软件安装” 即可安装完成&#xff1b;windows版本类似…

数据可视化:揭开“智慧校园”新篇章,助力新时代教育信息化

随着移动互联网、物联网等新一代信息技术的快速发展&#xff0c;建设智慧校园已经具备了成熟的技术条件。自从教育部启动教育信息化2.0计划后&#xff0c;建设智慧校园已成为我国教育信息化发展目标&#xff0c;无论是国家教育事业发展的十三五规划&#xff0c;还是十四五规划&…

Hadoop高手之路7-Hadoop的新特性

文章目录Hadoop高手之路7-Hadoop的新特性一、Hadoop2.0以上新特性二、Yarn资源管理框架1. yarn体系结构2. yarn的工作流程三、HDFS的高可用HA1. HDFS的高可用&#xff08;HA&#xff09;架构2. 搭建Hadoop高可用HA集群1) 规划集群节点2) 环境准备3) 配置HA集群(1) 修改core-sit…

【ROS】—— ROS通信机制——实践与练习(六)

文章目录前言1. 话题发布1.1 C方式实现1.2 python实现2. 话题订阅2.1 C实现2.2 python实现3. 服务调用3.1 C3.2 python4. 参数设置4.1 C4.2 python4.3 运行4.4 其他方式4.4.1 修改小乌龟节点的背景色(命令行实现)4.4.2 启动节点时&#xff0c;直接设置参数4.4.3 通过launch文件…

Java测试框架——JUnit详解(45)

文章目录前言何为JUnit&#xff1f;官方资料JUnit4常用注解和断言代码测试搭建一个JUnit测试环境生命周期忽略测试断言测试异常测试测试时间套件测试JUnit5JUnit5对比JUnit4的好处导包的改变注解的改变扩展JUnit新功能&#xff1a;参考文章JUnit是Java编程语言的单元测试框架&a…

list的介绍及模拟实现

&#x1f308;感谢阅读East-sunrise学习分享——list的介绍及模拟实现 博主水平有限&#xff0c;如有差错&#xff0c;欢迎斧正&#x1f64f;感谢有你 码字不易&#xff0c;若有收获&#xff0c;期待你的点赞关注&#x1f499;我们一起进步 今天想分享介绍一下STL的容器之一lis…

openharmony GPIO 驱动开发

openharmony GPIO 驱动开发GPIO 基础知识GPIO 基础知识——概念GPIO 基础知识——IO 复用GPIO 基础知识——GPIO 分组和编号GPIO 基础知识——用户态测试HDF 框架下 GPIO 驱动HDF 框架下的 GPIO 驱动——案例描述(以 HI3516DV300 平台为例&#xff0c;提供代码)HDF 框架下的 GP…

为什么jvm需要有栈协程?

旧有的servlet生态的线程模型 首先我们先要聊一聊现在我们用的最多的servlet的执行模型是什么&#xff1a; 这个dispatch其实就是一个EventLoop或者说是一个selector来检测注册到其上的链接状态发生的变化 以Tomcat为例子&#xff0c;当这个selector发现存在一个链接可读时&…

【node.js】fs\path\http模块的使用

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;Node.js的fs\path\http模块的使用&#xff0c;模块化开发概念 目录 一、node.js概念与作…

一个曾经分享动态(2021)的回顾和解释-2023-

虽然看过一些典故&#xff0c;里面有名言道&#xff1a; 解释永远是多余的&#xff0c;理解的人不需要&#xff0c;不理解的更不需要。 但是&#xff0c;误会还是需要沟通来消除的。 例如&#xff0c;曾经分享过&#xff1a; 如下都是误会 ↓↓↓↓↓↓↓↓↓ 有朋友联系我&a…

解决东方财富数据接口激活后仍显示reactive的问题

首先确保代码可以在python中导入这个包&#xff1a; from EmQuantAPI import c如果无法导入&#xff0c;就是python没有配置好东方财富的接口&#xff0c;可以参考&#xff1a; Mac版本&#xff1a;Mac使用Python接入东方财富量化接口Choice&#xff0c;调试与获取数据Window…

北京智和信通:信创运维自动化,全栈适配国产软硬件环境

近年来&#xff0c;新基建和信创产业政策东风席卷神州&#xff0c;国产CPU、操作系统、关键应用软件等核心技术步入发展快车道&#xff0c;一批优秀软硬件产品走进政府机关、国企事业单位。在国产软硬件核心技术崛起的过程中&#xff0c;如何迅速搭建起成熟的生态环境是行业面临…

LeetCode135之分发糖果(相关话题:数组,贪心思想)

题目描述 n 个孩子站成一排。给你一个整数数组 ratings 表示每个孩子的评分。 你需要按照以下要求&#xff0c;给这些孩子分发糖果&#xff1a; 每个孩子至少分配到 1 个糖果。相邻两个孩子评分更高的孩子会获得更多的糖果。 请你给每个孩子分发糖果&#xff0c;计算并返回需…