JavaScript 作用域 与 var、let、const关键字

目录

一、JavaScript 作用域

1、全局作用域

2、函数作用域

3、块级作用域

4、综合示例

5、总结

二、var、let、const

1、var 关键字

2、let 关键字

3、const 关键字

4、总结

5、使用场景


一、JavaScript 作用域

在JavaScript中,作用域是指程序中可访问变量(对象和函数同样也是变量)的集合

作用域决定了变量的可见性和生命周期;

简单来说(个人理解):作用域就是指,变量能够正常被访问的区域;

有三种主要的作用域类型:全局作用域、函数作用域、块级作用域;

1、全局作用域

  • 当在函数外部声明变量时,默认在全局作用域中,即为全局变量;
  • 该变量可以在整个程序的任何地方(在所有脚本和函数中)使用, 直到它们被销毁或程序结束;
  • 全局变量通常在浏览器环境中由window对象持有;
  • window对象的内置属性都拥有全局作用域;
<script>var myName  = "zyl";console.log("全局作用域中的myName :", myName );console.log(window.myName );
</script>

 注意:在全局作用域中声明的myName变量,被window对象持有;

2、函数作用域

  • 当在函数内部声明变量时,即在函数作用域中;
  • 该变量只在该函数内部可见;
  • 函数作用变量在函数执行完毕后会被销毁,除非它们被返回或以其他方式被外部作用域引用;
<script>function fn(){var myName = "zyl";console.log("函数作用域中的myName:", myName);}fn();console.log(myName);    //ReferenceError: myName is not defined
</script>

注意:在函数作用域中声明的变量只在函数内部可见,函数外面时访问不到的; 

3、块级作用域

  • JavaScript ES6 引入了块级作用域,通过let和const关键字声明变量,它们只在声明所在的代码块内可见;
  • 这种作用域提供了更细粒度的控制,可以避免全局污染;
  • 块级作用域在循环内部声明变量时特别有用;
<script>{let myName  = "zyl";console.log("块级作用域中的myName :", myName );}console.log(myName);
</script>

 注意:在块级作用域中声明的变量,只在该块内可见,代码块的外面是访问不到的;

4、综合示例

