js闭包简单理解

news2024/10/6 20:30:51

js里面的闭包是一个难点也是它的一个特色,是我们必须掌握的js高级特性,那么什么是闭包呢?它又有什么作用呢?

1,提到闭包我们这里先讲解一下js作用域的问题

js的作用域分两种,全局和局部,基于我们所熟悉的作用域链相关知识,我们知道在js作用域环境中访问变量的权利是由内向外的,内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量,反之则不能,也就是说在外层作用域下无法获取内层作用域下的变量,同样在不同的函数作用域中也是不能相互访问彼此变量的。

(1)变量在函数内声明,变量为局部作用域。
局部变量:只能在函数内部访问。

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

(2)变量在函数外定义,即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

ar carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

(3)如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
以下实例中 carName 在函数内,但是为全局变量。

// 此处可调用 carName 变量
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

2,闭包有3个特性:

①函数嵌套函数

②函数内部可以引用函数外部的参数和变量

③参数和变量不会被垃圾回收机制回收

3,闭包存在两种的主要形式:

(1)、函数作为返回值

function fn(){
    var str = 'abc';
    return function(){
        return str
    }
}
var fn1 = fn();
console.log(fn1) //abc

在这段代码中,fn()中的返回值是一个匿名函数,这个函数在fn()作用域内部,所以它可以获取fn()作用域下变量str的值,将这个值作为返回值赋给全局作用域下的变量fn1,实现了在全局变量下获取到局部变量中的变量的值

(2)、经典闭包循环

function fn(){
    var num = 3;
    return function(){
        var n = 0;
        console.log(++n);
        console.log(++num);
    }
}
var fn1 = fn();
fn1(); //1 4
fn1()//1 5

一般情况下,在函数fn执行完后,就应该连同它里面的变量一同被销毁,但是在这个例子中,匿名函数作为fn的返回值被赋值给了fn1,这时候相当于fn1=function(){var n = 0 … },并且匿名函数内部引用着fn里的变量num,所以变量num无法被销毁,而变量n是每次被调用时新创建的,所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁,于是乎最后就剩下孤零零的num,于是这里就产生了内存消耗的问题

(3)、定时器与闭包

for(var i=0;i<5;++i){
        setTimeout(()=>{
            console.log(i,'000')
        },100)
}

在这里插入图片描述

for(var i=0;i<5;++i){
    (function(i){
        setTimeout(()=>{
            console.log(i,'000')
        },100)
    })(i)
}

在这里插入图片描述
引入闭包来保存变量i,将setTimeout放入立即执行函数中,将for循环中的循环值i作为参数传递,100毫秒后同时打印出1 2 3 4 5

(4)、闭包作为参数传递

在这里插入图片描述

var num = 10
var fn = function (x) {
	if (x>num) {
		console.log(x, 'num值')
	}
}
void function (fn1) {
	var num = 100
	fn1(30)
}(fn)

拓展一下参数传递:

1.1:参数传递方式

函数参数的传递方式有两种,一个是传值传递,一个是传址传递。

当函数参数是原始数据类型时(字符串,数值,布尔值),参数的传递方式为传值传递。也就是说,在函数体内修改参数值,不会影响到函数外部。

var a = 1;
function keith(num) {
num = 5;
}
keith(a);
console.log(a); //1

上面代码中,全局变量a是一个原始类型的值,传入函数keith的方式是传值传递。因此,在函数内部,a的值是原始值的拷贝,无论怎么修改,都不会影响到原始值。

但是,如果函数参数是复合类型的值(数组、对象、其他函数),传递方式是传址传递(pass by reference)。也就是说,传入函数的是原始值的地址,因此在函数内部修改参数,将会影响到原始值。

var arr = [2, 5];
function keith(Arr) {
Arr[0] = 3;
}
keith(arr);
console.log(arr[0]); //3

上面代码中,传入函数keith的是参数对象arr的地址。因此,在函数内部修改arr第一个值,会影响到原始值。

注意,如果函数内部修改的,不是参数对象的某个属性,而是替换掉整个参数,这时不会影响到原始值。

var arr = [2, 3, 5];
function keith(Arr) {
Arr = [1, 2, 3];
}
keith(arr);
console.log(arr); // [2,3,5]

