首页 > 其他分享 >js的闭包原理——通过引擎的堆栈解析

js的闭包原理——通过引擎的堆栈解析

时间:2024-05-25 15:55:40浏览次数:29  
标签:闭包 函数 counter js getValue increment 堆栈 解析 createCounter

有段代码如下:

function createCounter(){
    let i=0;
    function increment(){
        i++;
    }  
 
    function getValue(){
        return i; 
    }
    return {increment,getValue}
}

const counter = createCounter();

在这段代码中,运用了函数的3个特点:

  • 在函数内部生成了一个局部的变量 i;

  • 嵌入了 increment 和 getValue 这两个函数方法;

  • 把函数作为返回值用 return 来返回

当执行完createCounter函数后,按道理相关变量 i 应该被销毁了,并完成相关的垃圾回收。但是我们仍然可以访问它内部的变量 i,并可以继续调用 increment 和 getValue 方法。当我们尝试增加 i 的值的时候,会看到返回不断增加的结果。

counter.increment(); 
counter.getValue(); // 返回1
counter.increment();
counter.getValue(); // 返回2

 

原理解析如下,当 JavaScript 引擎解析函数的时候,用的是延迟解析,而不是及时解析。这样做的目的是减少解析时间和减少内存使用。所以在语法解析的时候,只会解析到 createCounter 函数这一层,而不会继续解析嵌入的 increment 和 getValue 函数。

但是引擎同时又有一个预解析的功能,可以看到 increment 和 getValue 会引用一个外部的变量 i,所以会把这个变量从栈移到堆中,就用了更长的记忆来记录 i 的值

有一点要注意的是,考虑到性能、内存和执行速度,当使用闭包的时候,我们就要注意尽量使用本地而不要用全局变量

标签:闭包,函数,counter,js,getValue,increment,堆栈,解析,createCounter
From: https://www.cnblogs.com/longzhongren/p/18212519

相关文章

  • Nodejs安装及配置,包含Windows和Linux两种平台
    目录1.下载安装包2.Windows下安装3.Linux下安装4.使用Vite创建Vue项目5.结语Node.js是前端开发的必备工具,特别是在使用Vue或React开发项目时,需要npm安装依赖、运行开发环境以及项目打包,这里就分别介绍一下在Windows和Linux平台如何安装Nodejs。文章结尾,笔者还会......
  • 【计算机毕业设计】基于SSM++jsp的实验室耗材管理系统【源码+lw+部署文档】
             目录第1章绪论1.1课题背景1.2课题意义1.3研究内容第2章开发环境与技术2.1MYSQL数据库2.2JSP技术 2.3SSM框架第3章系统分析3.1可行性分析3.1.1技术可行性3.1.2经济可行性3.1.3操作可行性3.2系统流程3.2.1操作流程3.2.2......
  • Nodejs的ORM--Sequelize-一万六千字-详细教程
    本文来介绍Sequelize,一个基于Node.js的ORM(对象关系映射)工具,并详细介绍其用法。Sequelize用于在应用中使用JavaScript来操作关系型数据库,例如MySQL、PostgreSQL等。本文内容较多,可作为Sequelize的参考手册来阅读。开始使用核心概念Sequelize是一个基于JavaSc......
  • js控制专辑图片旋转效果
    需求需要通过按钮控制专辑图片的旋转和停止思路旋转:调用方法利用定时器控制每20ms将图片的角度旋转1°停止:调用方法清除定时器代码<html><head><title>图片轮转</title><script>window.onload=function(){varimg=document.getElem......
  • 什么是JS引擎
    JS引擎(JavaScript引擎)是负责在浏览器或Node.js等环境中解析和执行JavaScript代码的软件组件。它是JavaScript运行时的核心,将JavaScript代码转换为机器语言,使其能够在计算机上执行。不同的浏览器和运行环境使用不同的JS引擎。以下是一些著名的JS引擎:V8:Google的Chrome浏览器和N......
  • 前端服务端React(Next.js)、Vue(Nuxt.js)、Angular(Universal)渲染搭建和开发案例
    前端服务端渲染(Server-SideRendering,简称SSR)是一种Web开发技术,它允许服务器动态生成HTML内容,然后将其发送到客户端,客户端再将这些HTML内容渲染成页面。这种方式可以提高首屏加载速度,改善SEO,以及提供更好的用户体验。前端服务端渲染搭建步骤:选择框架:选择支持服务端渲染......
  • 前端 用账号密码登录的时候 对密码进行加密 【最佳解决方案】用bcrypt.js 或者 crypto
    1、在后台管理的项目中或者其他项目用到账号密码登录的功能,我们需要对密码进行一个密码的操作 2、我们可以使用第三方的库去实现登录密码加密的功能有两个JS库 bcrypt.js或者crypto-js3、方案一使用了bcrypt.js库对密码进行加密。首先,生成一个salt,它是一个随......
  • aws jsii 基于js 实现跨语言交互的编译器
    jsiiaws开源的,让我们可以基于js实现跨语言交互的编译器,我们可以基于ts开发功能,然后通过编译器jsii可以实现其他语言的通信,目前支持C#,golang,java,pythonruntime参考架构如下图说明从架构上我们可以看出jsii的通信是基于了标准输入输出的处理,实际内部处理后边研究下参考资......
  • JS核心语法【流程控制语句、函数】;DOM【查找元素、操作元素、事件】--学习JavaEE的day
    day48JS核心技术JS核心语法继day47注意:用到控制台输出、弹窗流程控制语句Ifelse、For、For-in(遍历数组时,跟Java是否一样【java没有】)、While、Dowhile、break、continue案例:1.求1-100之间的偶数之和<!DOCTYPEhtml><html> <head> <metacharset="UTF......
  • Node.js —— 前后端的身份认证 之用 express 实现 JWT 身份认证
    JWT的认识什么是JWT        JWT(英文全称:JSONWebToken)是目前最流行的跨域认证解决方案。JWT的工作原理        总结:用户的信息通过Token字符串的形式,保存在客户端浏览器中。服务器通过还原Token字符串的形式来认证用户的身份。  JWT的组成部分......