深入理解JS

一.JS的基本概念

1.数据类型

（1）基础类型

数字（Number）: 表示数值，可以是整数或小数。

字符串（String）: 由零个或多个字符组成的文本字符串。

布尔值（Boolean）: 只有两个值，true 和 false。

undefined: 表示未定义或不存在的值，通常在声明变量但没有对其进行初始化的情况下出现。

null: 表示空或者不存在的对象，通常用于手动释放对象或重置对象引用。

符号（Symbol）: 表示独特的生成标识符，在对象属性中作为键值存在。

（2）对象

可以包括函数，数组和自定义对象，通常指某种具体的实体

2.作用域

这里的作用域指的是变量的可访问性和可见性

作用域分为全局作用域，局部作用域。而局部作用域可以分为函数作用域和块级作用域。在函数内部声明的变量只有在该函数及其子函数内部才能访问，而在代码块内声明的变量只能在该块内部访问。

（1）全局作用域

var name = "wyw"
function showName(){
	console.log(name)
}
showName()

（2）函数作用域

function showName(){
	let name = "wyw"
	console.log(name)
}
showName()
// 在这里是不能访问name变量的
console(name)

（3）块级作用域

{
	const name = "wyw"
	console.log(name)
}
//在这里会报错，访问不到name变量
console.log(name)

3.变量提升

（1）概念

变量提升是指允许变量在声明之前进行使用

（2）注意

function函数可以先调用再定义，但赋值给变量的函数无法提前调用

（3）var关键字修饰的变量有变量提升，而let和const关键字修饰的变量没有变量提升，提前访问会报错

二.JS执行过程

解析：浏览器在加载JavaScript代码时，会先对代码进行解析。解析器会将JavaScript代码转换为计算机可以理解的形式，即抽象语法树（AST）。
编译：解析完成后，会进行编译。编译器会将AST转换为字节码或机器码。
执行：JavaScript代码的执行是按顺序逐行执行的。在执行过程中，如果遇到函数调用或变量声明等操作，会进入相应的执行上下文。
执行上下文：执行上下文是JavaScript中非常重要的概念。每当函数被调用时，都会创建一个执行上下文。执行上下文包括变量对象、作用域链和this指向。执行上下文分为三种类型：全局执行上下文、函数执行上下文和eval执行上下文。
变量提升：在执行上下文被创建时，JavaScript会将变量声明提升到作用域的顶部。这意味着可以在变量声明之前使用变量。
作用域链：JavaScript中的作用域链是由当前执行上下文和所有外层执行上下文的变量对象组成的。当查找变量时，会先在当前执行上下文的变量对象中查找，如果没有找到，就会向上级执行上下文的变量对象中查找，直到找到为止。
this指向：this指向在JavaScript中比较复杂，它的值取决于函数的调用方式。this指向在函数执行时动态绑定。
垃圾回收：JavaScript是一种垃圾回收语言，这意味着开发者不需要手动管理内存。JavaScript会自动检测不再使用的对象并回收它们的内存。

三.JS进阶知识点

1.闭包

两个特点

（1）函数嵌套函数

（2）内层函数可以访问外层函数的变量和参数

两个作用

防止变量和参数被垃圾回收机制回收（变量持久化）

防止变量和参数被外部污染（变量只在闭包内部可访问）

一个风险

滥用可能会造成内存泄露

function outerFunction(x) {
  function innerFunction(y) {
    return x + y;
  }
  return innerFunction;
}
// 这里属于内部函数访问外层参数
var closure = outerFunction(5);
console.log(closure(3)); // 输出 8

在这个例子中，outerFunction 是一个接受一个参数 x 的函数，它返回另一个函数 innerFunction。innerFunction 接受一个参数 y，并返回 x + y 的结果。当我们调用 outerFunction(5) 时，它返回了一个函数 closure。closure 中的 x 的值被设置为 5，因此当我们调用 closure(3) 时，它返回了 8，即 5 + 3。这里，closure 是一个闭包，因为它可以访问外部函数 outerFunction 中定义的变量 x，即使 outerFunction 已经执行完毕并返回了。

2.this

this 是 JavaScript 中一个非常重要的关键字，它指向当前执行上下文中的对象。它可以用在函数、方法和构造函数中，并且其值的解析方式与其所在的执行上下文有关。

（1）函数作为普通函数调用，this指向全局对象（在浏览器环境下，全局对象是window）

代码示例：

function myFunction() {
  console.log(this);
}

// 作为全局函数调用，this 指向全局对象
myFunction(); // 输出 window（在浏览器环境下）

（2）函数作为对象方法调用，this指向该对象

var myObject = {
  myMethod: function() {
    console.log(this);
  }
};

// 作为对象方法调用，this 指向该对象
myObject.myMethod(); // 输出 myObject

（3）作为构造函数调用，this指向新创建的示例对象

function MyConstructor() {
  console.log(this);
}

// 作为构造函数调用，this 指向新创建的实例对象
var myInstance = new MyConstructor(); // 输出 myInstance

3.垃圾回收

JavaScript 中的垃圾回收机制是自动进行的，它会自动管理不再使用的内存空间，以确保它们可以被重复利用。垃圾回收器负责标记和清除不再使用的内存空间，以便该内存可以被重新分配。

需要注意的是，垃圾回收是自动进行的，并且不可预测。为了避免出现内存泄漏等问题，开发人员应该遵循良好的编码习惯，包括在不再使用对象时手动将其引用设置为 null，以确保垃圾回收器可以及时回收内存。

深入理解JS | 青训营笔记