7.深入理解JavaScript | 青训营笔记

14 阅读2分钟

深入理解JavaScript

①JS的基本概念

1.诞生

  • 总体比较粗糙 image.png

2.发展

  • JS的发展历史比较短,且迭代非常快 image.png

3.进程模型

  • 着重理解渲染进程 image.png

4.基本特点

  • 单线程
  • 动态、弱类型
    (声明变量不需要指明类型) image.png
  • 面向对象、函数式
    (混用)(jQuery/Ramada)
  • 解释类语言,JIT
    (并非单纯的解释性语言)
  • 安全、性能差
    (需要附属环境所以安全)

5.数据类型

image.png

复杂数据类型(对象数组等)存的是地址,值可以被改变
基础数据类型(简单变量)存的就是单纯的值 image.png

6.作用域

变量的可访问性和可见性

  • 静态作用域
    通过它就能够预测代码在执行过程中如何查找标识符

image.png

7.变量提升

  • var有变量提升
    默认赋值undefined
    其他变量就会报错
  • 函数有变量提升
    函数的变量提升是直接默认定义了
    var定义默认undefined,若赋值一个未声明的函数,则会报错

image.png

②JS如何执行

1.执行进程图

image.png

AST先转化成字节码可以节约内存开销
优化代码可以存储部分字节码,以后直接使用

image.png

2.执行上下文

image.png

  • 全局执行上下文:
    代码开始执行的就会创建,将他压执行栈的栈底,每个生命周期内有一份
  • 函数执行上下文:
    当执行一个函数时,这个函数内的代码会被编译生成变量环境、词法环境等,当函数执行结束的时候该执行环境从栈顶弹出
  • 调用栈如下
    image.png
  • 创建执行上下文
  • 绑定This
  • 创建词法环境
  • 创建变量环境
  • 具体定义如下 image.png
  • 实现了一个作用域链
    image.png image.png

3.空间存储

  • 利用堆空间存储复杂变量
    image.png

③JS的进阶知识点

1.闭包

创建闭包(例如创建函数)对应堆上的一个地址
不容易回收,容易造成内存泄漏
image.png

2.this

  • 普通函数的this指向windows(global)
  • 对象中的this指向对象
  • 构造函数的this指向创建的临时对象

image.png

3.垃圾回收

image.png

4.事件循环

image.png

④课程总结

image.png