初识js中的闭包_Js闭包中变量理解

初识js中的闭包_Js闭包中变量理解今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易。当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

  今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易。

  当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为闭包牵扯到一些前面的东西,比如作用域\等等,如果连基本的作用域都没有弄清楚,自然不可能搞懂闭包,还有就是对js的实践比较少,因为你根本就不知道什么时候要用这东西,自然谈不上对闭包的深刻理解。

  今天我就简单的说说我目前所理解的闭包,当然可能不完全正确,但是我相信会给你一定的启发。

 

  首先我们来谈谈js中的变量,如果你不知道我为什么要说这些,那么你根本没有掌握js的基础,建议回头复习。

js中分:全局变量 和 局部变量

  全局变量:可以在任意位置访问的量就叫全局变量

    

1 var age = 20; 2 function a(){ 3 console.log(age); >>20 4 } 5 a();

  局部变量:函数中用var定义的变量,只能在函数中访问这个变量,函数外部访问不了。

1 function a(){ 2 var age = 20; 3 } 4 a(); 5 console.log(age); >> Uncaught ReferenceError: age is not defined

 

注意点1:在函数中如果不使用var定义变量那么js引擎会自动添加成全局变量。

注意点2:全局变量从创建的那一刻起就会一直保存在内存中,除非你关闭这个页面,局部变量当函数运行完以后就会销毁这个变量,假如有多次调用这个函数它下一次调用的时候又会重新创建那个变量,既运行完就销毁,回到最初的状态,简单来说局部变量是一次性的,用完就扔,下次要我再重新创建。

 

函数的相关知识点:

        1. 一个函数内可以嵌套多个函数

    2. 函数里面的子函数可以访问它上级定义的变量,注意不只是一级,如果上级没有会继续往上级找,直到找到为止,如果找到全局变量到找不到就会报错。

     

1 function a(){ 2 var name = "追梦子"; 3 function b(){ 4 console.log(name); >> "追梦子" 5 } 6 b(); 7 } 8 a();

    3. 函数的另外一种调用形式,你可以把它叫做自调用,自己调用自己,达到自执行的效果。

   

1 var a = 0; 2 (function(){ 3 console.log(++a); >>1 4 })()

这种方式用()把内容包裹起来,后面的()表示执行这个函数,可能你会问为什么要把函数包起来,如果不包裹起来,js会把它当作函数声明来处理,如果包裹起来就是表达式,还没有看懂就上网查吧。

 

 

开始我们正式闭包部分—————————- 币包 —————像钱包一样的东西,可以把东西包裹起来———-

      首先我们来看看为什么需要学习闭包,加以理解 — 0 v  0- –

 

1 function a(){ 2 var num = 0; 3 console.log(++num); 4 } 5 a(); >>1 6 a(); >>1

上面代码输出了两次1,为什么呢?如果你有看我上面的关于变量部分肯定能够想到个大概。

  前面我们说过了函数执行完以后,里面的变量(即局部变量)就会销毁,下一次运行又会重新创建那个变量,所以虽然你第一次++num了但是这个变量在第一次执行完毕以后就被销毁了。

那么我们怎么样才能确保第一次的变量不被销毁,那么就需要我们的闭包出场了。

温馨提示:JavaScript中有回收机制,函数没有被引用执行完以后这个函数的作用域就会被销毁,如果一个函数被其他变量引用,这个函数的作用域将不会被销毁,(简单来说就是函数里面的变量会被保存下来,你可以理解成全局变量。)

…………………………………………………………………………………… 当 当 当 …………….. 下面有请我们的币包同志

 

function a(){ var aa = 0; function b(){ aa ++; console.log(aa); } return b; } var ab = a(); ab(); //1 ab(); //2

看到了吧里面的变量的值没有被销毁,因为函数a被外部的变量ab引用,所以变量aa没有被回收。

     如果某个函数被它的父函数之外的一个变量引用,就形成了一个闭包

还有一种更为常用的闭包写法

var bi = (function(){ var a = 0; function b(){ a ++; console.log(a); } return b; })(); bi(); //1 bi(); //2 bi(); //3

