深入理解JS | 青训营笔记

69 阅读3分钟

五一假期结束后,再次投入到前端知识的学习中,由于之前忙着完成专业课的实验导致一部分课程被搁置了。今天学到深入理解JS这节课,简单地整理了一下对应的知识点。

一、JS的基本概念

  • 借鉴C语言的基本语法
  • 借鉴Java语言的数据类型和内存管理
  • 借鉴Scheme语言,将函数提升到“第一等公民”(first class)的地位
  • 借鉴Self语言,使用基于原型(prototype)的继承机制

image.png

  • 单线程
  • 动态、弱类型
  • 面向对象、函数式
  • 解释类语言、JIT
  • 安全、性能差
  • ……

image.png

1、数据类型

image.png

2、作用域

变量的可访问性和可见性

image.png

image.png

image.png

3、变量提升

image.png

  • var有变量提升
  • let、const没有变量提升,提前访问会报错
  • function函数可以先调用再定义
  • 赋值给变量的函数无法提前调用

关于变量提升更具体的内容可以参考下面这篇文章 javascript变量提升详解 - 陈陈jg - 博客园 (cnblogs.com)

二、JS是怎么执行的

image.png

AST(抽象语法树)关于AST的使用可以参考下面这篇文章(26条消息) JS AST的使用_ast js_little_people的博客-CSDN博客

当JS引擎解析到可执行代码片段(通常是函数调用)的时候,就会先做一些执行前的准备工作,这个准备工作就叫做“执行上下文(execution context简称EC)”,也叫执行环境

image.png

执行上下文又被分为全局执行上下文、函数执行上下文与Eval执行上下文三类。

  1. 全局执行上下文:代码开始执行时就会创建,将它压进执行栈的栈底,每个生命周期内只有一份。
  2. 函数执行上下文:当执行一个函数时,这个函数内的代码会被编译,生成变量环境、语法环境等,当函数执行结束的时候该执行环境从栈顶弹出。
  3. Eval执行上下文(用的比较少,在这里就不介绍了)

关于执行上下文更具体的内容可以参考下面这篇文章理解 JavaScript 的执行上下文这篇就够了! - 掘金 (juejin.cn)

创建执行上下文的时候做了三件事:绑定this,创建词法环境,创建变量环境。

  1. 词法环境:基于ECMAScript代码的语法嵌套结构来定义标识符和具体变量和函数的关联。一个词法环境由环境记录器和一个可能的引用外部词法环境的空值组成。
  2. 变量环境:变量环境和词法环境的一个不同就是前者被用来存储函数声明和变量(let和const)绑定,而后者只用来存储var变量绑定。
  3. Outer:指向外部变量环境的一个指针。

三、JS的进阶知识点

1、闭包

image.png

2、this

image.png

3、垃圾回收

image.png

4、事件循环

image.png

四、课程总结

image.png