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.mzph.cn/web/43184.shtml

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

相关文章

订单到期关闭

文章目录 前言一、场景&#xff1f;二、使用步骤1.项目配置好rocketmq2.读入数据 其他方式处理订单到期关闭定时任务 前言 实习期间在做订单模块。遇到过订单到时关闭的场景。 因为我们在通过回调接收第三方订单状态的时候&#xff0c;使用了rocketmq&#xff0c;在遇到订单超…

叁[3],使用Newtonsoft.Json.dll,异常记录

开发环境 VS2022/.net6.0/WPF 1&#xff0c;异常1,反序列化数组异常。 convertError:"[{"不拉不拉***************************** 原因&#xff1a;检查是Json字符串的数组格式异常。 正常数组字符串 "result":[{"key1":"value1"…

神经网络构成、优化、常用函数+激活函数

Iris分类 数据集介绍&#xff0c;共有数据150组&#xff0c;每组包括长宽等4个输入特征&#xff0c;同时给出输入特征对应的Iris类别&#xff0c;分别用0&#xff0c;1&#xff0c;2表示。 从sklearn包datasets读入数据集。 from sklearn import darasets from pandas impor…

vulnhub-NOOB-1

确认靶机 扫描靶机发现ftp Anonymous 的A大小写都可以 查看文件 解密 登录网页 点击about us会下载一个压缩包 使用工具提取 steghide info 目标文件 //查看隐藏信息 steghide extract -sf 目标文件 //提取隐藏的文件 steghide embed -cf 隐藏信息的文件 -ef…

什么样的开放式耳机好用舒服?南卡、倍思、Oladance高人气质量绝佳产品力荐!

​开放式耳机在如今社会中已经迅速成为大家购买耳机的新趋势&#xff0c;深受喜欢听歌和热爱运动的人群欢迎。当大家谈到佩戴的稳固性时&#xff0c;开放式耳机都会收到一致好评。对于热爱运动的人士而言&#xff0c;高品质的开放式耳机无疑是理想之选。特别是在近年来的一些骑…

算法学习记录4