执行过程分析:

  首先把一个自执行函数赋值给了bi,这个自执行函数运行完成以后就bi的值就变成了

function b(){
    a ++;
    console.log(a);
}

  因为我们在上面的代码return回去了b,然后因为这个自执行函数被bi引用所以里面的变量a并没有因为这个自执行函数执完而销毁,而是保存到了内存中,所以我们多次打印bi()就成了1、2、3

 

下面我来说一个闭包的使用场景吧。

   没有使用闭包的版本

window.onload = function(){ var ul = document.getElementsByTagName("ul")[0]; var li = ul.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ li[i].onclick = function(){ console.log(i); //不管我怎么点都是返回6
 } } }

  使用了闭包的版本

window.onload = function(){ var ul = document.getElementsByTagName("ul")[0]; var li = ul.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ (function(i){ li[i].onclick = function(){ console.log(i); //点击第几个返回第几个
 } })(i) } }

、、、、、如果你不理解这个,你只要这样子用就能够达到效果。

 

这也只是简单的介绍了一下,后面将会在闭包的高级部分讲解。如果你对闭包有更深的理解可以pm我。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166391.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ETL数据同步工具Kettle简介

    ETL数据同步工具Kettle简介很多时候,我们需要将一个系统的数据同步到另外一个系统中,两个系统的数据库可能不同,ETL数据同步工具Kettle可能轻松帮我们实现,该功能,而且还可以定时执行数据同步任务。ETL数据同步工具Kettle使用Kettle简介:Kettle是一款国外开源的ETL工具,纯java编写,可以在Window、Linux、Unix上运行,数据抽取高效稳定。Kettle中文名称叫水壶,该项目的主程序

  • 妙用AccessibilityService黑科技实现微信自动加好友拉人进群聊[通俗易懂]

    妙用AccessibilityService黑科技实现微信自动加好友拉人进群聊[通俗易懂]妙用AccessibilityService黑科技实现微信自动加好友拉人进群聊标签:2018引言:在上上周的周六和周日,我发了两篇利用itchat实现微信机器人的文章(Python):小猪的Python学习之旅——18.Python微信转发小宇宙早报小猪的Python学习之旅——19.Python微信自动好友验证,自动回复,发送群聊链接通过把脚本挂到服务器上…

  • STM32 的优先级NVIC配置

    STM32 的优先级NVIC配置1、NVIC优先级介绍2、NVIC优先级比较提条件1:组别优先顺序(第0组优先级最强,第4组优先级最弱):*强调内容***NVIC_PriorityGroup_0>NVIC_PriorityGroup_1>NVIC_PriorityGroup_2>NVIC_PriorityGroup_3>NVIC_PriorityGroup_4前提条件2:“组”优先级别>“抢”占优先级别>“副”优先级别前提

  • 异或满足结合律吗_异或1⊕0的结果是

    异或满足结合律吗_异或1⊕0的结果是给定一个非负整数序列 a,初始长度为 N。有 M 个操作,有以下两种操作类型:A x:添加操作,表示在序列末尾添加一个数 x,序列的长度 N 增大 1。Q l r x:询问操作,你需要找到一个位置 p,满足 l≤p≤r,使得:a[p] xor a[p+1] xor … xor a[N] xor x 最大,输出这个最大值。输入格式第一行包含两个整数 N,M,含义如问题描述所示。第二行包含 N 个非负整数,表示初始的序列 A。接下来 M 行,每行描述一个操作,格式如题面所述。输出格式每个询问操

  • idea2021通用激活码【2021.7最新】[通俗易懂]

    (idea2021通用激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~MLZPB5EL5Q-eyJsaWNlb…

  • 科学计数法E表示什么_科学计数法e-5什么意思

    科学计数法E表示什么_科学计数法e-5什么意思计算机表达10的幂是一般是用E或e,即1.03乘10的8次方,可简写为“1.03E+08”的形式-1.03乘10的8次方,可简写为“-1.03E+08”的形式1.03乘10的-8次方,可简写为“1.03E-08”的形式-1.03乘10的-8次方,可简写为“-1.03E-08”的形式…

    2022年10月23日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号