当前位置：首页 > 编程日记 > 正文

javascript的变量存储机制和原理

编程日记 2024-01-16 00:41:12

前言

在了解javascript的变量存储机制之前需要了解javascript的数据类型，在js中，数据类型分为基本数据类型和引用数据类型。二者存在内存中，基本类型存在栈中，引用类型存储在堆里。

javascript内存生命周期分为三个周期：内存分配（分配所需要的暂时使用的内存大小） ——> 使用期（读、写内存）——> 回收（对于不需要使用的内存将其释放）

var num = 1  // 内存分配
alert(num) // 内存使用
num = null // 内存回收

1. 栈、堆内存

JS的内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。其中栈存放变量，堆存放复杂对象，池存放常量，所以也叫常量池。

1. 栈

在js中，栈中存放基本数据类型，并且具有按值访问，存储值大小固定，系统自动分配内存空间，空间小，运行效率高，先进后出等特点。

2. 堆

堆是一种经过排序的树形数据结构，每个结点都有一个值。通常我们所说的堆的数据结构，是指二叉堆。在js中，堆中存放引用数据类型，具有按引用访问，存储值大小不固定，由代码指定分配内存空间，空间大，运行效率相对低，无需存储（因为根据引用获取）等特点。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。在获取引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

引用类型的复制

let m = { a: 10, b: 20 };
let n = m;
n.a = 15;
console.log(m.a) // 15

