js进阶笔记之作用域

目录

全局作用域

局部作用域

函数作用域

块作用域

作用域链

闭包

垃圾回收机制


作用域(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. 推荐使用 letconst

作用域链

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

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

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

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

相关文章

【Go语言从入门到实战】反射编程、Unsafe篇

反射编程 reflect.TypeOf vs reflect.ValueOf func TestTypeAndValue(t *testing.T) {var a int64 10t.Log(reflect.TypeOf(a), reflect.ValueOf(a))t.Log(reflect.ValueOf(a).Type()) }判断类型 - Kind() 当我们需要对反射回来的类型做判断时&#xff0c;Go 语言内置了一个…

【23真题】最简单的211!均分141分!

今天分享的是23年河海大学863的信号与系统试题及解析。 我猜测是由于23年太简单&#xff0c;均分都141分&#xff0c;导致24考研临时新增一门数字信号处理&#xff01;今年考研的同学赶不上这么简单的专业课啦&#xff01; 本套试卷难度分析&#xff1a;平均分为102和141分&a…

ECharts与DataV:数据可视化的得力助手

文章目录 引言一、ECharts简介优势&#xff1a;劣势&#xff1a; 二、DataV简介优势&#xff1a;劣势&#xff1a; 三、ECharts与DataV的联系四、区别与选择五、如何选择根据需求选择技术栈考虑预算和商业考虑 结论我是将军&#xff0c;我一直都在&#xff0c;。&#xff01; 引…

LeetCode题解:13. 罗马数字转整数,哈希表,JavaScript,详细注释

原题链接&#xff1a;13. 罗马数字转整数 解题思路&#xff1a; 本题涉及到的罗马数字都是唯一的&#xff0c;因此可以创建一个哈希表&#xff0c;存储罗马数字和整数的对应关系。遍历s&#xff0c;分别截取从i开始的2位和1位字符串&#xff0c;查看其在哈希表中的罗马数字对…

pytest调用其他测试用例方法

pytest调用其他测试用例方法 一. 第一种方法&#xff0c;测试用例前置pytest.fixture() def test1():print("我是用例一") pytest.fixture(test1) def test2():print("我是用例二")二.第二种方法,如果不是同一文件中测试用例调用或者同一py文件中 def t…

3.10-容器的操作

这一节讲解一下对于container我们可以进行哪些操作&#xff1f; 可以使用以下命令来停止正在运行的Docker容器&#xff1a; docker container stop <CONTAINER ID> 关于运行中的容器&#xff0c;我们可以进行的操作&#xff1a; 第一个是docker exec命令&#xff0c;这个…

NLP实践——LLM生成过程中防止重复循环

NLP实践——LLM生成过程中防止重复 1. 准备工作2. 问题分析3. 创建processor3.1 防止重复生成的processor3.2 防止数字无规则循环的processor 4. 使用 本文介绍如何使用LogitsProcessor避免大模型在生成过程中出现重复的问题。 1. 准备工作 首先实例化一个大模型&#xff0c;…

实时语音克隆:5 秒内生成任意文本的语音 | 开源日报 No.84

CorentinJ/Real-Time-Voice-Cloning Stars: 43.3k License: NOASSERTION 这个开源项目是一个实时语音克隆工具&#xff0c;可以在5秒内复制一种声音&#xff0c;并生成任意文本的语音。 该项目的主要功能包括&#xff1a; 从几秒钟的录音中创建声纹模型根据给定文本使用参考…

数字化转型没钱?没人?没IT?低代码平台轻松帮你搞定

随着数字技术的不断渗透&#xff0c;数字化已经不仅仅是一个趋势&#xff0c;而是深入人心的日常生活部分。在这样的时代背景下&#xff0c;企业面临的挑战也愈发严峻&#xff1a;如何不断创新&#xff0c;满足用户日益增长的业务需求&#xff1f; 传统的开发方式&#xff0c;随…

基于单片机设计的大气气压检测装置(STC89C52+BMP180实现)

一、前言 本项目设计一个大气气压检测装置&#xff0c;该装置以单片机为基础&#xff0c;采用STC89C52作为核心控制芯片&#xff0c;结合BMP180模块作为气压传感器。大气气压&#xff0c;也就是由气体重力在大气层中产生的压力&#xff0c;其变化与天气预报、气象观测以及高度…

江苏某市人民医院实现IT基础资源统一监控

一、背景介绍 江苏某市人民医院是一家拥有丰富医疗资源和庞大患者群体的医疗机构。随着医疗业务的不断发展&#xff0c;其IT系统的规模和复杂性也不断增加&#xff0c;涉及各类IT资源&#xff0c;包括服务器、网络设备、数据库、应用软件等。为了提高IT系统的可靠性和稳定性&am…

11.7统一功能处理

一.登录拦截器 1.实现一个普通的类,实现HeadlerInterceptor接口,重写preHeadler方法. 2.将拦截器添加到配置中,并设定拦截规则. 二.访问前缀添加 方法1: 方法2:properties 三.统一异常处理 以上返回的是空指针异常,如果是别的异常就不会识别,建议加上最终异常 . 四.统一数据格…

英语学习软件 Eudic欧路词典 mac中文版介绍说明

欧路词典 mac (Eudic) 是一个功能强大的英语学习工具&#xff0c;它包含了丰富的英语词汇、短语和例句&#xff0c;并提供了发音、例句朗读、单词笔记等功能。 Eudic欧路词典 mac 软件介绍 多语种支持&#xff1a;欧路词典支持多种语言&#xff0c;包括英语、中文、日语、法语…

uni微信小程序 map 添加padding

问题背景&#xff1a; 规划驾车线路的时候&#xff0c;使用uni的include-points指定可视范围的时候&#xff0c;会很极限。导致marker不能完全显示。 解决方法 给地图显示范围添加padding (推荐) <mapid"myMap":markers"markers":polyline"pol…

视频服务网关的三大部署(二)

视频网关是软硬一体的一款产品&#xff0c;可提供多协议&#xff08;RTSP/ONVIF/GB28181/海康ISUP/EHOME/大华、海康SDK等&#xff09;的设备视频接入、采集、处理、存储和分发等服务&#xff0c; 配合视频网关云管理平台&#xff0c;可广泛应用于安防监控、智能检测、智慧园区…

spark写入关系型数据库的duplicateIncs参数使用

在看一段spark写数据到关系型数据库代码时&#xff0c;发现一个参数没有见过&#xff1a; df.write.format("org.apache.spark.sql.execution.datasources.jdbc2").options(Map("savemode" -> JDBCSaveMode.Update.toString,"driver" -> …

Android13 launcher循环切页

launcher 常规切页&#xff1a;https://blog.csdn.net/a396604593/article/details/125305234 循环切页 我们知道&#xff0c;launcher切页是在packages\apps\Launcher3\src\com\android\launcher3\PagedView.java的onTouchEvent中实现的。 1、滑动限制 public boolean onT…

Python与设计模式--门面模式

8-Python与设计模式–门面模式 一、火警报警器&#xff08;1&#xff09; 假设有一组火警报警系统&#xff0c;由三个子元件构成&#xff1a;一个警报器&#xff0c;一个喷水器&#xff0c; 一个自动拨打电话的装置。其抽象如下&#xff1a; class AlarmSensor:def run(self):…

c语言习题1124

分别定义函数求圆的面积和周长。 写一个函数&#xff0c;分别求三个数当中的最大数。 写一个函数&#xff0c;计算输入n个数的乘积 一个判断素数的函数&#xff0c;在主函数输入一个整数&#xff0c;输出是否为素数的信息 写一个函数求n! ,利用该函数求1&#xff01;2&…

功率半导体器件CV测试系统

概述 电容-电压(C-V)测量广泛用于测量半导体参数&#xff0c;尤其是MOS CAP和MOSFET结构。MOS(金属-氧化物-半导体)结构的电容是外加电压的函数&#xff0c;MOS电容随外加电压变化的曲线称之为C-V曲线&#xff08;简称C-V特性&#xff09;&#xff0c;C-V 曲线测试可以方便的确…