深入理解JS | 青训营笔记

表情吖
74 阅读5分钟

深入理解JS | 青训营笔记

课程内容

  1. JS的基本概念
  2. JS是怎么执行的
  3. JS的进阶知识点

JS的基本概念

诞生

1995年，Brendan Eich开发

  1. 借鉴C语言的基本语法
  2. 借鉴Java的数据类型和内存管理
  3. 借鉴Scheme，将函数提升到"第一等公民"
  4. 借鉴Self，基于原型继承

发展

image (28).png

进程

  • Browser进程
  • GPU进程
  • 渲染进程
    • GUI线程
    • JS线程
    • 事件触发线程
    • 定时器触发线程
    • 网络线程
  • 插件进程、网络进程...

数据类型

  • 对象
    • 函数
    • 数组
  • 基本类型
    • 字符串
    • 数字
    • null
    • 布尔等

作用域

变量的可访问性和可见性

  • 静态作用域

    • 通过它就可以预测代码在执行过程中如何查找标识符

  • 全局作用域

    • var company = "Bytedance";

function showCompany(){
    console.log(company);
}
showCompany()

  • 函数作用域

    • var company = "Bytedance";

function showCompany(){
    company = "douyin";
    console.log(company);
}
showCompany()

  • 块级作用域

    • {
    const company = "Bytedance";
    console.log(1,company);
}
console.log(2,company);

变量提升

console.log('company',company);
		console.log('dep',dep);
		console.log('myname',myname);
		showInfo();
		show();
		
		const company = "Bytedance";
		let dep = "边缘云";
		var myname = "zhangqi";
		
		function showInfo(){
			console.log(company,dep,myname);
			console.log(myname);
		}
		
		var show = function(){
			console.log(myname);
		}
  • var 有变量提升
  • let，const没有变量提升，提前访问会报错
  • function函数可以先调用再定义
  • 赋值给变量的函数无法提前调用

JS是怎么执行的

image (29).png

JavaScript代码的执行过程可以分为两个阶段：编译和执行。

在编译阶段，JavaScript引擎会对代码进行解析和编译，生成执行上下文和可执行代码。执行上下文是JavaScript引擎在执行代码时创建的一个内部数据结构，用于存储代码执行过程中的变量、函数和作用域等信息。可执行代码是编译后的JavaScript代码，可以直接在JavaScript引擎中执行。

在执行阶段，JavaScript引擎会按照编译后生成的执行上下文栈（execution context stack）来执行可执行代码。当函数被调用时，会创建一个新的执行上下文并压入执行上下文栈中，执行完成后再将其弹出。执行上下文栈的顶部始终是当前正在执行的代码。

在执行可执行代码时，JavaScript引擎会根据作用域链（scope chain）来查找变量和函数。作用域链是一个由多个执行上下文对象组成的链式结构，每个执行上下文对象包含了当前作用域内的变量和函数，如果在当前作用域找不到变量或函数，则会向上一级作用域查找，直到查找到全局作用域为止。

总之，JavaScript的执行过程是一个复杂的过程，但理解它的执行原理对于开发高质量的JavaScript应用程序非常重要。

image (30).png

  • 全局执行上下文
    • 代码开始执行时就会创建、将他压执行栈的栈底，每个生命周期内只有一份
  • 函数执行上下文
    • 当执行一个函数时，这个函教内的代码会被编译，生成变量环境、词法环境等，当函数执行结束的时候该执行环境从栈顶弹出
  • 创建执行上下文时做了什么
    • 绑定this
      • 指向外部变量环境的一个指针
    • 创建词法环境
      • 基于ECMAScript 代码的词法嵌套结构来定义标识符和具体变量和函数的关联。一个词法环境由环境记录器和一个可能的引用外部词法环境的空值组成
    • 创建变量环境
      • 变量环境和词法环境的一个不同就是前者被用来存储函教声明和变量（let 和 const) 绑定而后者只用来存储 var 变量绑定

JS的进阶知识点

闭包

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

function showName(){
			const company = "Bytedance";
			const dep = "边缘云";
			const name = "zhangqi";
			return function(){
				console.log(dep);
				return name
			}
		}
		
		const getName = showName();
		console.log(getName());

image (31).png

This

image (32).png

"this"关键字在JavaScript中表示当前上下文中的对象。在函数中，"this"指向调用该函数的对象，而在全局作用域中，"this"指向全局对象（通常是window对象）。使用"this"关键字可以访问对象的属性和方法。

垃圾回收

JavaScript是一种动态语言，它的垃圾回收机制是自动的。具体来说，JavaScript引擎会周期性地扫描内存中的对象，对于不再被引用的对象进行垃圾回收，释放其占用的内存。这个过程是非常智能化的，它会根据对象的引用情况，自动判断哪些对象是“垃圾”，哪些对象是有用的，然后及时回收“垃圾”对象，释放内存。这种自动垃圾回收机制避免了手动管理内存的繁琐，也避免了内存泄漏等问题。

avatar
文章
阅读
粉丝