当前位置： 首页 > news >正文

js进阶笔记之作用域

news 2026/4/22 15:26:29

目录

全局作用域

局部作用域

函数作用域

块作用域

作用域链

闭包

垃圾回收机制

作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。

全局作用域

<script> 标签和 .js 文件的【最外层】就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问

<script>// 此处是全局function sayHi() {// 此处为局部}// 此处为全局
</script>

全局作用域中声明的变量，任何其它作用域都可以被访问，如下代码所示  

<script>// 全局变量 nameconst name = '小明'// 函数作用域中访问全局function sayHi() {// 此处为局部console.log('你好' + name)}// 全局变量 flag 和 xconst flag = truelet x = 10// 块作用域中访问全局if(flag) {let y = 5console.log(x + y) // x 是全局的}
</script>

总结：

  1. 为 window 对象动态添加的属性默认也是全局的，不推荐！

  2. 函数中未使用任何关键字声明的变量为全局变量，不推荐！！！

  3. 尽可能少的声明全局变量，防止全局变量被污染

JavaScript 中的作用域是程序被执行时的底层机制，了解这一机制有助于规范代码书写习惯，避免因作用域导致的语法错误。

 

 

局部作用域

局部作用域分为函数作用域和块作用域。

函数作用域

在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。

<script>// 声明 counter 函数function counter(x, y) {// 函数内部声明的变量const s = x + yconsole.log(s) // 18}// 设用 counter 函数counter(10, 8)// 访问变量 sconsole.log(s)// 报错
</script>

总结： 

  1. 函数内部声明的变量，在函数外部无法被访问

  2. 函数的参数也是函数内部的局部变量

  3. 不同函数内部声明的变量无法互相访问

  4. 函数执行完毕后，函数内部的变量实际被清空了

块作用域

在 JavaScript 中使用 {} 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。

