字节前端--深入JS

iolzyy / 2023-04-28 / 原文

深入JS

首先先介绍JS的基本概念:

比如是单线程,动态,弱类型等等。

除了这些东西之外还有:

下面的一些基础概念:

  1. JavaScript 是一种脚本语言,通常在网页上运行。
  2. JavaScript 不需要编译,因为它是一种解释性语言。
  3. 在网页上添加 JavaScript 的方式有多种,包括内联脚本、嵌入式脚本和外部脚本。
  4. 变量是 JavaScript 中的基本组件,用于存储数据,并且可以在程序中被修改和调用。
  5. JavaScript 支持许多数据类型,包括字符串、数字、布尔值、对象和数组等等。
  6. 函数是 JavaScript 程序的基本构建块,用于执行特定的任务或功能。
  7. 控制结构包括 if 语句、while 循环、switch 语句等等,用于控制程序的流程。
  8. 对象是 JavaScript 中的另一个重要概念,它由属性和方法组成。
  9. 在浏览器端,JavaScript 通常是通过文档对象模型(DOM)来操作网页内容的。
  10. Ajax 技术可以让 JavaScript 应用实现异步加载和处理请求的功能。

接下来我们看JS是如何进行执行的:

  1. 首先,浏览器解析 HTML 和 CSS 文件,并把 JavaScript 代码解释为可执行的指令。
  2. 当浏览器遇到 JavaScript 代码时,会创建一个 JavaScript 引擎的实例,比如 Google Chrome 使用 V8 引擎。
  3. JavaScript 代码是按照书写顺序依次执行的,除非使用了异步处理方法,比如 setTimeout() 函数。
  4. 在执行 JavaScript 代码时,浏览器会创建一个称为执行上下文(execution context)的环境,用于存储变量、函数和对象等信息。每个执行上下文都有一个变量对象(variable object)来存储变量和函数。
  5. JavaScript 引擎会执行 JavaScript 代码中的语句(statement),并在需要时创建新的执行上下文。
  6. 当引擎遇到函数调用,它会创建一个新的执行上下文,并把它压入执行上下文栈(ECStack)中。
  7. 执行上下文栈是一种后进先出(LIFO)的数据结构,用于跟踪执行上下文之间的关系。当函数执行完毕时,引擎会从栈中弹出该执行上下文。
  8. 在执行 JavaScript 代码时,如果发生错误,引擎会抛出异常(exception)。这可能会导致代码停止执行或跳转到错误处理程序。
  9. 在执行 JavaScript 代码时,浏览器还会使用回调函数(callback function)和事件监听器(event listener)等特殊机制来处理用户交互、网络请求等外部事件。

image.png

接着是JS的一些进阶的知识点:

第一个是闭包:

举个实例会更好理解:

function outer() 
{ var name = "binjie09"; function inner() 
{ console.log(name); } 
return inner; // 返回内部函数 inner }
var func = outer(); // 执行外部函数 outer,并把返回的内部函数保存到变量 func 中 func(); 
// 输出 "binjie09"
复制代码

在这个例子中,函数 outer 内部定义了一个变量 name 和一个内部函数 inner。然后将内部函数 inner 作为返回值返回,而不是直接执行它。

在执行 var func = outer(); 时,函数 outer 被调用,此时变量 name 获得了值 "binjie09",并且函数 inner 还没有被执行。然后将内部函数 inner 赋值给变量 func

在执行 func() 时,由于 func 保存了内部函数 inner,所以可以通过调用 func 来执行 inner 函数,并输出变量 name 的值 "binjie09"。而在这个过程中,由于内部函数 inner 能够访问外部函数 outer 中的变量 name,因此形成了一个闭包。

在这个例子中,由于闭包的存在,即使函数 outer 执行完毕并弹出了调用栈,变量 name 的值仍然被保存在内存中,可以被下一次调用函数 inner 时使用。

第二个是this指针:

跟c++的this指针有异曲同工之妙,就是this指针可以指向临时变量。

第三个是垃圾回收:

举个实例:

var obj = { name: "binjie09", age: 20 }; // 将这个对象赋值给另一个变量 
var obj2 = obj; // 将 obj 设置为 null,解除对原对象的引用 
obj = null; // 现在只有 obj2 仍然引用着原对象 
console.log(obj2); // 输出 
{ name: "binjie09", age: 20 } // 再次将 obj2 指向另一个对象 
obj2 = { name: "Tom", age: 22 }; // 原对象已经没有任何引用,成为了垃圾,将被垃圾回收器回收