Javascript嵌套函数的调用

news2024/9/19 19:46:04

这里其实还是讲讲我对javascript闭包的认识。js中闭包就是以嵌套函数的外表出现的。内容是我自己琢磨的,我估计如果这个问题了解很清楚的话,javascript的闭包就没有问题了。其实这里探讨的是一个非常司空见惯,但是可能很多人没有注意的细节。

我先提一个问题:javascript中嵌套在函数里面的函数在什么时候进行调用和执行呢?

这个问题可以简单也可以很复杂。

为了理解这个问题需要知道的知识点是:* 1* javascript函数的作用域,尤其是嵌套在外函数里面的内部函数的作用域。2 javascript中的事件循环机制。3 javascript函数调用或执行时候的标志

1 js函数作用域。你可以把js的嵌套函数看做一个字 。就是这个字,其实我想用这个字。 坐牢的囚犯被监狱的深墙与外界隔离。
囚犯的活动空间就在监狱以内。 大墙内的东西囚犯是可以用的。

//这是一个嵌套函数,内部函数从外部函数中返回
    var Prison=function() {  
        var food='rice';
            return Prisoner(){ //如果没有这个return是什么情况呢?
                return food;
                };
    }

以下代码在chrome浏览器下调试

 

上面就是嵌套函数的作用域,内部函数单独调用是不行的。注意图2,当我们调用外层函数Prison()的时候,由于内部函数return了。所以console会打印出这个函数的函数定义体。 如果把这个函数体赋值给变量makePrisoner,就可以调用了。嘿嘿,微妙的地方就在这里了

好了,如果注意到这个微妙的地方,再来看看第二个问题,在嵌套函数中的时间循环问题。 当我想到嵌套在外部函数内部的函数,当他在调用或执行的时候也会进入事件循环的时候 问题似乎一下就清楚了。
这个地方的概念也是解决回调函数丢失外部函数调用对象的问题的原因。还记得 var that=this吗? 在这里我会把这个问题讲明白。

如果是开始的代码块,一个外部函数,嵌套一个内部函数。 注意下面这个概念,我自己总结的,不知道得当与否?

1 Prison()函数调用的时候,他首先会进入js单线程的事件执行队列中,进行排队。等待事件循环队列排在他前面的任务完成。
2 前面没有其他任务的时候,就可以执行Prison()的具体过程。如图2执行的结果是把返回的内部函数的引用赋值给makePrisoner。
3过了半个小时以后,我想起来了有个函数要执行,于是在命令行执行makePrisoner()
4 makePrisoner并没有立即执行,他也会进入事件循环队列进行排队,等待执行。
5 前面排队的函数都执行完了,这才执行makePrisoner的具体过程,就是返回 字符串 rice

上面这个总结的过程非常微妙,细节就在于嵌套的函数的分部执行过程,尽管内部函数嵌套在外部函数内,但是外部函数并没有影响内部函数的权利,内部函数的执行是不受外部函数控制的。
如果是寻找函数执行的标记,那么既然有外部函数和内部函数,调用的时候会有两队括号出现 , Prison(), makePrisoner();后面这个函数其实是Prisoner函数的引用,定义在js字面量对象或者数组里的函数,其实都可以传引用。

如果上面这个事件循环的过程理解了,我们先来解决一下var that=this这个问题

 //也是嵌套函数
  function closureExample(objID, text, timedelay) { 
    setTimeout(function() { 
        document.getElementById(objID).innerHTML = text; 
    }, timedelay); 
} 
closureExample(‘myDiv’, ‘Closure is created’, 500);//外部函数执行
//经过500毫秒以后,setTimeout函数自执行,这个函数是自动返回的

在javascript-This全面解析中我,写了一句话,js中一个函数在调用的时候一定会绑定在一个对象上
上面这个代码块外部函数和内部函数在不同的时间调用,调用时绑定的是什么对象? 恰好第一个函数和第二个函数执行的时候,眼睛观察到的调用是看不到对象,所以执行的是默认绑定,都默认绑定在全局对象window上(浏览器环境)。这是碰巧偶遇了。看看下面这个段代码

function closureExample() {
    var that = this; // 通过变量捕获this的引用
    setTimeout( function(){
        console.log( that.a ); //console.log(this.a);会有什么结果?
    }, 100 );
}

var obj = {
    a: 2
};

closureExample.call( obj ); // 2 ,closureExample函数调用的时候通过
//call硬绑定了obj对象,this就是obj对象的引用

