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

js进阶笔记之作用域

news 2026/2/10 2:13:22

目录

全局作用域

局部作用域

函数作用域

块作用域

作用域链

闭包

垃圾回收机制

作用域（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

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2026/1/24 13:05:24

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/12/14 13:11:33

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2026/2/8 21:52:30

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2026/2/7 22:17:30

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2026/1/30 4:18:53

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2026/1/30 6:19:54