<script>{// age 只能在该代码块中被访问let age = 18;console.log(age); // 正常}// 超出了 age 的作用域console.log(age) // 报错let flag = true;if(flag) {// str 只能在该代码块中被访问let str = 'hello world!'console.log(str); // 正常}// 超出了 age 的作用域console.log(str); // 报错for(let t = 1; t <= 6; t++) {// t 只能在该代码块中被访问console.log(t); // 正常}// 超出了 t 的作用域console.log(t); // 报错
</script>

JavaScript 中除了变量外还有常量，常量与变量本质的区别是【常量必须要有值且不允许被重新赋值】，常量值为对象时其属性和方法允许重新赋值。

<script>// 必须要有值const version = '1.0.0';// 不能重新赋值// version = '1.0.1';// 常量值为对象类型const user = {name: '小明',age: 18}// 不能重新赋值user = {};// 属性和方法允许被修改user.name = '小明明';user.gender = '男';
</script>

总结：

  1. let 声明的变量会产生块作用域，var 不会产生块作用域

  2. const 声明的常量也会产生块作用域

  3. 不同代码块之间的变量无法互相访问

  4. 推荐使用 let 或 const

作用域链

作用域链本质上是底层的变量查找机制，在函数被执行时，会优先查找当前函数作用域中查找变量，如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域

<script>// 全局作用域let a = 1let b = 2// 局部作用域function f() {let c// let a = 10;console.log(a) // 1 或 10console.log(d) // 报错// 局部作用域function g() {let d = 'yo'// let b = 20;console.log(b) // 2 或 20}// 调用 g 函数g()}console.log(c) // 报错console.log(d) // 报错f();
</script>

 

  1. 嵌套关系的作用域串联起来形成了作用域链

  2. 相同作用域链中按着从小到大的规则查找变量

  3. 子作用域能够访问父作用域，父级作用域无法访问子级作用域

闭包

闭包概念  ：  内部函数及其对外部变量的引用捆绑在一起
                       或  内部函数访问外部函数的变量 

形成条件：闭包     内部函数＋外部函数  (提供一个变量)


    作用：闭包    延伸变量的作用域，形成独立的作用域

    原理：作用域链

    缺点：容易造成内存泄漏（内存因某种原因无法释放）

<body><script>// 1. 闭包 : 内层函数 + 外层函数变量// function outer() {//   const a = 1//   function f() {//     console.log(a)//   }//   f()// }// outer()// 2. 闭包的应用： 实现数据的私有。统计函数的调用次数// let count = 1// function fn() {//   count++//   console.log(`函数被调用${count}次`)// }// 3. 闭包的写法  统计函数的调用次数function outer() {let count = 1function fn() {count++console.log(`函数被调用${count}次`)}return fn}const re = outer()// const re = function fn() {//   count++//   console.log(`函数被调用${count}次`)// }re()re()// const fn = function() { }  函数表达式// 4. 闭包存在的问题： 可能会造成内存泄漏</script>
</body>

垃圾回收机制


    JS为我们声明的变量、函数等分配内存，当这些变量、函数、对象的内存不再使用->垃圾

    垃圾回收(GC)机制

    引用计数------ie浏览器
    
    简单，容易造成内存泄漏


    标记清除

    标记通过全局标记所有从全局出发能够访问到的对象，不能够访问到的对象未被标记

// 垃圾回收(GC)机制// let cat = { name: '猫', age: 10 }// console.log(cat.name)// cat = null// 引用计数-ie浏览器// 简单。容易造成内存泄漏// let cat = { name: '猫', age: 10 }// let cat2 = cat// cat = nullfunction f() {let o = {a: 1,}let o2 = {b: 2,}o.b = o2o2.a = o}f()// 标记清除// 标记 通过全局 标记所有从全局出发能够访问到的对象，不能够访问到的对象未被标记function fn() {c = {}let o = {}let o2 = {}o.a = o2o2.b = o}fn()console.log(c)

相关文章：

js进阶笔记之作用域

目录 全局作用域 局部作用域 函数作用域 块作用域 作用域链 闭包 垃圾回收机制 作用域&#xff08;scope&#xff09;规定了变量能够被访问的“范围”&#xff0c;离开了这个“范围”变量便不能被访问&#xff0c;作用域分为全局作用域和局部作用域。 全局作用域 <…...

编程日记 2023/11/25 9:56:18

【汉诺塔 —— （经典分治递归）】

汉诺塔 —— &#xff08;经典分治递归&#xff09; 一.汉诺塔介绍二.分治算法解决汉诺塔问题三.汉诺塔问题的代码实现四.主函数测试展示 一.汉诺塔介绍 汉诺塔问题源自印度一个古老的传说&#xff0c;印度教的“创造之神”梵天创造世界时做了 3 根金刚石柱&#xff0c;其中的一…...

编程日记 2023/11/25 9:54:16

APP运营常用的ChatGPT通用提示词模板

用户获取&#xff1a;请帮助我制定一个用户获取计划&#xff0c;包括目标用户群体、获取渠道、营销策略等方面的内容。 用户留存&#xff1a;我们希望提高用户的留存率&#xff0c;请帮助我分析用户流失的原因&#xff0c;并提供一些留存策略和措施。 用户活跃度&#xff1a;…...

编程日记 2023/11/25 9:53:16

医学检验(LIS)管理系统源码，LIS源码，云LIS系统源码

医学检验(LIS)管理系统源码&#xff0c;云LIS系统全套商业源码 随着全自动生化分析仪、全自动免疫分析仪和全自动血球计数器等仪器的使用&#xff0c;检验科的大多数项目实现了全自动化分析。全自动化分析引入后&#xff0c;组合化验增多&#xff0c;更好的满足了临床需要&…...

编程日记 2023/11/25 9:52:15

RabbitMQ 安装（在docker容器中安装）

为什么要用&#xff1f; RabbitMQ是一个开源的消息代理和队列服务器&#xff0c;主要用于在不同的应用程序之间传递消息。它实现了高级消息队列协议&#xff08;AMQP&#xff09;&#xff0c;并提供了一种异步协作机制&#xff0c;以帮助提高系统的性能和扩展性。 RabbitMQ的作…...

编程日记 2023/11/25 9:51:14

机器学习入门

简介 https://huggingface.co/是一个AI社区&#xff0c;类似于github的地位。它开源了许多机器学习需要的基础组件如&#xff1a;Transformers, Tokenizers等。 许多公司也在不断地往上面提交新的模型和数据集&#xff0c;利用它你可以获取以下内容&#xff1a; Datasets : 数…...

编程日记 2023/11/25 9:50:13

HarmonyOS ArkTS 保存应用数据（十）

1 概述 在移动互联网蓬勃发展的今天&#xff0c;移动应用给我们生活带来了极大的便利&#xff0c;这些便利的本质在于数据的互联互通。因此在应用的开发中数据存储占据了非常重要的位置&#xff0c;HarmonyOS应用开发也不例外。 2 什么是首选项 首选项为应用提供Key-Value键…...

编程日记 2023/11/25 9:49:12

【JavaEE】Spring更简单的存储和获取对象（类注解、方法注解、属性注入、Setter注入、构造方法注入）

一、存储Bean对象 在这篇文章中我介绍了Spring最简单的创建和使用&#xff1a;Spring的创建和使用 其中存储Bean对象是这样的&#xff1a; 1.1 配置扫描路径 想要成功把对象存到Spring中&#xff0c;我们需要配置对象的扫描包路径 这样的话&#xff0c;就只有被配置了的包…...

编程日记 2023/11/25 9:48:11

linux上的通用拍照程序

最近因为工作需要&#xff0c;在ubuntu上开发了一个拍照程序。 为了找到合适的功能研究了好几种实现方式&#xff0c;在这里记录一下。 目录 太长不看版 探索过程 v4l2 QT opencv4.2 打开摄像头 为什么不直接打开第一个视频节点 获取所有分辨率 切换摄像头 太长不看…...

编程日记 2023/11/25 9:47:10

代码随想录-刷题第七天

454. 四数相加II 题目链接&#xff1a;454. 四数相加II 思路&#xff1a;哈希法。使用map集合&#xff0c;key存放ab的值&#xff0c;value存放ab出现的次数。使用两层循环&#xff0c;循环前两个数组&#xff0c;找出ab&#xff0c;对map赋值。再用两层循环&#xff0c;遍历…...

编程日记 2023/11/25 9:46:09

C# 获取图像、字体等对象大小的数据结构SizeF

如果你想要获取字符串 "你好吗" 的字节数组长度或者字符数&#xff0c; 使用如下代码&#xff1a; string s "你好吗"; //字节数组长度 int byteCount System.Text.Encoding.UTF8.GetBytes(s).Length; //字符数 int charCount s.Length; 如果你想获取…...

编程日记 2023/11/25 9:45:07

「 系统设计 」 为什么要做架构分层？

「 系统设计 」 为什么要做架构分层&#xff1f; 参考&鸣谢 3.设计模式之分层思维&#xff1a;为什么要做代码分层架构&#xff1f; 从零开始学架构&#xff08;八&#xff09;分层架构和设计模式 架构模式之分层架构总结 文章目录 「 系统设计 」 为什么要做架构分层&…...

编程日记 2023/11/25 9:44:07

4：kotlin 方法（Functions）

想要声明一个函数需要使用fun关键字 fun hello() {return println("Hello, world!") }fun main() {hello()// Hello, world! }格式: fun 方法名(参数1: 参数1类型, 参数2 : 参数2类型, ...): 返回值类型 {方法体return 返回值 }fun 方法名(参数1: 参数1类型, 参数2…...

编程日记 2023/11/25 9:43:05

Pycharm run 输出界面控制一行能够输出的元素个数

Pycharm run 输出界面控制一行能够输出的元素个数 今天遇到了一个问题&#xff0c;当我们在 Pycharm 中打印输出数组时&#xff0c;如果数组一行的元素个数过多&#xff0c;那么我们在打印时就会出现以下问题。 代码如下&#xff1a; import numpy as npx np.array([[0., 0.7…...

编程日记 2023/11/25 9:42:04

C++初级项目webserver项目流程介绍（2）

一、引言 C的webserver项目是自己在学完网络编程后根据网课的内容做的一个初级的网络编程项目。 这个项目的效果是可以在浏览器通过输入网络IP地址和端口&#xff0c;然后打开对应的文件目录 效果如下&#xff1a; 也可以打开文件夹后点击目录&#xff0c;打开到对应的文件夹…...

编程日记 2023/11/25 9:41:03

SIPp mac和debian用法可能略有差别

<ereg regexp"<(.*)>" search_in"hdr" header"Contact:" check_it"true" assign_to"dummy,remote_contact"/> debian没事&#xff0c;但mac报错 <变&lt >变&gt 就都冇问题了 https://github.…...

编程日记 2023/11/25 9:40:02

echarts的横向柱状图文字省略，鼠标移入显示内容 vue3

效果图 文字省略 提示 如果是在x轴上的&#xff0c;就在x轴上添加triggerEvent: true,如果是y轴就在y轴添加&#xff0c;我是在y轴上添加的 并且自定义的方法&#xff08;我取名为extension&#xff09; // echarts 横向省略文字 鼠标移入显示内容 export const extension…...

编程日记 2023/11/25 9:39:01

laravel8安装多应用多模块（笔记三）

先安装laravel8 Laravel 安装&#xff08;笔记一&#xff09;-CSDN博客 一、进入项目根目录安装 laravel-modules composer require nwidart/laravel-modules 二、 大于laravel5需配置provider&#xff0c;自动生成配置文件 php artisan vendor:publish --provider"Nwid…...

编程日记 2023/11/25 9:38:00

Vue组件的几种通信方式

这里写目录标题 Vue组件的几种通信&#xff08;数据传递&#xff09;方式非父子组件间通信&#xff08;Bus事件总线&#xff09;介绍实例 非父子通信-provide&inject1.作用2.场景3.语法4.注意 父子组件间的通信固定props属性名&#xff08;v-model&#xff09;介绍实例 不固…...

编程日记 2023/11/25 9:36:59

golang panic关键词执行原理与代码分析

使用的go版本为 go1.21.2 首先我们写一个简单的panic调度与捕获代码 package mainfunc main() {defer func() {recover()}()panic("panic test") }通过go build -gcflags -S main.go获取到对应的汇编代码 可以看到当我们调度panic时&#xff0c;Go的编译器会将这段…...

编程日记 2023/11/25 9:35:58

从需求到界面：Phi-3-mini-128k-instruct辅助Qt桌面应用开发实战

从需求到界面&#xff1a;Phi-3-mini-128k-instruct辅助Qt桌面应用开发实战 最近在捣鼓一个Qt桌面小应用&#xff0c;想做个简单的音乐播放器。从画界面到写逻辑&#xff0c;虽说Qt的文档很全&#xff0c;但有时候对着各种Widget和布局管理器&#xff0c;还是免不了要反复查资…...

编程新知 2026/4/22 14:18:08

Visual C++ Redistributable AIO：一站式解决Windows运行库问题的终极方案

Visual C Redistributable AIO&#xff1a;一站式解决Windows运行库问题的终极方案 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist Visual C Redistributable AI…...

编程新知 2026/4/22 12:35:34

手把手教你用Windows自带工具无损转换MBR到GPT（附BIOS/UEFI切换指南）

Windows系统盘无损转换MBR到GPT全流程实战指南 当你准备升级到Windows 11或使用超过2TB的大容量硬盘时&#xff0c;传统的MBR分区表可能成为瓶颈。不同于第三方工具可能带来的兼容性风险&#xff0c;Windows内置的MBR2GPT工具提供了一条安全可靠的转换路径。我曾帮助数十位同事…...

编程新知 2026/4/22 11:53:45

SteamCleaner终极指南：一键清理游戏缓存，轻松回收数十GB硬盘空间

SteamCleaner终极指南&#xff1a;一键清理游戏缓存&#xff0c;轻松回收数十GB硬盘空间 【免费下载链接】SteamCleaner :us: A PC utility for restoring disk space from various game clients like Origin, Steam, Uplay, Battle.net, GoG and Nexon :us: 项目地址: https…...

编程新知 2026/4/22 11:05:51

入局AIGC？我劝你先看看这份劝退指南

1. 为什么我不建议普通人盲目入局AIGC 最近两年&#xff0c;AIGC&#xff08;人工智能生成内容&#xff09;确实火得一塌糊涂。每天都能看到各种"用AI月入十万"的案例&#xff0c;朋友圈里也总有人在晒AI生成的精美图片或者爆款文案。作为一个在大厂做了8年AI算法的老…...

编程新知 2026/4/22 9:33:29

如何在5分钟内完成Degrees of Lewdity中文美化整合包的完整安装指南

如何在5分钟内完成Degrees of Lewdity中文美化整合包的完整安装指南 【免费下载链接】DOL-CHS-MODS Degrees of Lewdity 整合 项目地址: https://gitcode.com/gh_mirrors/do/DOL-CHS-MODS Degrees of Lewdity中文美化整合包&#xff08;DOL-CHS-MODS&#xff09;是专为中…...

编程新知 2026/4/22 9:06:39

Windows PDF处理终极指南：Poppler零依赖工具包完全解析

Windows PDF处理终极指南&#xff1a;Poppler零依赖工具包完全解析 【免费下载链接】poppler-windows Download Poppler binaries packaged for Windows with dependencies 项目地址: https://gitcode.com/gh_mirrors/po/poppler-windows 还在为Windows系统上复杂的PDF处…...

编程新知 2026/4/22 8:33:09

从Web命令执行到GPG解密：深度复盘Vulnhub Bob靶场的那些“藏起来”的提权线索

从Web命令执行到GPG解密&#xff1a;深度复盘Vulnhub Bob靶场的那些“藏起来”的提权线索 在渗透测试的世界里&#xff0c;真正的挑战往往不在于技术工具的掌握&#xff0c;而在于如何从看似无关的信息碎片中拼凑出完整的攻击路径。Vulnhub的Bob靶场就像一部精心设计的侦探小说…...

编程新知 2026/4/22 8:03:54

140. 如何使用 nginx /dbg

What is the /dbg command? 什么是 /dbg 命令&#xff1f;/dbg is a program included in the ingress-nginx container image that can be used to show information about the nginx environment and the resulting nginx configuration, which can be helpful when debuggi…...

编程新知 2026/4/22 5:21:34

real-anime-z应用场景：动漫社团微信公众号推文配图自动化生成流程

real-anime-z应用场景&#xff1a;动漫社团微信公众号推文配图自动化生成流程 1. 引言&#xff1a;动漫社团的配图痛点 运营动漫社团微信公众号的小伙伴们&#xff0c;是否经常遇到这样的困扰&#xff1a; 每周需要制作大量推文配图&#xff0c;但社团美编人手有限原创插画成…...

编程新知 2026/4/22 4:58:08