L2-012 关于堆的判断 def checkHeap(heap, target):if target 0:return heapif heap[target] < heap[(target - 1) // 2]:temp heap[target]heap[target] heap[(target - 1) // 2]heap[(target - 1) // 2] tempheap checkHeap(heap, (target - 1) // 2)return heapdef…

2024.7.7刷题记录

目录 一、849. Dijkstra求最短路 I - AcWing题库 二、850. Dijkstra求最短路 II - AcWing题库 根据讲解视频写的代码 一、849. Dijkstra求最短路 I - AcWing题库 N 600 MAXL 10010 # 最长边长 # 稠密图邻接矩阵 g [[MAXL] * N for _ in range(N)] dist [MAXL] * N …

图片kb太大了怎么改小?修改图片kb的方法介绍

图片kb太大了怎么改小&#xff1f;将图片的文件大小&#xff08;以KB为单位&#xff09;缩小可以带来多种优点&#xff0c;但也有一些缺点需要注意。缩小图片文件大小可以显著减少它在硬盘或其他存储设备上占用的空间&#xff0c;使你能够存储更多的图片和其他文件。而且&#…

KIVY 3D Rotating Monkey Head¶

7 Python Kivy Projects (With Full Tutorials) – Pythonista Planet KIVY 3D Rotating Monkey Head kivy 3D 旋转猴子头How to display rotating monkey example in a given layout. Issue #6688 kivy/kivy GitHub 3d 模型下载链接 P99 - Download Free 3D model by …

【Qt】QItemSelectionModel 添加选中行

1. 介绍 QItemSelectionModel 中没有直接添加选中行的方法&#xff0c;可以通过下面的方式添加。 2. 代码 //定义 QSqlTableModel* m_tableModel; QItemSelectionModel* m_selectionModel;//添加选中行, 全选 void addAllLine() {for(int i0; i<m_tableModel->rowCoun…

【AI大模型新型智算中心技术体系深度分析 2024】

文末有福利&#xff01; ChatGPT 系 列 大 模 型 的 发 布&#xff0c; 不 仅 引 爆 全 球 科 技 圈&#xff0c; 更 加 夯 实 了 人 工 智 能&#xff08;Artificial Intelligence, AI&#xff09;在未来改变人类生产生活方式、引发社会文明和竞争力代际跃迁的战略性地位。当…

mysql select count返回null

注意 mysql select count返回null 下面是百度的回答 在MySQL中&#xff0c;当SELECT COUNT(*)查询返回NULL时&#xff0c;通常意味着查询结果为空集&#xff0c;即没有记录匹配查询条件。COUNT()函数在没有匹配行的情况下返回NULL&#xff0c;而不是0。 解决方法&#xff1a…

ImportError: xxx: cannot open shared object file: No such file or directory

一类常见错误&#xff1a;编译器器无法在目录下找到共享目标文件&#xff0c; Linux(ubuntu)中共享的库目录为/usr/lib/x86_64-linux-gnu&#xff0c;gcc的编译库 在该目录下创建共享文件&#xff08;伪造、下载&#x1f91c;cp)即可 sudo ln -s libtiff.so.6 libtiff.so.5

昇思25天学习打卡营第11天|ResNet50图像分类

文章目录 昇思MindSpore应用实践基于MindSpore的ResNet50图像分类1、ResNet50 简介2、数据集预处理及可视化3、构建网络构建 Building Block构建 Bottleneck Block构建 ResNet50 网络 4、模型训练5、图像分类模型推理 Reference 昇思MindSpore应用实践 本系列文章主要用于记录…

Emacs相关

Emacs 详细介绍 Emacs&#xff0c;全称 Editor MACroS&#xff0c;是一款功能强大、历史悠久的文本编辑器。它最早由 Richard Stallman 于 1976 年开发&#xff0c;是自由软件运动的重要组成部分。Emacs 的设计理念强调可定制性和扩展性&#xff0c;使得它不仅仅是一个编辑器&…

AsyncRequestTimeoutException

在Spring MVC中&#xff0c;当一个异步请求超过配置的最大等待时间时&#xff0c;会抛出AsyncRequestTimeoutException异常。这个异常通常是由于服务器端的处理时间超过了客户端允许的等待时间&#xff0c;或者是服务器本身的异步处理时间配置过短导致的。 spring: mvc: async…

scrapy写爬虫

Scrapy是一个用于爬取网站数据并提取结构化信息的Python框架 一、Scrapy介绍 1.引擎&#xff08;Engine&#xff09; – Scrapy的引擎是控制数据流和触发事件的核心。它管理着Spider发送的请求和接收的响应&#xff0c;以及处理Spider生成的Item。引擎是Scrapy运行的驱动力。…

基于go-zero二次开发的脚本

param$2 # 字符串风格格式为&#xff1a;DemoName model_name$(echo "${param}" | awk -F _ {for(i1;i<NF;i) $itoupper(substr($i,1,1)) tolower(substr($i,2));}1 | tr -d ) # 字符串风格格式为&#xff1a;demoName struct_name$(echo "${model_name}&qu…

ClickHouse表引擎概述

ClickHouse表引擎概述 表引擎的功能&#xff1a; 数据的存储方式 数据的存储位置 是否可以使用索引 是否可以使用分区 是否支持数据副本 并发数据访问 ClickHouse在建表时必须指定表引擎。 表引擎主要分为四大类&#xff1a;MergeTree系列、Log系列、与其他存储/处理系…

字节码编程bytebuddy之获取方法信息和方法入参信息

写在前面 本文看下通过bytebuddy如何获取方法信息和方法的入参信息。 1&#xff1a;代码 package com.dahuyou.bytebuddy.bb;import com.dahuyou.bytebuddy.TT; import net.bytebuddy.ByteBuddy; import net.bytebuddy.dynamic.DynamicType; import net.bytebuddy.implement…