当前位置：首页 > news >正文

【每日阅读】JS知识（三）

news 2026/3/28 7:28:35

var声明提升

js是一个解释性语言类型，预解析就是在执行代码之前对代码进行通读
var关键字是，在内存中声明一个变量名 js在代码执行之前会经历两个环节解释代码和执行代码
声明式函数内存中先声明一个变量名是函数这个名代表的是函数

乘法表

     // for (var i = 1; i < 9; i++) {//   for (var j = 1; j <= i; j++) {//     document.write('*')//   }//   document.write('<br>')// }// console.log(myname)// var myname = 'kerwin'// console.log(myname)//var结果有声明提升 undefined kerwin

作用域

就是一个变量可以生效的范围
变量不是所有地方都可以使用，而且这个变量的使用范围就是作用域
全局作用域
全局是最大的作用域，在全局中定义变量可以用在任何地方
页面打开时，浏览器会自动生成一个全局作用域windows
这个作用域会一直存在直到页面关闭就销毁了

前端存储数据方式

主要存在四种：cookie,localStorage,sessionStorage,indexedDB。

1、cookies：在HTML5标准前本地储存的主要⽅式，优点是兼容性好，请求头⾃带cookie⽅便，缺点是⼤⼩只有4k，⾃动请求头加⼊cookie浪费流量，每个domain限制20个cookie，使⽤起来麻烦需要⾃⾏封装。
2、localStorage：HTML5加⼊的以键值对(Key-Value)为标准的⽅式，优点是操作⽅便，永久性储存（除⾮⼿动删除），⼤⼩为5M，兼容IE8+
3、sessionStorage：与localStorage基本类似，区别是sessionStorage当⻚⾯关闭后会被清理，⽽且与cookie、localStorage不同，他不能在所有同源窗⼝中共享，是会话级别的储存⽅式。
4、IndexedDB：是被正式纳⼊HTML5标准的数据库储存⽅案，

闭包产生原因

根据词法作用域的规则，内部作用域可以访问外部作用域
GC(垃圾回收)机制，如果变量被引用那么GC在回收时并不会回收该变量

function foo() { let test1 = '变量1'const test2 = '变量2'let test3 = '变量3'var innerBar = { getName: function () { console.log(test1) return test2 },} return innerBar } var bar = foo()bar.getName()

在这里插入图片描述
右边 Scope 项就体现出了作用域链的情况：Local 就是当前的 getName 函数的作用域，Closure(foo) 是指 foo 函数的闭包，最下面的 Global 就是指全局作用域，从“Local–>Closure(foo)–>Global”就是一个完整的作用域链。

注意⚠️：只有我们在内部函数中使用的变量才会被加入闭包（Closure）中。

缺陷

如果引用闭包的函数是一个全局变量，那么闭包会一直存在直到页面关闭；但如果这个闭包以后不再使用的话，就会造成内存泄漏。（如果引用闭包的函数是个局部变量，等函数销毁后，在下次 JavaScript 引擎执行垃圾回收时，判断闭包这块内容如果已经不再被使用了，那么 JavaScript 引擎的垃圾回收器就会回收这块内存）

规避：如果该闭包会一直使用，那么它可以作为全局变量而存在；但如果使用频率不高，而且占用内存又比较大的话，那就尽量让它成为一个局部变量。

JavaScript的变量存储机制

可以把堆认为是一个很大的内存存储空间，你可以在里面存储任何类型数据。但是这个空间是私有的，操作系统不会管在里面存储了什么，也不会主动的去清理里面的内容，因此在C语言中需要程序员手动进行内存管理，以免出现内存泄漏，进而影响性能。
但是在一些高级语言如JAVA会有垃圾回收(GC) 的概念,用于协助程序管理内存空间，自动清理堆中不再使用的数据。

栈
栈是内存中一块用于存储局部变量和函数参数的线性结构，遵循着先进后出的原则。数据只能顺序的入栈，顺序的出栈。当然，栈只是内存中一片连续区域一种形式化的描述，数据入栈和出栈的操作仅仅是栈指针在内存地址上的上下移动而已。
在这里插入图片描述
但需要注意的是：内存中栈区的数据，在函数调用结束后，就会自动的出栈，不需要程序进行操作，操作系统会自动回收，也就是：栈中的变量在函数调用结束后，就会消失。这也正是栈的特点：无需手动管理、轻量、函数调时创建，调用结束则消失
在这里插入图片描述
除了局部变量，其他的全都存在堆中。根据变量的数据类型，分为以下两种情况：
如果是基础类型，那栈中存的是数据本身。
如果是对象类型，那栈中存的是堆中对象的引用。

JavaScript的设计模式

工厂模式
构造器模式
原型模式
抽象工厂模式

原型模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>原型模式</title>
</head>
<body><script>
//    function Employee(name,age){
//        this.name = name;
//        this.age = age;
//    }
//    Employee.prototype.say = function(){
//        console.log(this.name,this.age);
//    }class Employee{constructor(name,age){this.name = name;this.age = age;}}</script>
</body>
</html>

构造器模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>构造器模式</title>
</head>
<body><script>var employee1 = {name:'keke',}var employee2 = {name:'keke_2',}function Employee(name,age){this.name = name;this.say =function(){console.log(this.name)}}let employee = new Employee('keke')</script>
</body>
</html>

工厂模式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>function UserFactory(role) {switch(role){case "0":return new User("superadmin");break;default:throw new Error("参数错误")}}</script></body>
</html>

抽象工厂模式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>class User {constructor(name, role, pages) {this.name = name;this.role = role;this.pages = pages;}welcome() {console.log("Welcome");}dataShow() {throw new Error("抽象未实现");}}class SuperAdmin extends User {constructor(name){super(name, "Super Admin",["home"]);}dataShow(){console.log("superadmin");}}</script></body>
</html>

【每日阅读】JS知识（三）

相关文章：

【每日阅读】JS知识（三）

Vue(6)

Neo4j列表函数

55. 跳跃游戏

typedef在c语言中的作用

计算机网络体系结构及分层参考模型

LLVM程序分析与编译转换框架论文分享

《程序员思维修炼》速读笔记

【Hello Linux】进程概念

Bunifu.UI.WinForms 6.0.2 Crack

学习 Python 之 Pygame 开发魂斗罗（五）

LeetCode 104. 二叉树的最大深度

pandas 中如何按行或列的值对数据排序?

「牛客网C」初学者入门训练BC139,BC158

【深度学习】线性回归、逻辑回归、二分类，多分类等基础知识总结

【MySQL】调控字符集

FME+YOLOV7写DNF自动刷图脚本

Java语法面试题

location

简述RBAC模型

低成本工业机器人：开源六轴机械臂从技术原理到生态落地全指南

【学术干货免费领】200+学术海报模板免费领｜科研展示零成本，高效出图不内耗 | 学术会议海报模板，适配国际国内各类学术场合 | 硕博研究生必需，全学科适配，助力科研成果高光出圈

人工智能|大模型 —— 量化 —— 一文搞懂大模型量化技术：GGUF、GPTQ、AWQ

LangGPT：革新自然语言编程的结构化提示词框架

使用AI大大提升了学习代码的效率

如何通过WebGLInput彻底解决Unity WebGL平台的输入法兼容性问题

水库调度员必看：动态规划在月度发电计划中的5个避坑指南

QGIS 3.28 保姆级配置指南：从中文界面到高德底图，手把手搞定智驾地图工作流

3步搞定：如何让VR视频在普通屏幕上完美播放

4个步骤掌握高频交易策略：High-Frequency-Trading-Model-with-IB实战指南