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

js进阶笔记之作用域

news 2026/2/3 14:38:53

全局作用域

局部作用域

函数作用域

块作用域

作用域链

闭包

垃圾回收机制

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

总结：

为 window 对象动态添加的属性默认也是全局的，不推荐！
函数中未使用任何关键字声明的变量为全局变量，不推荐！！！
尽可能少的声明全局变量，防止全局变量被污染

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

局部作用域

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

函数作用域

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

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

总结：

函数内部声明的变量，在函数外部无法被访问
函数的参数也是函数内部的局部变量
不同函数内部声明的变量无法互相访问
函数执行完毕后，函数内部的变量实际被清空了

块作用域

在 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>

总结：

let 声明的变量会产生块作用域，var 不会产生块作用域
const 声明的常量也会产生块作用域
不同代码块之间的变量无法互相访问
推荐使用 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>

嵌套关系的作用域串联起来形成了作用域链
相同作用域链中按着从小到大的规则查找变量
子作用域能够访问父作用域，父级作用域无法访问子级作用域

闭包

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

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

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

原理：作用域链

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

<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进阶笔记之作用域

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

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

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

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

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

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

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

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

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

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

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

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

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

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

机器学习入门

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

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

HarmonyOS ArkTS 保存应用数据（十）

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

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

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

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

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

linux上的通用拍照程序

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

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

代码随想录-刷题第七天

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

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

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

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

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

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

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

编程日记 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 输出界面控制一行能够输出的元素个数今天遇到了一个问题，当我们在 Pycharm 中打印输出数组时，如果数组一行的元素个数过多，那么我们在打印时就会出现以下问题。代码如下： import numpy as npx np.array([[0., 0.7…...

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

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

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

编程日记 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没事，但mac报错 <变&lt >变&gt 就都冇问题了 https://github.…...

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

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

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

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

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

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

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

Vue组件的几种通信方式

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

编程日记 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时，Go的编译器会将这段…...

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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点轻量级&#xff…...

编程新知 2025/11/30 15:33:36

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...

编程新知 2026/1/25 14:13:16

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...

编程新知 2026/1/26 5:25:25

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。据「TMT星球」了解，“超级…...

编程新知 2026/1/26 14:22:31

一.入门案例启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2026/2/2 0:35:08