【js学习】闭包理解

news2024/11/18 7:32:19

闭包原理

js使用的是词法作用域,词法作用域的意味着函数执行使用的是定义函数时生效的变量作用域。即函数执行时,里面的参数访问跟执行函数时的作用域无关。如下代码2所示最后输出的是local scope。

闭包定义:js函数对象的内部状态不仅要包含函数代码,还要包含对函数定义所在作用域的引用(即变量)。
我的理解是类似对象和类,在一个function定义的变量里面,它不仅包含内部函数-嵌套函数(function中的function),还包含其内部定义变量的引用,执行时仍然使用自身内部变量的引用,这些变量可看作这个function变量的私有变量。

代码对比理解闭包

代码1

let scope = "global scope"
function checkscope(){
    let scope = "local scope"
    function f(){return scope}
    return f()
}
checkscope()

代码2

let scope = "global scope"
function checkscope(){
    let scope = "local scope"
    function f(){return scope}    
    return f
}
let s = checkscope()()

上述两段代码,区别在于代码2返回的是函数,代码1返回的是函数执行的结果—执行的位置,一个在函数体内部,一个在函数体外部。两者的输出都是

local space

可见js的执行作用域只与定义函数时的作用域有关。

案例

let uniqueInteger = function(){
    let counter = 0; //只进行分配一次
    return function(){return counter++}
}()
console.log(uniqueInteger())    //=>0
console.log(uniqueInteger())    //=>1

在这段代码里counter为私有变量,只进行分配一次,所以这里初始化只进行一次
其实这里就类似于定义了一个对象,想像成别的语言里面的类和对象啥的应该就能更好的理解闭包一点。

function uniqueInteger1(){
    var counter = 0; 
    return function(){return counter++}
}
console.log(uniqueInteger1()())     //=>0
console.log(uniqueInteger1()())     //=>0

闭包难点

function constfuncs(){
    let funcs = []
    for(var i=0;i<10;i++){
        funcs[i]=()=>i
    }
    return funcs
}
let funcs = constfuncs()
for(let i=0;i<10;i++){
    console.log(funcs[i]())
}
//=>10,10,10,10,10,10,10,10,10,10
function constfuncs(){
    let funcs = []
    for(let i=0;i<10;i++){
        funcs[i]=()=>i
    }
    return funcs
}
let funcs = constfuncs()
for(let i=0;i<10;i++){
    console.log(funcs[i]())
}
//=>0,1,2,3,4,5,6,7,8,9

这两个代码的区别在于函数体里面循环体定义i的时候用的是var还是let,var的作用域为整个函数体,而let作用的是整个函数体。因此,当return funcs这条语句执行时,若为var定义的i为10。而用let定义的i,因为i的作用域被卡死在循环体内,所以不同的循环体里i都有一个与其他循环体不同的作用域内部的i,即每个循环体都有自己的作用域。

我不知道我解释清楚这个没有,但是我的理解就是,每个循环体都有自己的独立作用域,如果是用let定义的i,那么每个循环体里面都有一个i,而用var定义,则10个循环体共用一个i,所以最后输出的全是10。

js权威指南上说,“与闭包关联的作用域是’活的’。”我还没理解这句话意思。。。

var 与let的变量提升

console.log(getPi)
console.log("pi",Pi)
console.log(p)
getPi()
function getPi(){
	return 3.14
}
var Pi =3.14
let p = 'p'

在这里插入图片描述

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

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

相关文章

神经网络的基本工作原理——机器学习

目录 ​编辑 一、实验内容 二、实验过程 1、算法思想 2、算法原理 3、算法分析 三、源程序代码 四、运行结果及分析 五、实验总结 一、实验内容 掌握神经元细胞的数学模型&#xff1b;理解并掌握神经网络的训练过程&#xff1b;理解并掌握神经网络中的矩阵运算&#xff…

Neo4j入门实战

1.介绍 2.实战 Neo4j的sql语句 1.创建多个节点 CREATE (:student {name:小张,age:20}),(:student {name:彭莎丽,age:18})2.匹配节点将节点删除 这样删除是将student中的条件节点删除——>会变成空白节点 match (m:student {name:"Fairy同学"}) remove m:stu…

Docker数据管理

目录 一、数据卷 二、数据卷容器 三、容器互联 管理 Docker容器中数据主要有两种方式&#xff1a; 数据卷&#xff08;Data Volumes&#xff09;数据卷容器&#xff08;DataVolumes Containers&#xff09; 一、数据卷 数据卷是一个供容器使用的特殊目录&#xff0c;位于容…

设计模式之美——基于接口编程

抽象类在被继承时体现的是 is-a 关系&#xff0c;接口在被实现时体现的是 can-do 关系 例如&#xff0c;Plane can fly. Bird can fly&#xff0c;应该把 fly 定义成一个接口。 – 参考 《码出自效Java 开发手册》 函数的命名不能暴露任何实现细节。比如&#xff0c; uploadT…

集合类ArrayList的扩容机制详解

ArrayList类的内部对构造方法进行了重载&#xff0c;提供了无参构造和有参构造两种构造方法。在ArrayList类的内部维护了一个elementData数组用来存放添加的对象。(关于transient关键字&#xff1a;该关键字修饰的属性&#xff0c;不会进行串行化、序列化)。 目录 无参构造扩容…

胡编乱造的自我介绍

写在前面&#xff1a;这篇文章的内容纯属胡编乱造 切勿信以为真。 一、 姓&#xff1a;&#xff08;Black) 布莱克 名&#xff1a;&#xff08;Sirius) 天狼星 中间名&#xff1a;(Orion) 奥莱恩 结束&#xff01; 二、于 2022年3月 入读清华大学信息技术系硕士 &#xff01; 结…

harbor 安装

