前端学习第60天

JavaScript 进阶

1. 作用域

作用域：变量能够被访问的“范围”，“范围”外变量不能被访问

1.1 局部作用域

局部作用域分为函数作用域和块作用域

1. 函数作用域:

在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。

<script>
  function getSum() {
    const num = 10
  }
  // console.log(num)  //此处错误，无法调用局部作用域
</script>

总结：

1. 函数内部声明的变量，在函数外部无法直接被访问
2. 函数的参数也是函数内部的局部变量
3. 不同函数内部声明的变量无法直接访问
4. 函数执行完毕后，函数内部的变量实际被清空了

2. 块作用域:

​ 在JavaScript中使用{}包裹的代码被称为代码块，代码块内部声明的变量外部将有可能无法被访问

for (let i = 0; i <= 5; i++) {
    //块作用域
  console.log(i);
}
// console.log(i)//此处错误，无法调用局部作用域.超出了i的作用域

总结：

1. let声明的变量会产生块作用域，var不会产生块作用域
2. const声明的常量会产生块作用域
3. 不同代码块之间的变量无法互相访问
4. 推荐使用let或const

1.2 全局作用域

​ <script>标签和.js文件最外层就是全局作用域

​ 全局作用域中声明的变量，任何其他作用域都可以被访问

<script>
  // 全局作用域下声明num变量
  const num = 10
  function fn(){
    // 函数内部可以使用全局作用域的
    console.log(num)
  }
</script>

注意：

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

1.3 作用域链

作用域链本质上是底层的变量查找机制

• 在函数被执行时，会优先查找当前函数作用域中查找变量
• 如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域

<script>
  // 全局作用域
  let a = 1
  let b = 2

  // 局部作用域
  function f() {
    let c
    // let a = 10;
    console.log(a) // 1 或 10
    console.log(d) // 报错
    
    // 局部作用域
    function g() {
      let d = 'yo'
      // let b = 20;
      console.log(b) // 2 或 20
    }
    
    // 调用 g 函数
    g()
  }

  console.log(c) // 报错
  console.log(d) // 报错
  
  f();
</script>

总结：

1. 嵌套关系的作用域串联起来形成了作用域链
2. 相同作用域链中按着从小到大的规则查找变量
3. 子作用域能够访问父作用域，父级作用域无法访问子级作用域

1.4 JS垃圾回收机制（GC）

​ JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收

​ 不在用到 的内存，没有及时释放，叫内存泄漏

声明周期：JS环境中分配的内存，一般生命周期：内存分配——内存使用——内存回收

• 全局变量一般不会回收（关闭页面回收）
• 一般情况下局部变量的值，不用了，会被自动回收掉

常见浏览器回收算法：引用计数法和标记清除法

1.5 闭包

概念：内层函数中可以访问到其外层函数的作用域

闭包 = 内层函数 + 外层函数的变量

function outer() {
    const a = 1
    function f() {
        console.log(a)
    }
    f()
}
outer()