m、n都是引用类型，栈内存中存放地址指向堆内存中的对象，引用类型的复制会为新的变量自动分配一个新的值保存在变量中，但只是引用类型的一个地址指针而已，实际指向的是同一个对象，所以修改 n.a 的值后，相应的 m.a 也就发生了改变。
![(https://img-blog.csdnimg.cn/direct/a48c21591e3a43e6840b055ddd8af992.jpeg)
2. 闭包
闭包是指有权访问另一个函数作用域中变量的函数，函数外面的作用域可以访问函数内部的局部变量。

function fn() {
	var num = 10；
	function fun() {
		conosle.log(num)
	}
	return fun;
}

var f = fn();
f(); // 相当于调用fun()，而fun() 可以访问fn内部的局部变量num。由此形成闭包，实现在函数外部访问内部局部变量。

闭包中的变量并不保存中栈内存中，而是保存在堆内存中。可以避免使用全局变量,防止全局变量污染。但是可能会造成内存泄漏或溢出。

2. 垃圾回收

垃圾回收方面，栈内存变量基本上用完就回收了，而推内存中的变量因为存在很多不确定的引用，只有当所有调用的变量全部销毁之后才能回收。
垃圾回收机制有两种：1.标记清除， 2.引用计数

1.标记清除：js会对变量做一个标记yes or no的标签以供js引擎来处理，当变量在某个环境下被使用则标记为yes，当超出改环境（可以理解为超出作用域）则标记为no，然后对有no的标签进行释放。

2.引用计数：对于js中引用类型的变量, 采用引用计数的内存回收机制,当一个引用类型的变量赋值给另一个变量时, 引用计数会+1, 而当其中有一个变量不再等于值时,引用计数会-1, 如果引用计数为0, 则js引擎会将其释放掉。

javascript变量存储

https://www.dkcj.cn/info/721.html

使用JavaScript实现复杂功能：一个完整的电商网站搜索功能

随着互联网的发展，电子商务网站已经成为人们购物的重要平台。而在这些网站中，搜索功能无疑是核心功能之一。用户可以通过搜索快速找到他们需要的商品，从而提高购物体验。本文将详细介绍如何使用JavaScript实现一个完整的电商网站搜索功能。

编程日记2024/01/27 08:54:23

JavaScript DOM之Cookie详解

随着互联网的不断发展各种基于互联网的服务系统逐渐多了起来，我们常常需要记录访问者的一些信息，比如用户的账号，购物车存储的商品等，就需要用到cookie技术。cookie最早是网景公司发明的，是一种跟踪用户会话的技术。可以理解为本地缓存，它由服务器生成，保存在用户本地浏览器上的小文本文件，它可以包含与用户相关的信息。

编程日记2024/01/25 21:52:10

说说你对 TypeScript 的理解？与 JavaScript 的区别？

超集，不得不说另外一个概念，子集，怎么理解这两个呢，举个例子，如果一个集合 A 里面的的所有元素集合 B 里面都存在，那么我们可以理解集合 B 是集合 A 的超集，集合 A 为集合 B 的子集。其是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误。通过类型批注提供在编译时启动类型检查的静态类型，这是可选的，而且可以忽略而使用。如果缺乏声明而不能推断出类型，那么它的类型被视作默认的动态。等数据格式，对象的类型就是用接口来描述的。的语法，所以任何现有的。对于基本类型的批注是。

编程日记2024/01/24 10:38:58

elementPlust 的el-select在提示框关闭时自动弹出

主要问题就是因为filterable属性，根本解决方案是选中的时候让他失去焦点 el-select有一个visible-change事件，下拉框出现/隐藏时触发。当el-select添加filterable属性时，弹提示窗时，点击确定后，下拉框会自动弹出。console.log('弹窗出select', item)增加了visible-change事件。el-select事件最后增加焦点取消。

编程日记2024/01/22 16:06:44

在react中说说对受控组件和非受控组件的理解？以及应用场景

这时候当我们在输入框输入内容时，会发现输入的内容无法显示出来，此时input标签是一个可读的状态，因为value被this.state.username所控制，当用户输入时，this.state.username不会自动更新，这样的话input的内容就不会发生变化了，想要解除被控制，可以为input标签设置onChange事件，触发的时候更新state，从而导致input框内容更新。简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据。

编程日记2024/01/22 09:38:31

vue3 项目中 arguments 对象获取失败问题

在 vue3 项目中获取到的 arguments 对象与传入实参不符，打印出函数中的 arguments 对象如下...

编程日记2024/01/20 13:01:48

前端JS代码中Object类型数据的相关知识

遍历JavaScript中的对象有几种方法，包括使用for…in循环、Object.keys()方法、Object.values()方法和Object.entries()方法。因此前端传入了日期类型数据之后，如果和后台数据库中的数据类型不一致，比如数据库中的日期数据类型格式是。前端传入的Object对象中其中某个字段值是日期类型的数据，则在前端的类型就是一个。，则数据传往后端之前需要做格式类型转换。，它的值是一个中国标准时间，比如。

编程日记2024/01/19 23:04:05

深入解析JavaScript的原生原型

在JavaScript中,除了自定义对象,还存在很多由JavaScript语言本身提供的原生对象。这些原生对象同样基于原型继承机制,拥有自己的原型。理解原生对象的原型非常重要,可以让我们正确使用这些内置对象,也有助于进一步理解JavaScript的原型继承系统。本文将详细解析原生对象的原型结构,揭开一些常见原生对象原型的神秘面纱。学习原生对象的原型关系,有助于我们在日常开发中正确理解和使用这些JavaScript内置对象,避免一些常见陷阱。

编程日记2024/01/18 16:23:59

深入三目运算符：JavaScript、C++ 和 Python 比较

三目运算符是编程中常用的条件表达式，它允许我们根据条件选择不同的值。我们将通过具体的例子分别介绍 JavaScript、C++ 和 Python 中的三目运算符，以便更好地理解它们的用法和特性。JavaScript 示例// 例子: 根据条件选择不同的值var x = 10;var y = 20;"x 大于 y" : "x 不大于 y";在这个例子中，如果x大于y，则result的值为 “x 大于 y”，否则为 “x 不大于 y”。C++ 示例// 例子: 根据条件选择不同的值。

编程日记2024/01/18 13:21:33

深入解析JavaScript中new Function语法

Function是JavaScript中非常重要的内置构造函数,可以用来动态创建函数。new Function语法就是其中一种函数创建方式。但是new Function也有一定的缺点需要注意。本文将带您深入解析new Function语法,了解其应用场景以及需要注意的问题。new Function是动态创建函数的一种方式,但也有缺点。为了更好的代码质量和性能,应该慎用或避免使用。对JavaScript函数和作用域有深入理解,可以编写出更简洁、高效、稳定的代码。。

编程日记2024/01/16 16:31:44

将 RGB 转换为十六进制、生成随机十六进制

RGB是一种加法混色模式，它通过调节红、绿、蓝三个颜色通道的亮度来混合出各种颜色。对于每个颜色通道，取值范围是0到255，0表示该通道对应的颜色分量没有亮度，255表示达到最大亮度。

编程日记2024/01/15 09:48:26

nodemon（自动重启 node 应用程序）的安装与使用

(2).键入命令 set-ExecutionPolicy remoteSigned。windows 默认不允许 npm 全局命令执行脚本文件，所以需要修改执行策略。全局安装完成之后就可以在命令行的任何位置运行 nodemon 命令。(4)、再运行 nodemon app.js ok。我们可以执行安装选项 -g 进行全局安装。1、安装，在随意一个命令窗口都可以。自动重启 node 应用程序。(3)、输入Y 或者 A。

编程日记2024/01/15 01:56:02

TypeScript基础知识：类型断言

语法，我们可以将一个值断言为特定类型或将联合类型的变量断言为其中一个类型。在实际开发中，合理使用类型断言可以提高代码的可读性和维护性。中，类型断言是一种强制将一个值视为特定类型的方式。它允许开发人员在编译时指定变量的类型，从而获得更好的类型检查和代码提示。类型断言是一种告诉编译器某个值的具体类型的方法。中的一项强大特性，它允许开发人员在编译时明确指定变量的类型，以获得更好的类型检查和代码提示。中的类型断言，并提供丰富的示例代码帮助读者更好地理解和应用这一特性。将一个联合类型的变量断言为其中一个类型。

编程日记2024/01/10 18:00:13

Vue学习计划-Vue3--核心语法（七）pinia

gitee。

编程日记2024/01/10 10:11:53

2024年，前端必会的console骚操作

调试。程序员们努力地避免的东西,只为在代码中制造更多的错误。编写无错误的代码是即使是最好的程序员也会觉得难以实现的。这就是为什么你应该总是调试代码。而调试JavaScript代码的最好方法之一就是了不起的。除此之外,还有更好的方法。这也正是本文的重点。告诉你与控制台交互的更好方法。在复杂的IDE中输入控制台会出现各种自动补全。在Visual Studio Code中输入console时的自动补全选项。与使用普通的不同,这里有一些更好的选择。使用这些使调试过程变得更加容易和快速。

编程日记2024/01/09 23:13:42

JavaScript中内置对象--数学对象

1、数学对象Math 2、日期对象new Date() 3、数组对象new Array 4、字符串对象new String()1、自定义对象（computer/car） 2、DOM对象（div/p） 3、BOM对象（window/console） 4、内置对象。

编程日记2024/01/08 17:36:56

html 原生网页使用ElementPlus 日期控件el-date-picker换成中文

原生的html,加jQuery使用不习惯，新html页面导入vue3,element plus做界面，现在需要把日历上英文切成中文。elementplus, vue3对应的js都可以通过创建一个vue3项目找到对应的脚本导入）然后在node_modules对应目录的文件，把它拷贝到html项目即可。

编程日记2024/01/07 16:02:39

学习调整echarts中toolbox位置toolBox工具栏属性

编程日记2024/01/07 09:50:52

了解JavaScript中的基本类型值和引用类型值

/创建空对象并将其引用赋给变量avar b={};//创建空对象并将其引用赋给变量bvar c=[];//创建空数组并将其引用赋给变量c以上示例中，变量a和变量b都是指向了一个空对象，如果new Object()不传参数的话，那么用new Object()和{}来创建对象的效果是相同的。但是如果传入不同的参数，会有不同的效果。传入String 返回String，类似new String()传入Number 返回Number，类似new Number()

编程日记2024/01/04 17:54:41

vue3解决切换tab页每次切换加载数据导致数据缓慢问题

使用标识符来进行辨认有两个tab页搞个动态加载在开头的vedioload还没开始加载的时候判断是否加载过入股已经加载过则返回不要重新加载。由标签页的离线和在线数据都分开管理使用两个列表：即一个数组两个对象进行存储数组的下标有tab0 tab1 动态决定代替原来的直接覆盖数据。loadvideos会根据loadedTabs的状态决定是否需要加载数据。

编程日记2024/01/04 10:11:23

vue写了这么久了你对slot的理解是什么？slot使用场景有哪些？

如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情。在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中。子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件。插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用。父组件在使用的时候，直接在子组件的标签内写入内容即可。结构，当父组件使用的时候没有往插槽传入内容，标签内。第三个参数，父组件则能够得到子组件传递过来的值。

编程日记2024/01/01 23:44:32