javascript-es6 (一)

news2025/3/4 3:58:46

作用域(scope)

规定了变量能够被访问的“范围”,离开了这个“范围”变量便不能被访问

局部作用域

函数作用域:
在函数内部声明的变量只能在函数内部被访问,外部无法直接访问
function getSum(){
//函数内部是函数作用域 属于局部变量
const num = 10
}
console.log(num) //此处报错 函数外部不能使用局部作用域变量
总结:
1. 函数内部声明的变量,在函数外部无法被访问
2. 函数的参数也是函数内部的局部变量
3. 不同函数内部声明的变量无法互相访问
4. 函数执行完毕后,函数内部的变量实际被清空了
块作用域:
在 JavaScript 中 使用 { } 包裹的 代码称为代码块,代码块内部声明的变量外部将【 有可能 】无法被访问
for(let i = 1; i <= 6; i++){
    //i 只能在代码块中被访问
    console.log(i)  //正常
}
//超出了i 的作用域
console.log(i)  //报错
总结: 
1. let  const 声明的变量会产生块作用域,var 不会产生块作用域
2. 不同代码块之间的变量无法互相访问
3. 推荐使用 let 或 const

全局作用域

<script> 标签 .js 文件 的【最外层】就是所谓的全局作用域,在此声明的变量在函数内部也可以被访问。
全局作用域中声明的变量,任何其它作用域都可以被访问
<script>
//全局作用域
const num = 10
function fn(){
//函数内部可以使用全局作用域的变量
consoLe.log(num)  //10
}
</script>
注意:
1. 为 window 对象动态添加的属性默认也是全局的,不推荐!
2. 函数中未使用任何关键字声明的变量为全局变量,不推荐!
3. 尽可能少的声明全局变量,防止全局变量被污染

作用域链

<script>
    //全局作用域
    let a = 1
    let b = 2
    //局部作用域
    function f() {
      let a = 1
      // 局部作用域
      function g() {
        a = 2
        console.log(a)
      }
      g()
    }
    f()
  </script>
作用域链本质上是底层的 变量查找机制
在函数被执行时,会 优先查找当前 函数作用域中查找变量
如果当前作用域查找不到则会依次 逐级查找父级作用域 直到全局作用域
总结:
1. 嵌套关系的作用域串联起来形成了作用域链
2. 相同作用域链中按着从小到大的规则查找变量
3. 子作用域能够访问父作用域,父级作用域无法访问子级作用域

JS垃圾回收制(GC)

JS中内存的分配和回收都是自动完成的,内存在不使用的时候会被垃圾回收器自动回收
内存泄漏: 不再用到的内存,没有及时释放
内存的生命周期
1. 内存分配:当我们声明变量、函数、对象的时候,系统会自动为他们分配内存
2. 内存使用:即读写内存,也就是使用变量、函数等
3. 内存回收:使用完毕,由垃圾回收自动回收不再使用的内存
4. 说明:
全局变量一般不会回收(关闭页面回收);
一般情况下局部变量的值, 不用了, 会被自动回收掉
//为变量分配内存
const age = 18
//为对象分配内存
const obj = { 
    age:19
}
//为函数分配内存
function fn() {
    const age = 18
    console.log(age)
}

堆栈空间分配区别:
1. 栈(操作系统): 由 操作系统自动分配释放 函数的参数值、局部变量等,基本数据类型放到栈里面
2. 堆(操作系统): 一般由程序员分配释放,若程序员不释放,由 垃圾回收机制 回收。 复杂数据类型 放到堆里面
引用计数(不再使用)
IE采用的引用计数算法, 定义“ 内存不再使用 ”,就是看一个 对象 是否有指向它的引用,没有引用了就回收对象
算法:
1. 跟踪记录被 引用的次数
2. 如果被引用了一次,那么就记录次数1,多次引用会 累加 ++
3. 如果减少一个引用就 减1 --
4. 如果引用次数是 0 ,则释放内存
嵌套引用 (循环引用)
如果两个对象 相互引用 ,尽管他们已不再使用,垃圾回收器不会进行回收,导致内存泄露
标记清除法
现代的浏览器已经不再使用引用计数算法了
现代浏览器通用的大多是基于 标记清除算法 的某些改进算法,总体思想都是一致的
核心:
1. 标记清除算法将“不再使用的对象”定义为“ 无法达到的对象 ”。
2. 就是从 根部 (在JS中就是全局对象)出发定时扫描内存中的对象。 凡是能从 根部到达 的对象,都是还 需要使用 的。
3. 那些 无法 由根部出发触及到的 对象被标记 为不再使用,稍后进行 回收

