JavaScript 高级（进阶）_javascript高级

JavaScript 高级（进阶）

作用域&解构&箭头函数

作用域

目标：了解作用域对程序执行的影响及作用域链的查找机制，使用闭包函数创建隔离作用域避免全局变量污染。

作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问。
作用域分为：

• 局部作用域
• 全局作用域

局部作用域

局部作用域分为函数作用域和块作用域。局部作用域声明的变量外部不能使用。
1.函数作用域：

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

总结：

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

2.块作用域：

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

JavaScript 中除了变量外还有常量，常量与变量本质的区别是：常量必须要有值且不允许被重新赋值，常量值为对象时其属性和方法允许重新赋值。

<script>
  // 必须要有值
  const version = '1.0.0';

  // 不能重新赋值
  // version = '1.0.1';

  // 常量值为对象类型
  const user = {
   
    name: '小明',
    age: 18
  }

  // 不能重新赋值
  user = {
   };

  // 属性和方法允许被修改
  user.name = '小小明';
  user.gender = '男';
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

总结：

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

注：开发中 let 和 const 经常不加区分的使用，如果担心某个值会不小被修改时，则只能使用 const 声明成常量。

全局作用域

script标签和.js 文件的最外层就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问。全局作用域中声明的变量，任何其它作用域都可以被访问。

注意：

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

全局作用域有哪些？ <script 标签内部和 .js 文件。

<script>
  // 此处是全局
  
  function sayHi() {
   
    // 此处为局部
  }

  // 此处为全局
</script>

1
2
3
4
5
6
7
8
9
10
11

JavaScript 中的作用域是程序被执行时的底层机制，了解这一机制有助于规范代码书写习惯，避免因作用域导致的语法错误。

作用域链

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

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

总结：

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

JS垃圾回收机制

了解JS垃圾回收机制的执行过程。目的： 为了闭包做铺垫。

1. 什么是垃圾回收机制？

垃圾回收机制(Garbage Collection) 简称 GC。

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

如果不了解JS的内存管理机制，非常容易造成内存泄漏（内存无法被回收）的情况。不再用到的内存，没有及时释放，就叫做内存泄漏。

2.内存的生命周期

JS环境中分配的内存, 一般有如下生命周期：

1. 内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存
2. 内存使用：即读写内存，也就是使用变量、函数等
3. 内存回收：使用完毕，由垃圾回收自动回收不再使用的内存

说明： 全局变量一般不会回收(关闭页面回收)；一般情况下局部变量的值, 不用了, 会被自动回收。

总结：

1. 什么是垃圾回收机制？

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

2. 什么是内存泄漏？

• 不再用到的内存，没有及时释放，就叫做内存泄漏

3. 内存的生命周期是什么样的？

• 内存分配、内存使用、内存回收
• 全局变量一般不会回收； 一般情况下局部变量的值, 不用了, 会被自动回收掉

3.垃圾回收算法说明

所谓垃圾回收, 核心思想就是如何判断内存是否已经不再会被使用了, 如果是, 就视为垃圾, 释放掉。

两种常见的浏览器垃圾回收算法: 引用计数法 和 标记清除法。

引用计数：
IE采用的引用计数算法, 定义“内存不再使用”的标准，就是看一个对象是否有指向它的引用。

算法：

1. 跟踪记录每个值被引用的次数。
2. 如果这个值的被引用了一次，那么就记录次数1。
3. 多次引用会累加。
4. 如果减少一个引用就减1。
5. 如果引用次数是0 ，则释放内存。

const person = {
   
age: 18,
name: 'pink老师'
}
const p = person
person = 1
p = null

1
2
3
4
5
6
7
8
9

引用计数算法是个简单有效的算法。但它却存在一个致命的问题：嵌套引用。如果两个对象相互引用，尽管他们已不再使用，垃圾回收器不会进行回收，导致内存泄露。

