深入理解JS | 青训营笔记

Dillonz
56 阅读3分钟

前言

本文主要面向刚刚入门的前端同学，主要讲述了JS的整体发展及一些比较重要的知识。其中通过一些简单的代码讲述了变量提升、JS的数据是怎么存储的、基础数据类型和复杂数据类型的区别等一些基础知识，也讲解了JS的执行、闭包、垃圾回收等一些稍微进阶一些的知识，希望大家能有所收获

1.JS的基本概念

JS诞生和发展

诞生：1995年，Brendan Eich开发

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

发展：

  • 1.Mocha->1955.9 LiveScript->1995.12 JavaScript
  • 2.1997年6月，第一版ECMAScript发布
  • 3.1999年12月，第三版ECMAScript发布
  • 4.2009年12月，第五版ECMAScript发布
  • 5.2009年，Ryan创建了Node.js
  • 6.2010年，Isaac基于node.js写出来npm
  • 7.2015年6月，第六版ECMAScript发布

浏览器进程模型

image.png

JS特点

  • 单线程

image.png

  • 动态、弱类型

image.png

  • 面向对象、函数式

image.png

  • 解释类语言、JIT
  • 安全、性能差
  • ......

数据类型

image.png

  • 基础类型是不可变的
  • 复杂数据类型，原始值是可变的

作用域

  • 变量的的可访问性和可见性
  • 静态作用域，通过它就能够预测代码在执行过程中如何查找标识符

image.png

变量提升

image.png

2.JS是怎么执行的

JS执行流程图

image.png

AST

image.png

执行上下文

image.png

  • 全局执行上下文：代码开始执行时就会创建，将他压执行栈的栈底，每个生命周期内只有一份
  • 函数执行上下文：当执行一个函数时，这个函数内的代码会被编译，生成变量环境、词法环境等，当函数执行结束的时候该执行环境从栈顶弹出

调用栈

image.png

创建执行上下文做什么？

  • 绑定THis
  • 创建词法环境
  • 创建变量环境

词法环境、变量环境、Outer

image.png

作用域链

image.png

变量环境、堆空间

  • 引用对象保存在堆空间中，即存的是地址

image.png

ESP

image.png

3.JS的进阶知识点

闭包

  • 通常，如果引用闭包的函数是一个全局变量，那么闭包会一直存在直到页面关闭，但是如果这个闭包以后不再使用的话，就会造成内存泄漏。
  • 如果引用闭包的函数是一个局部变量，等函数销毁后，在下次JavaScript引擎执行垃圾回收时，判断闭包这块内容如果已经不再被使用了，那么JavaScript引擎的垃圾回收器就会回收这块内存 image.png

this

image.png

垃圾回收

image.png

4.总结

  • 1.JS是单线程的，但是Render进程里面是有多个线程
  • 2.JS线程和GUI线程互斥，执行大的计算任务会导致页面卡顿
  • 3.基础数据类型存在栈上，复杂数据类型存在堆上
  • 4.const、let没有变量提升，提前使用会报错
  • 5.JS也有编译的过程，执行之前会生成执行上下文
  • 6.一个执行上下文包括变脸环境、词法环境、this
  • 7.变量环境里面有一个指向外部函数执行上下文的指针，形成了作用域链
  • 8.全局执行上下文只用一份
  • 9.this和执行上下文绑定

引用

  • 字节内部课：深入理解JS-字节前端初阶训练营
avatar
文章
阅读
粉丝