JavaScript 闭包 作用域

闭包

JavaScript 中的闭包是相当重要的概念并且与作用域相关知识的指向密切相关

  • JavaScript 中的作用域是什么意思?
  • 闭包会在哪些场景中使用?
  • 通过定时器循环输出自增的数字通过 JS 的代码如何实现?

闭包概念一

闭包是指有权访问另外一个函数作用域中的变量的函数。

闭包概念二

MDN:一个函数和对其周围状态的引用捆绑在一起(或者说函数被引用包围)这样的组合就是闭包(closure)也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域

闭包概念三

闭包其实就是一个可以访问其他函数内部变量的函数
通常情况下,函数内部变量是无法在外部访问的
因此使用闭包的作用
就具备实现了能在外部访问某个函数内部变量的功能

function fun1() {var a = 1;return function () {console.log(a);}
}fun1();
var result = fun1();
result();//1

输出

1

闭包产生的本质就是:当前环境中存在指向父级作用域的引用

闭包产生的原因

let fun3
function fun1() {var a = 2fun3 = function () {console.log(a)}
}fun1()
fun3()

输出

2

闭包的表现形式

  1. 返回一个函数,上面讲原因的时候已经说过,这里就不赘述了
  2. 在定时器、事件监听、Ajax请求、Web Workers 或者任何异步中只要使用了回调函数,实际上就是在使用闭包
  3. 作为函数参数传递的形式,比如下面的例子
  4. IIFE(立即执行函数),创建了闭包
    保存了全局作用域(window)和当前函数的作用域,因此可以输出全局的变量
for (var i = 1; i <= 5; i++) {(function (j) {setTimeout(function timer(){console.log(j)},0)})(i)
}
for (let i = 1; i <= 5; i++) {setTimeout(function timer(){console.log(i)},0)
}
for (var i = 1; i <= 5; i++) {setTimeout(function timer(j){console.log(j)},0,i)
}

作用域基本介绍

JavaScript 的作用域。指变量能够被访问到的范围

  • ES5 之前
    全局作用域和函数作用域
  • ES6 出现之后
    新增块级作用域

不论Java也好,JavaScript也罢变量一般都会分为全局变量和局部变量两种。
在 JavaScript 中,全局变量是挂载在 window 对象下的变量所以在网页中的任何位置你都可以使用并且访问到这个全局变量。

var globalName = 'global'function getName() {console.log(globalName)//globalvar name='innervar name = "icon"console.log(name);//console.log(globalName);//global
}function setName() {vName = 'setName'
}getName()
// console.log(name) //name is not defined
console.log(globalName)
setName()
// console.log(vName)  //vName is not defined
// console.log(window.vName)  //window is not defined

输出:

global
icon  
global

作用域链的基本概念

当访问一个变量时,代码解释器会首先在当前的作用域查找如果没找到,就去父级作用域去查找直到找到该变量或者不存在父级作用域中

函数作用域

  • 除了这个函数内部,其他地方都是不能访问到它的
  • 当这个函数被执行完之后,这个局部变量也相应会被销毁

块级作用域

  • 最直接的表现就是新增的 let 关键词
  • 使用 let 关键词定义的变量只能在块级作用域中被访问

块级作用域举例

在 JS 编码过程中
if 语句以及 for 语句后面 {…} 这里面所包括的就是块级作用域

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

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

相关文章

自我对比: 通过不一致的解决视角更好地进行反思

一、写作动机&#xff1a; LLM 在自我评价时往往过于自信或随意性较大&#xff0c;提供的反馈固执或不一致&#xff0c;从而导致反思效果不佳。为了解决这个问题&#xff0c;作者提倡 "自我对比"&#xff1a; 它可以根据要求探索不同的解决角度&#xff0c;对比差异…

ChatGPT如何辅助医生改善AD患者教育的效果

特应性皮炎&#xff08;AD&#xff09;是一种常见的慢性炎症性皮肤病&#xff0c;在全球范围内造成了巨大的疾病负担。尽管在治疗方面取得了一定进展&#xff0c;但AD患者的生活质量较低&#xff0c;治疗满意度差&#xff0c;超过一半的患者认为中度至重度AD疾病控制不佳。AD的…

YOLO快速入门

Yolo简介 概述 YOLO&#xff08;You Only Look Once&#xff09;是一种流行的目标检测算法&#xff0c;由Joseph Redmon等人开发。 YOLO算法以其高效的实时性能和准确的检测能力而闻名。自YOLO的首次提出以来&#xff0c;已经经 历了多个版本的更新和改进。以下是YOLO发展史的…

周边类-找厕所小程序源码

源码获取方式 1&#xff0c;搜一搜 万能工具箱合集 点击资料库 即可进去获取 找厕所小程序源码依赖于腾讯地图的一款源码&#xff0c;腾讯地图api免费申请&#xff0c;是一款免费又永久的不需要服务器的小程序&#xff0c;起个好名字蹭蹭蹭~ 搭建教程&#xff1a; 1、下载源码…

使用css的transition属性实现抽屉功能

需求 使用css手写一个抽屉&#xff0c;并且不能遮挡住原来的页面 效果&#xff1a;&#xff08;录的gif有点卡&#xff0c;实际情况很丝滑&#xff09; 实现代码&#xff1a; <template><div class"dashboard-container"><div class"mainBox&…