function fn() {
   
let o1 = {
   }
let o2 = {
   }
o1.a = o2
o2.a = o1
return '引用计数无法回收'
}
fn()

1
2
3
4
5
6
7
8
9
10
11
12

因为他们的引用次数永远不会是0。这样的相互引用如果说很大量的存在就会导致大量的内存泄露。

标记清除法：
现代的浏览器已经不再使用引用计数算法了，现代浏览器通用的大多是基于标记清除算法的某些改进算法，总体思想都是一致的。

核心：

1. 标记清除算法将“不再使用的对象”定义为“无法达到的对象”。
2. 就是从根部（在JS中就是全局对象）出发定时扫描内存中的对象。 凡是能从根部到达的对象，都是还需要使用的。
3. 那些无法由根部出发触及到的对象被标记为不再使用，稍后进行回收。

function fn() {
   
let o1 = {
   }
let o2 = {
   }
o1.a = o2
o2.a = o1
return '引用计数无法回收'
}
fn()

1
2
3
4
5
6
7
8
9
10
11
12

根部已经访问不到，所以自动清除。

闭包

概念：一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域。

简单理解：闭包 = 内层函数 + 外层函数的变量。闭包是一种比较特殊的函数，使用闭包能够访问内层函数作用域中的变量。

闭包作用：封闭数据，提供操作，外部也可以访问函数内部的变量。闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来。

闭包的基本格式：

闭包应用：实现数据的私有。

<script>
  function foo() {
   
    let i = 0;

    // 函数内部分函数
    function bar() {
   
			console.log(++i);
    }

    // 将函数做为返回值
    return bar;
  }
  
  // fn 即为闭包函数
  let fn = foo();
  
  fn(); // 1
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注：回调函数也能访问函数内部的局部变量。

闭包可能引起的问题：内存泄漏。

变量提升

变量提升是 JavaScript 中比较“奇怪”的现象，它允许在变量声明之前即被访问（仅存在于var声明变量）。用var关键字声明变量会有变量提升。

<script>
  // 访问变量 str
  console.log(str + 'world!');
  // 声明变量 str
  var str = 'hello ';
</script>
1
2
3
4
5
6

注意：

1. 变量在未声明即被访问时会报语法错误
2. 变量在var声明之前即被访问，变量的值为 undefined
3. let/const 声明的变量不存在变量提升
4. 变量提升出现在相同作用域当中
5. 实际开发中推荐先声明再访问变量

说明：
JS初学者经常花很多时间才能习惯变量提升，还经常出现一些意想不到的bug，正因为如此，ES6 引入了块级作用域，用let 或者 const声明变量，让代码写法更加规范和人性化。

变量提升是什么流程？

1. 先把var声明的变量提升到当前作用域于最前面
2. 只提升变量声明， 不提升变量赋值
3. 然后依次执行代码

我们不建议使用var声明变量。关于变量提升的原理分析会涉及较为复杂的词法分析等知识，而开发中使用 let 可以轻松规避变量的提升。

函数进阶

函数提升

函数提升与变量提升比较类似，是指函数在声明之前即可被调用。

<script>
  // 调用函数
  foo()
  // 声明函数
  function foo() {
     
    console.log('声明之前即被调用...')
  }
  
  // 不存在提升现象
  bar()  // 错误
  var bar = function () {
     
    console.log('函数表达式不存在提升现象...')
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

总结：

1. 函数提升能够使函数的声明调用更灵活
2. 函数表达式不存在提升的现象
3. 函数提升出现在相同作用域当中

函数表达式必须先声明和赋值，后调用 ，否则报错。

函数参数

函数参数的使用细节，能够提升函数应用的灵活度。

函数的参数有实参和形参，形参可以理解为默认参数。函数还有动态参数和剩余参数。

默认参数：

<script>
  // 设置参数默认值
  function sayHi(name="小明", age=18) {
     
    document.write(`<p>大家好，我叫${
       name
1
2
3
4
5