harbor 安装一.离线安装helm1.下载安装包&#xff0c;上传到服务器2.解压4.验证二.安装harbor1.导入 Harbor源2.下载 Harbor Helm目录3.解压缩4.修改 Harbor Values文件5.部署 Harbor6.访问 Harbor7.验证8.修改daemon.json9.登录Harbor、并push镜像验证10.登录Harbor页面验证是…

基站交直流配电多回路无线智能电量采集监控装置

【摘要】介绍了安科瑞两款多回路无线智能电量采集监控装置&#xff0c;可应用于基站的交直流配电监控、低压出线开关柜集中监控、末端配电箱等集成电力参数监测、电能计量、环境温湿度监测以及无线传输的各类应用场景。 【关键词】无线监控&#xff1b;多回路监控&#xff1b;铁…

OpenFeign源码2-Bean注册过程和调用过程

0. 环境 nacos版本&#xff1a;1.4.1Spring Cloud : Hoxton.SR9&#xff08;没用2020.0.2版本后面说明&#xff09;Spring Boot &#xff1a;2.4.4Spring Cloud alibaba: 2.2.5.RELEASESpring Cloud openFeign 2.2.2.RELEASE 测试代码&#xff1a;github.com/hsfxuebao/s… 20…

深入理解java虚拟机:虚拟机类加载机制(1)

文章目录1. 类加载的时机2. 类加载的过程2.1 加载2.2 验证2.3 准备2.4 解析2.5 初始化1. 类加载的时机 类从被加载到虚拟机内存中开始&#xff0c;到卸载出内存为止&#xff0c;它的整个生命周期包括了&#xff1a; 加载&#xff08;Loading&#xff09;验证&#xff08;Verif…

计算机网络-应用层(文件传输协议(FTP协议),电子邮件系统(SMTP协议,MIME,POP3,IMAP协议))

文章目录1. 文件传输协议2. 电子邮件系统1. 文件传输协议 文件传输协议&#xff1a; 文件传送协议FTP&#xff1a;提供不同种类主机系统&#xff08;硬、软件体系等都可以不同&#xff09;之间的文件传输能力。简单文件传送协议TFTP&#xff1a;使用于UDP环境&#xff0c;代码…

MyBatis-Plus入门案例

MybatisPlus&#xff08;简称MP&#xff09;是基于MyBatis框架基础上开发的增强型工具&#xff0c;旨在简化开发、提供效率。 开发方式 基于MyBatis使用MyBatisPlus基于Spring使用MyBatisPlus基于SpringBoot使用MyBatisPlus SpringBoot它能快速构建Spring开发环境用以整合其…

设计模式之美——看似面向对象,实则面向过程

常见的编程范式或者说编程风格有三种&#xff0c;面向过程编程、面向对象编程、函数式编程&#xff0c;而面向对象编程又是这其中最主流的编程范式。现如今&#xff0c;大部分编程语言都是面向对象编程语言&#xff0c;大部分软件都是基于面向对象编程这种编程范式来开发的。 …

《Redis设计与实现》笔记

第二章&#xff1a;简单动态字符串 1.Redis没有直接使用C语言传统的字符串表示(以空字符结尾的字符数组,以下简称C字符串),而是自己构建了一种名为简单动态字符串( simple dynamic string,SDS)的抽象类型,并将SDS用作 Redis的默认字符串表示。 Redis里面,C字符串只会作为字符串…

操作系统第三章习题及答案(汤子瀛第四版)

第三章 1&#xff0e;高级调度与低级调度的主要任务是什么&#xff1f;为什么要引入中级调度&#xff1f; 答&#xff1a;高级调度的主要任务是根据某种算法&#xff0c;把外存上处于后备队列中的那些作业调入内存。低级调度是保存处理机的现场信息&#xff0c;按某种算法先取…

【UE4】打包失败 Failed to build UATTempProj.proj

我抄我自己之 https://zhuanlan.zhihu.com/p/586117443 前两天编 UE4.27 源码内存和CPU直接全是100%爆满&#xff0c;甚至还报错&#xff1a;c1060, the compiler is out of heap&#xff0c;设置虚拟内存也不不好使&#xff0c;发现16GB内存不配编 UE&#xff0c;火速换了64G之…

Kotlin或将超越Go?

知名软件行业分析公司 RedMonk 发布了 2022 年 6 月&#xff08;第三季度&#xff09;编程语言排行榜。 RedMonk 编程语言排行榜通过追踪编程语言在 GitHub 和 Stack Overflow 上的代码使用情况与讨论数量&#xff0c;统计分析后进行排序&#xff0c;其旨在深入了解潜在的语言…

你真的知道Spring Security安全框架吗?

1、什么是安全管理框架&#xff1f; 解决系统安全问题的框架。如果没有安全框架&#xff0c;我们需要手动处理每个资源的访问控制&#xff0c;非常麻烦。使 用安全框架&#xff0c;我们可以通过配置的方式实现对资源的访问限制。 安全框架&#xff0c;简单说是对访问权限进行控…

Android Material Design之MaterialButton(一)

按规矩先上效果图 资源引入 implementation com.google.android.material:material:1.4.0关键属性 属性描述app:backgroundTint背景着色app:backgroundTintMode着色模式app:strokeColor描边颜色app:strokeWidth描边宽度app:cornerRadius圆角大小app:rippleColor按压水波纹颜色…

【Java八股文总结】之计算机网络

文章目录计算机网络一、基础1、网络体系结构2、HTTP协议、TCP协议、UDP协议比较3、网络协议4、WebSocket和Socket的区别&#xff1f;5、常见的端口及其对应的服务&#xff1f;6、从浏览器输入URL到页面展示发生了什么&#xff1f;&#xff08;★★★★★&#xff09;1、DNS域名…