Java项目:36 springboot图书个性化推荐系统的设计与实现003

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 springboot003图书个性化推荐系统的设计与实现 管理员&#xff1a;首页、个人中心、学生管理、图书分类管理、图书信息管理、图书预约管理、退…

[element]element-ui框架下载

⭐作者介绍&#xff1a;大二本科网络工程专业在读&#xff0c;持续学习Java&#xff0c;努力输出优质文章 ⭐作者主页&#xff1a;逐梦苍穹 ⭐如果觉得文章写的不错&#xff0c;欢迎点个关注一键三连&#x1f609;有写的不好的地方也欢迎指正&#xff0c;一同进步&#x1f601;…

CSS中画一条0.5px的线

采用transform: scale()的方式&#xff0c;该方法用来定义元素的2D 缩放转换&#xff1a; transform: scale(0.5,0.5); 采用meta viewport的方式 <meta name"viewport" content"widthdevice-width, initial-scale0.5, minimum-scale0.5, maximum-scale0.5…

基于Springboot的足球俱乐部管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的足球俱乐部管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍: 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff…

【Datawhale组队学习:Sora原理与技术实战】Attention和LLM

Attention Attention 注意力&#xff0c;从两个不同的主体开始。 论文&#xff1a;https://arxiv.org/pdf/1703.03906.pdf seq2seq代码仓&#xff1a;https://github.com/google/seq2seq 计算方法&#xff1a; 加性Attention&#xff0c;如&#xff08;Bahdanau attention&…

数据库-ODBC操作

承接Qt/C软件开发项目&#xff0c;高质量交付&#xff0c;灵活沟通&#xff0c;长期维护支持。需求所寻&#xff0c;技术正适&#xff0c;共创完美&#xff0c;欢迎私信联系&#xff01; 一、ODBC 数据源配置 打开ODBC数据源管理器&#xff1a; 在Windows搜索栏中键入“ODBC数…

Flink hello world

下载并且解压Flink Downloads | Apache Flink 启动Flink. $ ./bin/start-cluster.sh Starting cluster. Starting standalonesession daemon on host DESKTOP-T4TU7JE. Starting taskexecutor daemon on host DESKTOP-T4TU7JE. Flink 的版本附带了许多示例作业。您可以快速将…

PyTorch搭建LeNet神经网络

函数的参数 1、PyTorch Tensor的通道排序 [batch, channel, height, width] batch: 要处理的一批图像的个数 channel: 通道数&#xff08;一般是R G B 三个通道&#xff09; height: 图像的高度 width: 图像的宽度 2.Conv 2d 卷积层的参数 [in_channels, out_channels, ke…

Golang 开发实战day01 - Variable String Numeric

Golang 教程01 - Variable String Numeric 1. Go语言的重要性 Go语言&#xff0c;又称Golang&#xff0c;是一种由Google开发的静态编译型编程语言。它于2009年首次发布&#xff0c;并在短短几年内迅速流行起来。Go语言具有以下特点&#xff1a; 语法简单易学&#xff1a;Go…

【牛客】SQL137 第二快/慢用时之差大于试卷时长一半的试卷-窗口函数

描述 现有试卷信息表examination_info&#xff08;exam_id试卷ID, tag试卷类别, difficulty试卷难度, duration考试时长, release_time发布时间&#xff09;&#xff1a; idexam_idtagdifficultydurationrelease_time19001SQLhard602021-09-01 06:00:0029002Chard602021-09-0…

C 运算符

运算符是一种告诉编译器执行特定的数学或逻辑操作的符号。C 语言内置了丰富的运算符&#xff0c;并提供了以下类型的运算符&#xff1a; 算术运算符关系运算符逻辑运算符位运算符赋值运算符杂项运算符 将逐一介绍算术运算符、关系运算符、逻辑运算符、位运算符、赋值运算符和…

第一节 JDBC是什么?

JDBC代表Java数据库连接(Java Database Connectivity)&#xff0c;它是用于Java编程语言和数据库之间的数据库无关连接的标准Java API&#xff0c;换句话说&#xff1a;JDBC是用于在Java语言编程中与数据库连接的API。 JDBC库包括通常与数据库使用相关&#xff0c;如下面提到的…

链表哨兵例子

哨兵链表例子_根据值删除链表 package linklist;public class leetcode203 {public static void main(String[] args) {ListNode listNode new ListNode(1,new ListNode(2,new ListNode(3)));ListNode listNode1 removeElements(listNode,2);System.out.println(listNode1);…

LeetCode.232. 用栈实现队列

题目 232. 用栈实现队列 分析 先了解一下栈和队列的特点&#xff1a; 栈&#xff1a;先进后出队列&#xff1a;先进先出 想用栈实现队列的特点&#xff0c;就需要使用两个栈。因为两个栈就可以将列表倒序。 假设第一个栈 s1 [1,2,3]&#xff0c;第二个栈 s2 [] 。若循环…

php压缩一个文件,多个文件,目录生成zip压缩包,压缩并下载zip包

我们将一个文件生成一个压缩包。 <?php $path "c:/wamp/www/log.txt"; $filename "test.zip"; $zip new ZipArchive(); $zip->open($filename,ZipArchive::CREATE); //打开压缩包 $zip->addFile($path,basename($path)); //向压缩包中添…