上面这段代码closureExample函数调用的时候,通过call方法绑定在obj对象上。 当100毫秒以后setTimeout函数调用时,closureExample函数调用已经结束了(因为closureExample排在事件循环队列的前面),这个时候setTimeout()找不到优先级别更高的对象,也默认绑定在全局window对象上(浏览器环境)。
closureExample执行时候绑定的对象和setTimeout执行时候绑定的对象不同了。为什么会不同呢? 外部函数和内部函数是两个不同的事件循环位置,独立调用的,嵌套在一起并不表示会一起执行。写在一起,但是执行时分开的。 上面的函数 setTimeout的时间改为0毫秒,也是两个独立的调用过程。

如果使用了var that=this.情况就不同了。囚禁在函数内部的函数可以捕获外部函数的局部变量,使用var that=this就完成了对外部函数调用时候绑定对象的引用赋值。这样内部函数就可以通过对象引用来使用外部函数绑定的那个对象。内部函数的this仍然指向自身调用时绑定的对象。 这就是内部函数丢失外部函数调用绑定对象的原因。

闭包函数可以对抗javascript的垃圾回收机制,根源也在于闭包的嵌套函数,内外两个函数的独立事件循环调用。 解释器找到嵌套函数的时候,会建立一个调用栈,如果是一个函数就标记为0,当这个函数执行完了以后,就立即回收。 闭包的嵌套函数就不同了,由于有两个函数,调用栈就标记为1, 表示内部还有函数,这个函数不知道什么时候才执行,所以js引擎就把他保存在内存中了。

关于js闭包函数对抗垃圾回收机制。有个故事非常生动的描述了这个过程。 说有老人楼上住着一个年轻人,每天晚上回来都会脱鞋,动静挺大,我们都知道鞋都是两只嘛。 当脱掉一只的时候,老头就会等第二只落地以后才能休息,但是第二只鞋什么时候落地呢?

好了,这个问题讲完了,如果仔细看完,我觉得对js会有一个更深的体会。有什么写的不对的地方希望大家指出。


 

 

链接:https://www.jianshu.com/p/f7abecee0691

 

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

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

相关文章

SQL-函数篇

在SQL中,函数是用于执行特定操作的预定义代码块。它们可以帮助我们处理字符串、数值、日期等数据类型。下面是一些常用的SQL函数及其用法。 下面是一些常用的函数: 字符串函数 字符串函数用于操作和处理字符串数据。 -- 将两个字符串连接起来 select c…

爱心动画代码HTML5

这段代码是一个HTML5 Canvas动画,它通过JavaScript创建了一个动态的爱心效果。页面初始化时,首先定义了一些基本设置,如粒子数量、持续时间、速度等。然后,定义了Point和Particle类,用于处理粒子的位置和运动。接着&am…

部署Nginx负载均衡+动静分离的群集

目录 一、Nginx应用 二、正向代理与反向代理 1.1正向代理 1.2反向代理 三、负载均衡 1.轮询(Round Robin) 2.最小连接数 3.IP hash: 4.加权轮询 5.最少事件算法 6.一致性hash 一、Nginx应用 Nginx是一款非常优秀的HTTP服务器软件 支持高达50 …

【生日视频制作】洪崖洞高大楼AE模板修改文字软件生成器教程特效素材【AE模板】

洪崖洞企业高大楼生日视频制作教程AE模板改文字特效生成器素材 怎么如何做的【生日视频制作】洪崖洞企业高大楼AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤: 安装AE软件下载AE模板把AE模板导入AE软件修改图片或文字渲染出视频

【JAVA八股文】持续更新中...

【-------------数据类型------------】 一、基本类型、包装类型 基本类型:整型(byte short int long )浮点型(float double)布尔型(boolean) 字符型&#xff…

【联想电脑】:使用拓展坞后转接HDMI,无法识别显示屏

项目场景: 作为一个嵌入式软件开发者,有两个外接屏幕,不足为奇。 但是在今天的使用电脑过程中,出现了接了一个拓展坞上面有HDMI接口,但是HDMI接口接上外接显示屏的时候电脑无法识别到,导致只有电脑直连的HD…

安装Pentaho Data Integration并启动

“pdi-ce-9.3.0.0-428.zip”包在 “/opt/software/”目录下。 步骤详情 1. 解压zip包2. 启动 Pentaho Data Integration PDI(Kettle) GUI 界面 1. 解压zip包 因为 Kettle 是绿色软件工具,开箱即用,无须安装。首先进入“/opt/soft…

ansible 中剧本的书写与运行