上面代码中,在函数keith内部,参数对象arr被整个替换成另一个值。这时不会影响到原始值。这是因为,形式参数(Arr)与实际参数arr存在一个赋值关系。

1.2:同名参数

如果有同名参数,则取最后面出现的那个值,如果未提供最后一个参数的值,则取值变成undefined。

function keith(a, a) {
return a;
}
console.log(keith(1, 3)); //3
console.log(keith(1)); //undefined

如果想访问同名参数中的第一个参数,则使用arguments对象。

function keith(a, a) {
return arguments[0];
}
console.log(keith(2));  //2

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

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

相关文章

代码随想录第十六天(347、194、195、94)

347. 前 K 个高频元素 答案 思路&#xff1a; 1、首先&#xff0c;用到了每个值对应的出现次数&#xff0c;想到要用哈希map存放 2、还需要将出现频率从大到小进行排序&#xff0c;找出前k个元素 3、时间复杂度应该比O&#xff08;nlogn&#xff09;小 如果想用快速排序&…

黑盒渗透盲打lampiao

一、查找主机ip&#xff0c;通过Nmap扫描工具排查出我的靶机的IP 为.134 python tools.py ip -i 192.168.12.0 -h 254 -l 1 二、扫描其他端口。 1898 三、查看网站漏洞情况&#xff0c;典型的漏洞特征 Ac扫描漏洞情况&#xff0c;利用典型的漏洞。 四、开始getshell 1、启动M…

SigmaPlot科学绘图工具:ROC曲线分析及AUC组间差异的显著性分析

目的 初步使用SigmaPlot科学绘图工具&#xff1b;进行ROC曲线绘制并分析检验变量AUC组间差异性是否显著 软件下载及安装 SigmaPlot下载安装按照这个教程即可&#xff1a;https://www.hhkxxw.com/24799.html 快速通道&#xff1a;SigmaPlot下载链接&#xff1a;百度网盘链接…

如何实现文件高速传输,推荐镭速高速文件传输解决方案

随着互联网的发展&#xff0c;文件传输越来越频繁&#xff0c;如何实现文件高速传输已经越来越成为企业发展过程中需要解决的问题&#xff0c; 在当今的业务中&#xff0c;随着与客户和供应商以及内部系统的所有通信的数据量不断增加&#xff0c;对高速文件传输解决方案的需求…

Prometheus之Alertmanager告警

告警流程 Prometheus主要是提供了数据的采集和存储&#xff0c;Alertmanager组件主要实现告警功能。Alertmanager 主要用于接收 Prometheus 发送的告警信息&#xff0c;它支持丰富的告警通知渠道&#xff0c;而且很容易做到告警信息进行去重&#xff0c;降噪&#xff0c;分组等…

Elasticsearch 基础(三)之相关术语概念及原理

目录前言一、集群1、相关术语概念1.1、集群&#xff08;Cluster&#xff09;1.2、节点&#xff08;Node&#xff09;1.3、角色&#xff08;Roles&#xff09;1.4、分片&#xff08;Shard&#xff09;2、集群场景及原理2.1、集群健康2.2、空节点2.3、单节点2.4、集群追加节点2.5…

【GeoDjango框架解析——读取矢量数据写入postgis数据库】

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 geodjango框架解析之读取矢量数据shp文件写入postgis数据库 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录…

我记不住的那些maven内容

背景&#xff1a; 之前使用maven都是基于IDE并且对maven本身也很少究其过程和原理&#xff0c;当出现问题也不知道如何解决&#xff0c;后续想使用命令行来进行操作&#xff0c;并通过文档记录一下学习的内容加深理解以防止忘记。 一、简要介绍 maven是通过插件来增强功能&am…

项目经理该怎样做好项目质量管理工作?

项目经理做好项目质量管理工作&#xff0c;重点需要关注以下几个方面&#xff1a; 1、质量产生于过程 需要成熟稳定的软件过程 软件项目质量产生于开发过程&#xff0c;要想真正提高软件质量&#xff0c;必须有一个成熟而稳定的软件过程。如因特殊原因造成的过程性能不稳定&…

自动化测试框架pytest教程(一)pytest用例编写和pytest前后置方法