闭包

概念:一个函数对周围状态的引用捆绑在一起,内层函数中访问到其外层函数的作用域
简单理解: 闭包 =  内层函数 + 外层函数的变量
function outer() {
//外层函数的变量
    const a = 1

//内层函数
function f() {
    console.log(a)
}
f()
}
outer()

可以通过控制台打断点,查看是否存在闭包

闭包作用: 封闭数据,提供操作,外部也可以访问函数内部的变量
闭包的基本格式:
//简约写法
function outer() {
    let i = 1
    return function() {
    console.log(i)
 }
}
const fun = outer()
fun()
//外层函数使用内层函数的变量
闭包应用: 实现数据的私有
比如,我们要做个统计函数调用次数,函数调用一次,就++
function fn() {
    let count = 1
    function fun() {
    count++
    console.log(`函数被调用${count}次`)
}
return fun
}
const result = fn()
result() //2
result() //3
闭包很有用,因为它允许将函数与其所操作的某些数据(环境)关联起来,但
闭包可能引起 内存泄漏 等问题

变量提升

变量提升是 JavaScript 中比较“奇怪”的现象,它允许在变量声明之前即被访问(仅存在于var声明变量
注意:
1. 变量在未声明即被访问时会报语法错误
2. 变量在var声明之前即被访问,变量的值为 undefined
3. let/const 声明的变量不存在变量提升
4. 变量提升出现在相同作用域当中
5. 实际开发中推荐先声明再访问变量

变量提升是什么流程?
  1.  先把var 变量提升到当前作用域于最前面
  2.  只提升变量声明, 不提升变量赋值
  3.  然后依次执行代码

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

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

相关文章

jenkins-k8s pod方式动态生成slave节点

一. 简述&#xff1a; 使用 Jenkins 和 Kubernetes (k8s) 动态生成 Slave 节点是一种高效且灵活的方式来管理 CI/CD 流水线。通过这种方式&#xff0c;Jenkins 可以根据需要在 Kubernetes 集群中创建和销毁 Pod 来执行任务&#xff0c;从而充分利用集群资源并实现更好的隔离性…

【云安全】云原生-K8S-简介

K8S简介 Kubernetes&#xff08;简称K8S&#xff09;是一种开源的容器编排平台&#xff0c;用于管理容器化应用的部署、扩展和运维。它由Google于2014年开源并交给CNCF&#xff08;Cloud Native Computing Foundation&#xff09;维护。K8S通过提供自动化、灵活的功能&#xf…

aws(学习笔记第二十六课) 使用AWS Elastic Beanstalk

aws(学习笔记第二十六课) 使用aws Elastic Beanstalk 学习内容&#xff1a; AWS Elastic Beanstalk整体架构AWS Elastic Beanstalk的hands onAWS Elastic Beanstalk部署node.js程序包练习使用AWS Elastic Beanstalk的ebcli 1. AWS Elastic Beanstalk整体架构 官方的guide AWS…

反向代理模块。。

1 概念 1.1 反向代理概念 反向代理是指以代理服务器来接收客户端的请求&#xff0c;然后将请求转发给内部网络上的服务器&#xff0c;将从服务器上得到的结果返回给客户端&#xff0c;此时代理服务器对外表现为一个反向代理服务器。 对于客户端来说&#xff0c;反向代理就相当于…

C语言的灵魂——指针(1)

指针是C语言的灵魂&#xff0c;有了指针C语言才能完成一些复杂的程序&#xff1b;没了指针就相当于C语言最精髓的部分被去掉了&#xff0c;可见指针是多么重要。废话不多讲我们直接开始。 指针 一&#xff0c;内存和地址二&#xff0c;编址三&#xff0c;指针变量和地址1&#…

14-6-2C++STL的list

(一&#xff09;list对象的带参数构造 1.list&#xff08;elem);//构造函数将n个elem拷贝给本身 #include <iostream> #include <list> using namespace std; int main() { list<int> lst(3,7); list<int>::iterator it; for(itlst.begi…

Ubuntu Server 安装 XFCE4桌面

Ubuntu Server没有桌面环境&#xff0c;一些软件有桌面环境使用起来才更加方便&#xff0c;所以我尝试安装桌面环境。常用的桌面环境有&#xff1a;GNOME、KDE Plasma、XFCE4等。这里我选择安装XFCE4桌面环境&#xff0c;主要因为它是一个极轻量级的桌面环境&#xff0c;适合内…

一个简单的自适应html5导航模板

一个简单的 HTML 导航模板示例&#xff0c;它包含基本的导航栏结构&#xff0c;同时使用了 CSS 进行样式美化&#xff0c;让导航栏看起来更美观。另外&#xff0c;还添加了一些 JavaScript 代码&#xff0c;用于在移动端实现导航菜单的展开和收起功能。 PHP <!DOCTYPE htm…

实现B-树

一、概述 1.历史 B树&#xff08;B-Tree&#xff09;结构是一种高效存储和查询数据的方法&#xff0c;它的历史可以追溯到1970年代早期。B树的发明人Rudolf Bayer和Edward M. McCreight分别发表了一篇论文介绍了B树。这篇论文是1972年发表于《ACM Transactions on Database S…

无人机微波图像传输数据链技术详解

无人机微波图像传输数据链技术是无人机通信系统中的关键组成部分&#xff0c;它确保了无人机与地面站之间高效、可靠的图像数据传输。以下是对该技术的详细解析&#xff1a; 一、技术原理 无人机微波图像传输数据链主要基于微波通信技术实现。在数据链路中&#xff0c;图像数…

macos的图标过大,这是因为有自己的设计规范

苹果官方链接&#xff1a;App 图标 | Apple Developer Documentation 这个在官方文档里有说明&#xff0c;并且提供了sketch 和 ps 的模板。 figma还提供了模板&#xff1a; Figma

微信阅读网站小程序的设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

美国公司有意收购TikTok(抖音)

众所周知&#xff0c;2016年TikTok由字节跳动集团推出&#xff0c;最初以“抖音”为名在中国市场推广&#xff0c;随后于2017年下半年出海&#xff0c;面向国际市场更名为“TikTok”。 新华社1月19日快讯&#xff1a;“TikTok公司当地时间18日晚通知美国用户&#xff0c;由于美…

《Java程序设计》课程考核试卷

一、单项选择题&#xff08;本大题共10个小题&#xff0c;每小题2分&#xff0c;共20分&#xff09; 1.下列用来编译Java源文件为字节码文件的工具是&#xff08; &#xff09;。 A.java B.javadoc C.jar D.javac 2…

ThinkPHP 8 操作JSON数据

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用VS Code开发ThinkPHP项目-CSDN博客 编程与应用开…

Windows 环境下 Docker Desktop + Kubernetes 部署项目指南

Windows 环境下 Docker Desktop Kubernetes 部署项目指南 一、环境准备二、安装与配置 Kubernetes安装 windows 版的 docker启动 kubernetes安装 windows 版的 kubectl 工具下载 k8s-for-docker-desktop启动 Kubernetes Dashboard 二、在 Kubernetes 上部署项目创建一个 demo …

WebSocket 详解:全双工通信的实现与应用

目录 一、什么是 WebSocket&#xff1f;&#xff08;简介&#xff09; 二、为什么需要 WebSocket&#xff1f; 三、HTTP 与 WebSocket 的区别 WebSocket 的劣势 WebSocket 的常见应用场景 WebSocket 握手过程 WebSocket 事件处理和生命周期 一、什么是 WebSocket&#xf…

神经网络|(二)sigmoid神经元函数

【1】引言 在前序学习进程中&#xff0c;我们已经了解了基本的二元分类器和神经元的构成&#xff0c;文章学习链接为&#xff1a; 神经网络|(一)加权平均法&#xff0c;感知机和神经元-CSDN博客 在此基础上&#xff0c;我们认识到神经元本身在做二元分类&#xff0c;是一种非…

云原生:构建现代化应用的基石

一、什么是云原生&#xff1f; 云原生是一种构建和运行应用程序的方法&#xff0c;旨在充分利用云计算的分布式系统优势&#xff0c;例如弹性伸缩、微服务架构、容器化技术等。云原生应用程序从设计之初就考虑到了云环境的特点&#xff0c;能够更好地适应云平台的动态变化&…

【浏览器 - Chrome调试模式,如何输出浏览器中的更多信息】

在开发过程中&#xff0c;如果不主动console.log&#xff0c;浏览器中的信息有些不会主动输出到 控制台console里面。这个如果是一些浏览器内部的接口调试&#xff0c;则会很麻烦。比如RTCPeerConnection过程 &#xff0c;RTCPeerConnection属于浏览器内部的方法&#xff0c;其…