1.更改配置文件vim /etc/ansible/hosts 2.测试m0主机与s0、s1、s2,之间可以ping通 [rootm0 ansible]# ansible group02 -m ping 3.书写脚本文件 [rootm0 ~]# vim test0001.yml ​ --- - hosts: group02remote_user: roottasks: ​- name:…

【Qt】常用控件QLabel

常用控件QLabel QLabel可以用来显示文本和图片。 QLabel的属性 其核心属性如下: 属性说明 text QLabel 中的⽂本 textFormat ⽂本的格式. Qt::PlainText 纯⽂本Qt::RichText 富⽂本(⽀持 html 标签)Qt::MarkdownText markdown 格式Qt::AutoText 根据⽂本内容…

uniapp 页面跳转传参:父页面监听子页面传过来的数据

父页面 监听events事件 uni.navigateTo({url: "/components/watermark-camera",events: { // 重点重点重点重点重点重点重点重点getImages(data) { // 接收子页面抛出的 getImages 事件console.log("水印相机的照片:", data)}}})子页面 const …

人工智能和机器学习 3(复旦大学计算机科学与技术实践工作站)python机器学习、Pytorch库入门、d2l学习+<机器学习、神经网络————原理、理论>

前言 安装 — 动手学深度学习 2.0.0 documentation (d2l.ai)https://zh.d2l.ai/chapter_installation/index.html 安装 我们需要配置一个环境来运行 Python、Jupyter Notebook、相关库以及运行本书所需的代码,以快速入门并获得动手学习经验。 安装 Miniconda 最…

【css】水平对齐方式(justify、text-align、display: flex;)

一、justify 完整的属性名是 justify-contentjustify-content 用于定义位于同一行的项目在主轴(通常是水平方向)上的对齐方式。 center :居中start : 起始位置对齐(左对齐)end : 结束位置对齐(右对齐&…

使用 LlamaIndex 中的 Relik 进行实体链接和关系提取

从文本构建知识图谱长期以来一直是一个令人着迷的研究领域。随着大型语言模型 (LLM) 的出现,该领域获得了更多主流关注。然而,LLM 的成本可能相当高。另一种方法是微调较小的模型,这种方法得到了学术研究的支持,可以产生更有效的解…

无线领夹麦克风哪个牌子好?最好的无线麦克风品牌排行推荐

伴随着智能手机的不断发展,手机不单单只是承担着联系的作用,凭借着小巧、出色拍摄体验等,成为了绝大部分朋友记录生活的绝佳选择,例如录制VLog、短视频等等。不过录制视频必然需要考虑到收音问题,因为在实际录制过程中…

Java面试八股之什么是消息队列的高并发缓冲

什么是消息队列的高并发缓冲 消息队列的高并发缓冲是指在处理大量并发请求时,通过消息队列来平滑处理请求的一种机制。这种机制可以帮助系统在高并发场景下保持稳定性和性能。 高并发缓冲的核心思想: 解耦: 消息队列作为一个中间层&#…

树莓派5 笔记26:ollama大型语言模型_中文输入法_Python_espeak文字转语音

今日继续学习树莓派5 8G:(Raspberry Pi,简称RPi或RasPi) 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 与 python 版本如下: 下载大语言模型,下载中文输入法&#…

HTML+CSS+JS实现商城首页[web课设代码+模块说明+效果图]

系列文章目录 1.Web前端大作业htmlcss静态页面–掌****有限公司 2.Web前端大作业起点小说静态页面 3.Web前端大作业网易云页面 4.Web前端大作业商城页面 5.Web前端大作业游戏官网页面 6.Web前端大作业网上商城页面 7.HTMLCSS淘宝首页[web课设代码模块说明效果图] 8.HTMLCSSJS实…

Linux | 深入探究Linux进程控制:从fork函数到进程等待再到进程替换

目录 1、进程的创建:fork函数 2、父子进程的奇怪现象:为什么同一个地址有不同的值?——区分内存的虚拟地址和物理地址 代码:利用fork函数的返回值进行父子进程分流,执行不同的代码块 虚拟地址和物理地址&#xff1…

selenium学习记录

1、初识selenium 概述: Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动操作,不同是Selenium 可以直接运行在浏览器上,它支持所有…

【java】RuoYiBootstrap多模块版本-登陆请求流程解析

登陆请求流程逻辑图 Created with Raphal 2.3.0 (1)登陆流程解析 (2)【接下来所有业务都受ShiroConfig配置所过滤】 模块:ruoyi-framework 位置:src/main/java 包名:com.ruoyi.framework.config…