自动化测试框架pytest教程(一)pytest用例编写和pytest前后置方法 目录&#xff1a;导读 一、入门使用 1、环境安装 2、用例编写 3、执行测试 二、前后置方法和fixture机制 1、xunit风格的前后置方法 函数用例的前后置方法 测试类中用例的前后置方法 模块级别的前后置…

Tekton实战案例--S2I

案例环境说明 示例项目&#xff1a; 代码仓库&#xff1a;https://gitee.com/mageedu/spring-boot-helloWorld.git 构建工具maven pipeline各Task git-clone&#xff1a;克隆项目的源代码 build-to-package: 代码测试&#xff0c;构建和打包 generate-build-id&#xff1a;生…

valgrind 移植到arm64 平台上总结

valgrind 介绍valgrind是查找内存泄漏的神器&#xff0c;你可以自动的检测许多内存管理和线程的bug&#xff0c;避免花费太多的时间在bug寻找上&#xff0c;使得你的程序更加稳固。 下载地址&#xff1a;https://valgrind.org/downloads/ 本人下载的是valgrind-3.19.0valgrind编…

【Java基础 下】 026 -- 集合进阶(不可变集合、Stream流、方法引用)

目录 一、不可变集合 1、创建不可变集合的应用场景 2、创建不可变集合的书写格式 ①、不可变的List集合 ②、不可变的Set集合 ③、不可变的Map集合 3、小结 二、Stream流 1、体验Stream流的作用 2、Stream流的思想 3、Stream流的使用步骤 ①、单列集合获取Stream流 ②、双列集合…

面试 | 递归乘法【细节决定成败】

不用[ * ]如何使两数相乘❓一、题目明细二、思路罗列 & 代码解析1、野蛮A * B【不符合题意】2、sizeof【可借鉴】解析3、简易递归【推荐】① 解析&#xff08;递归展开图&#xff09;② 时间复杂度分析4、移位<<运算【有挑战性&#x1f4aa;】① 思路顺理② 算法图解…

消息队列的介绍

1.什么时候会用到消息队列&#xff1f; 公司本身业务小&#xff0c;可以做单体的&#xff0c;但是后面业务体量不断扩大&#xff0c;采用微服务的设计思想&#xff0c;分布式的部署方式&#xff0c;所以拆分了很多的服务&#xff0c;随着体量的增加以及业务场景越来越复杂了&a…

SCG failure information

我们知道5G网络有独立组网和非独立组网&#xff0c;独立组网中不论是核心网还是接入网都是5G&#xff0c;但是部署成本高&#xff1b;非独立组网也就是双连接(MRDC)也是目前比较流行的一种方式&#xff0c;其中的ENDC&#xff0c;即E-UTRA-NRDual Connectivity&#xff0c;是将…

Apifox-比postman更优秀的接口自动化测试平台

一、Apifox介绍 Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台&#xff0c;定位 Postman Swagger Mock JMeter。通过一套系统、一份数据&#xff0c;解决多个系统之间的数据同步问题。只要定义好 API 文档&#xff0c;API 调试、API 数据 Mock、A…

如何将Linux的NIC 名称更改为 eth0 而不是 enps33 或 enp0s25,只要几秒钟

概述 我们使用Linux系统&#xff0c;网卡名称通常都是eth0&#xff0c;但是有一些新的linux发行版&#xff0c;网卡名字 enps33 或 enp0s25。 pengubuntu:~$ ifconfig ens33 Link encap:Ethernet HWaddr 00:0c:29:fd:4d:3a inet addr:192.168.0.113 Bcast:192.168.0.…

[NOIP2002 普及组] 过河卒

题目描述&#xff1a; 棋盘上 A 点有一个过河卒&#xff0c;需要走到目标 B 点。卒行走的规则&#xff1a;可以向下、或者向右。同时在棋盘上 C 点有一个对方的马&#xff0c;该马所在的点和所有跳跃一步可达的点称为对方马的控制点。因此称之为“马拦过河卒”。 棋盘用坐标表…

上海亚商投顾:沪指窄幅震荡 ChatGPT概念股全线下挫

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。市场情绪三大指数早盘小幅冲高&#xff0c;随后又震荡走低&#xff0c;午后一度集体翻绿&#xff0c;临近尾盘有所回升。Chat…