javascript-es6 (一)

作用域(scope)

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

局部作用域

函数作用域:
在函数内部声明的变量只能在函数内部被访问,外部无法直接访问

javascript 复制代码
function getSum(){
//函数内部是函数作用域 属于局部变量
const num = 10
}
console.log(num) //此处报错 函数外部不能使用局部作用域变量

总结:

  1. 函数内部声明的变量,在函数外部无法被访问
  2. 函数的参数也是函数内部的局部变量
  3. 不同函数内部声明的变量无法互相访问
  4. 函数执行完毕后,函数内部的变量实际被清空了
    块作用域:
    在 JavaScript 中 使用 { } 包裹的 代码称为代码块,代码块内部声明的变量外部将【 有可能 】无法被访问
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 文件 的【最外层】就是所谓的全局作用域,在此声明的变量在函数内部也可以被访问。
全局作用域中声明的变量,任何其它作用域都可以被访问

javascript 复制代码
<script>
//全局作用域
const num = 10
function fn(){
//函数内部可以使用全局作用域的变量
consoLe.log(num)  //10
}
</script>

注意:

  1. 为 window 对象动态添加的属性默认也是全局的,不推荐!
  2. 函数中未使用任何关键字声明的变量为全局变量,不推荐!
  3. 尽可能少的声明全局变量,防止全局变量被污染

作用域链

javascript 复制代码
<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. 说明:
    全局变量一般不会回收(关闭页面回收);
    一般情况下局部变量的值, 不用了, 会被自动回收掉
javascript 复制代码
//为变量分配内存
const age = 18
//为对象分配内存
const obj = { 
    age:19
}
//为函数分配内存
function fn() {
    const age = 18
    console.log(age)
}

堆栈空间分配区别:

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

闭包

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

javascript 复制代码
function outer() {
//外层函数的变量
    const a = 1

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

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

闭包作用: 封闭数据,提供操作,外部也可以访问函数内部的变量
闭包的基本格式:

javascript 复制代码
//简约写法
function outer() {
    let i = 1
    return function() {
    console.log(i)
 }
}
const fun = outer()
fun()
//外层函数使用内层函数的变量

闭包应用: 实现数据的私有
比如,我们要做个统计函数调用次数,函数调用一次,就++

javascript 复制代码
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. 然后依次执行代码
相关推荐
╰つ゛木槿3 分钟前
深入探索 Vue 3 Markdown 编辑器:高级功能与实现
前端·vue.js·编辑器
yqcoder22 分钟前
Commander 一款命令行自定义命令依赖
前端·javascript·arcgis·node.js
前端Hardy38 分钟前
HTML&CSS :下雪了
前端·javascript·css·html·交互
stevewongbuaa41 分钟前
一些烦人的go设置 goland
开发语言·后端·golang
醉の虾1 小时前
VUE3 使用路由守卫函数实现类型服务器端中间件效果
前端·vue.js·中间件
撸码到无法自拔1 小时前
MATLAB中处理大数据的技巧与方法
大数据·开发语言·matlab
Jackilina_Stone1 小时前
【论文阅读笔记】“万字”关于深度学习的图像和视频阴影检测、去除和生成的综述笔记 | 2024.9.3
论文阅读·人工智能·笔记·深度学习·ai
island13141 小时前
【QT】 控件 -- 显示类
开发语言·数据库·qt
sysu632 小时前
95.不同的二叉搜索树Ⅱ python
开发语言·数据结构·python·算法·leetcode·面试·深度优先
码上飞扬2 小时前
Vue 3 30天精进之旅:Day 05 - 事件处理
前端·javascript·vue.js