<script>var globalVar = "全局作用域";function fn(){var fnVar = "函数作用域";{let blockVar = "块级作用域";console.log("代码块中,访问块级作用域中的变量,blockVar:", blockVar);console.log("代码块中,访问函数作用域中的变量,fnVar:", fnVar);console.log("代码块中,访问全局作用域中的变量,globalVar:", globalVar);}// console.log("函数中,访问块级作用域中的变量,blockVar:", blockVar);    // 报错:ReferenceError: blockVar is not definedconsole.log("函数中,访问函数作用域中的变量,fnVar:", fnVar);console.log("函数中,访问全局作用域中的变量,globalVar:", globalVar);}fn();// console.log("函数外部,访问块级作用域中的变量,blockVar:", blockVar);  // 报错:ReferenceError: blockVar is not defined// console.log("函数外部,访问函数作用域中的变量,fnVar:", fnvar);    // 报错:ReferenceError: fnvar is not definedconsole.log("函数外部,访问全局作用域中的变量,globalVar:", globalVar);
</script>

5、总结

  • 块级作用域中声明的变量,只能够在该块内被访问;
  • 函数作用域中声明的变量,只能在函数内部,以及该函数内部的代码块中被访问;
  • 全局作用域中声明的变量,能在任何地方被访问;

二、var、let、const

在JavaScript中,声明变量需要使用varletconst关键字,这三者有和特点和区别?

1、var 关键字

(1)声明全局变量

使用 var 关键字在全局作用域中声明的变量,即为全局变量;

改变了被window对象持有;

可以在任何地方被访问;

var price = "10.00"
console.log("全局作用域,price值为:", price);
console.log("window对象的price,值为:", window.price);function fn() {console.log("函数作用域,price值为:", price);{console.log("块级作用域,price值为:", price);}
}
fn();

(2)声明局部变量

使用 var 关键字在函数作用域中声明的变量,即为局部变量;

只能在函数内,包括函数内的代码块中被访问;

不能在函数作用域外被访问;

function fn() {var price = "10.00"console.log("函数作用域,price值为:", price);{console.log("块级作用域,price值为:", price);}
}
fn();console.log("全局作用域,price值为:", price);      // 报错:ReferenceError: price is not defined

(3)存在变量提升

使用var关键字声明的变量,存在变量提升;

存在变量提升:在代码执行前,变量的声明已经被提升到了函数的顶部,但没有初始化;

console.log("使用var声明之前,price值为:", price);
var price = "10.00"
console.log("使用var声明之后,price值为:", price);

注意:

这里在使用var声明price之前,打印输出price并没有报错,而是输出了undefined;

这是因为使用var关键字声明的变量,存在变量提升;

执行下面的代码时:

...
console.log("使用var声明之前,price值为:", price);
var price = "10.00"
...

相当于执行:

...
var price;
console.log("使用var声明之前,price值为:", price);
price = "10.00"
...

(4)声明的变量,可以被重新赋值

使用var关键字声明的是变量,可以被重新赋值;

var price = "10.00"
console.log("使用var声明变量price,值为:", price);price = "9.99"
console.log("修改后的price,值为:",price);

(5)声明的变量,可以被重新声明

使用var关键字重复声明同一个变量时,后续的声明会覆盖之前的;

var price = "10.00"
console.log("var声明变量price,值为:", price);var price = "9.99"
console.log("var声明变量price,值为",price);

(6)一次可以声明多个变量

使用var关键字一次可以声明多个变量,中间用逗号隔开即可;

var price = "10.00", conut = 20;
console.log("var声明变量price,值为:", price);
console.log("var声明变量count,值为",conut);

2、let 关键字

(1)声明块级作用域变量

使用let关键字声明的变量只在let命令所在的代码块内部有效,即let所在的{ }内;

function fn() {let count = 99;console.log("count值为:", count);{let count = 88;console.log("count值为:", count);}console.log("count值为:", count);
}
fn();

(2)不存在变量提升

使用let关键字声明的变量不存在变量提升,只能在声明之后被访问;

如果在声明之前访问变量,将会抛出一个引用错误;

// console.log("使用let声明之前,count值为:", count);     // 报错:ReferenceError: Cannot access 'count' before initialization
let count = 99;
console.log("使用let声明之后,count值为:", count);

(3)声明的变量,可以被重新赋值

使用let关键字声明的变量,可以被重新赋值;

let count = 99;
console.log("使用let声明变量count,值为:", count);count = 88
console.log("修改后的count,值为:", count);

(4)声明的变量,不能被重新声明

使用let关键字声明的变量,不能被重新声明;

let count = 99;
console.log("使用let声明变量count,值为:", count);let count = 88      // 报错: SyntaxError: Identifier 'count' has already been declared 

(5)一次可以声明多个变量

使用let关键字一次可以声明多个变量,中间用逗号隔开即可;

let price = "10.00", conut = 99;
console.log("let声明变量price,值为:", price);
console.log("let声明变量count,值为",conut);

3、const 关键字

const关键字的特点与let相似,主要区别在于const关键字用来声明只读的变量,即常量,不能被重新赋值;

(1)声明块级作用域变量

使用const关键字声明的变量只在const命令所在的代码块内部有效,即const所在的{ }内;

function fn() {const product = "苹果";console.log("product值为:", product);{const product = "西瓜";console.log("product值为:", product);}console.log("product值为:", product);
}
fn();

(2)不存在变量提升

使用const关键字声明的变量不存在变量提升,只能在声明之后被访问;

如果在声明之前访问变量,将会抛出一个引用错误;

// console.log("使用const声明之前,product值为:", product);     // 报错:ReferenceError: Cannot access 'product' before initialization
const product = "苹果";
console.log("使用const声明之后,product值为:", product);

(3)声明的变量,不能被重新赋值

使用const关键字声明的变量,不能被重新赋值;

该变量是只读的,即常量;

const product = "苹果";
console.log("使用const声明变量product,值为:", product);product = "西瓜";   // 报错:TypeError: Assignment to constant variable.

(4)声明的变量,不能被重新声明

使用const关键字声明的变量,不能被重新声明;

const product = "苹果";
console.log("使用const声明变量product,值为:", product);const product = "西瓜";   // 报错:SyntaxError: Identifier 'product' has already been declared

(5)一次可以声明多个变量

使用const关键字一次可以声明多个变量,中间用逗号隔开即可;

const price = "9.99", count = 99,  product = "苹果";
console.log("使用const声明变量price,值为:", price);
console.log("使用const声明变量count,值为:", count);
console.log("使用const声明变量product,值为:", product);

4、总结

(1)var、let、const 的不同点

序号不同点说明
1变量作用域

var用来声明全局变量和局部变量;

let和const用来声明块级作用域中的变量;

2变量提升

var声明的变量存在变量提升;

let和const声明的变量不存在变量提升(只能在声明之后访问);

3重新赋值

var和let声明的变量可以被重新赋值;

const声明的变量不能被重新赋值(只读,常量);

4重新声明

var声明的变量可以被重新声明;

let和const声明的变量不能被重新声明;

(2)var、let、const 的相同点

var、let、const 都用来声明变量;

var、let、const 都可以同时声明多个变量;

5、使用场景

var、let、const 三个关键字的使用取决于声明变量的场景;

  • 声明常量(只读的变量),用const;
  • 声明块级作用域中的变量,用let;
  • 声明全局变量,用var;
  • 优先级:const > let > var;

通常推荐使用 let 和 const,它们提供了更好的作用域管理,减少了由变量提升导致的错误;

======================================================================

每天进步一点点~~!

记录一下这个JavaScript中的这个基础内容!

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

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

相关文章

24-7-9-读书笔记(九)-《爱与生的苦恼》[德]叔本华 [译]金玲

文章目录 《爱与生的苦恼》阅读笔记记录总结 《爱与生的苦恼》 《爱与生的苦恼》叔本华大佬的名书&#xff0c;里面有其“臭名昭著”的《论女人》&#xff0c;抛开这篇其他的还是挺不错的&#xff0c;哲学我也是一知半解&#xff0c;这里看得也凭喜好&#xff0c;这里记录一些自…

作业/数据结构/2024/7/8

链表的相关操作作业&#xff1a; 1】 按值修改 2】按值查找&#xff0c;返回当前节点的地址 &#xff08;先不考虑重复&#xff0c;如果有重复&#xff0c;返回第一个&#xff09; 3】 逆置(反转) 4】释放链表 main.c #include "head.h"int main(int argc, con…

【面向就业的Linux基础】从入门到熟练,探索Linux的秘密(九)-git(1)

Git是一个版本管理控制系统&#xff08;缩写VCS&#xff09;&#xff0c;它可以在任何时间点&#xff0c;将文档的状态作为更新记录保存起来&#xff0c;也可以在任何时间点&#xff0c;将更新记录恢复回来。 文章目录 前言 一、git是什么 二、git基本概念 三、git基本命令 总结…

【Python实战因果推断】28_倾向分8

目录 Treatment Is Easy to Model Treatment Is Easy to Model 第一个例子中&#xff0c;治疗分配的模型相当容易建立&#xff0c;但干预结果的模型却比较复杂。具体来说&#xff0c;干预遵循伯努利分布&#xff0c;其概率由以下倾向得分给出&#xff1a; 如果您没有意识到&a…

初识CPlusPlus

前言 也是好久没写博客了&#xff0c;那些天也没闲着&#xff0c;去练题去了。实际上练题也可以写练题的博客&#xff0c;但是觉得太简单了些&#xff0c;于是就没有继续写下去。如今又回来写博客&#xff0c;是因为有整理了新的知识C。内容不算多&#xff0c;大多数都是书本上…

行至第11年,追光动画距离“中国皮克斯”还有多远?

百花奖提名名单公布后&#xff0c;入围最佳影片大奖的唯一一部动画电影《长安三万里》&#xff0c;竟然成为了获奖呼声最高的电影。 去年暑期档上映的《长安三万里》以18.24亿票房一跃成为中国影史动画电影票房亚军&#xff0c;虽然这个数据在今年春节档被《熊出没逆转时空》超…

WPF UI 3D 基本概念 点线三角面 相机对象 材质对象与贴图 3D地球 光源 变形处理 动作交互 辅助交互插件 系列三

WPF UI交互专题 平面图形 Path Drawing 绘图 渐变 Brush 矩阵 Transform 变形 阴影效果 模糊效果 自定义灰度去色效果 系列二-CSDN博客 1软件中的3D基本概念 WPF 中 3D 功能的设计初衷并非提供功能齐全的游戏开发平台。 WPF 中的 3D 图形内容封装在 Viewport3D 元素中&#x…

2024前端面试真题【JS篇】

DOM DOM&#xff1a;文本对象模型&#xff0c;是HTML和XML文档的编程接口。提供了对文档的结构化的表述&#xff0c;并定义可一种方式可以使从程序中对该结构进行访问&#xff0c;从而改变文档的结构、样式和内容。 DOM操作 创建节点&#xff1a;document.createElement()、do…

MySQL:TABLE_SCHEMA及其应用

MySQL TABLE_SCHEMA及其应用 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/ar…

13 - matlab m_map地学绘图工具基础函数 - 介绍创建管理颜色映射的函数m_colmap和轮廓图绘制颜色条的函数m_contfbar

13 - matlab m_map地学绘图工具基础函数 - 介绍创建管理颜色映射的函数m_colmap和轮廓图绘制颜色条的函数m_contfbar 0. 引言1. 关于m_colmap2. 关于m_contfbar3. 结语 0. 引言 本篇介绍下m_map中用于创建和管理颜色映射函数&#xff08;m_colmap&#xff09;和 为轮廓图绘制颜…

人工智能+病理组学的交叉课题,患者的临床特征如何收集与整理|顶刊专题汇总·24-07-09

小罗碎碎念 本期文献主题&#xff1a;人工智能病理组学的交叉课题&#xff0c;患者的临床特征如何收集与整理 我们在阅读文献的时候会发现&#xff0c;有的文章会详细给出自己的数据集分析表&#xff0c;分别列出训练集、验证集的数量&#xff0c;以及每个特征对应的患者人数。…

SpringSecurity 三更草堂学习笔记

0.简介 Spring Security是Spring家族中的一个安全管理框架。相比与另外一个安全框架Shiro&#xff0c;它提供了更丰富的功能&#xff0c;社区资源也比Shiro丰富。 一般来说中大型的项目都是使用SpringSecurity来做安全框架。小项目有Shiro的比较多&#xff0c;因为相比与Spring…

Retrofit框架源码深度剖析【Android热门框架分析第二弹】

Android热门框架解析&#xff0c;你确定不来看看吗&#xff1f; OkHttp框架源码深度剖析【Android热门框架分析第一弹】 Retrofit框架源码深度剖析【Android热门框架分析第二弹】 什么是Retrofit&#xff1f; 准确来说&#xff0c;Retrofit 是一个 RESTful 的 HTTP 网络请求…

【代码随想录】【算法训练营】【第59天】 [卡码110]字符串接龙 [卡码105]有向图的完全可达性 [卡码106]岛屿的周长

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 卡码网。 day 59&#xff0c;周五&#xff0c;继续ding~ 题目详情 [卡码110] 字符串接龙 题目描述 卡码110 字符串接龙 解题思路 前提&#xff1a; 思路&#xff1a; 重点&#xff1a; 代码实现 C语言 […

LLM大模型从入门到精通(1)--LLM基础知识介绍

1. 大语言模型 (LLM) 背景 2. 语言模型 (Language Model, LM) 1. 大语言模型 (LLM) 背景 大语言模型 (英文&#xff1a;Large Language Model&#xff0c;缩写LLM) 是一种人工智能模型, 旨在理解和生成人类语言. 大语言模型可以处理多种自然语言任务&#xff0c;如文本分类、问…

绝区伍--2024年AI发展路线图

2024 年将是人工智能具有里程碑意义的一年。随着新模式、融资轮次和进步以惊人的速度出现&#xff0c;很难跟上人工智能世界发生的一切。让我们深入了解 2024 年可能定义人工智能的关键事件、产品发布、研究突破和趋势。 2024 年第一季度 2024 年第一季度将推出一些主要车型并…

什么是O2O?线上线下怎么完美结合?

现如今互联网技术飞速发展&#xff0c;智能手机普及。O2O&#xff08;Online To Offline&#xff09;模式已经成为一种新的商业模式&#xff0c;人们的生活和消费习惯也逐渐被改变。经常听到企业提到“O2O”&#xff0c;它究竟是什么呢&#xff1f;对企业有着什么魅力呢&#x…

Flutter Inno Setup 打包 Windows 程序

转载自&#xff1a;flutter桌面应用从开发配置到打包分发 - 掘金 (juejin.cn) 五.打包 1.创建 release 版本的应用 flutter build release 执行完成后&#xff0c; release包位置在项目的build->windows->runer文件夹中 2.应用程序分发 Windows 为 Windows 平台构建…

AE-关键帧

目录 关键帧操作步骤&#xff08;以位置变化为例&#xff09; 1.确定动画起点 2.设置起点的位置属性 3.为起点打上关键帧 4.确定动画终点 5.设置终点的位置属性 改变动画速度 1.选中所有关键帧 2.拖拽 时间反向关键帧 1.选中要反向的关键帧 2.使用时间反向关键帧 …

Apache POI、EasyPoi、EasyExcel

目录 ​编辑 &#xff08;一&#xff09;Apache PoI 使用 &#xff08;二&#xff09;EasyPoi使用 &#xff08;三&#xff09;EasyExcel使用 写 读 最简单的读​ 最简单的读的excel示例​ 最简单的读的对象​ &#xff08;一&#xff09;Apache PoI 使用 &#xff08;二&…