js的一些概念(一)

JS

1. 作用域和作用域链

  • 在JavaScript中,作用域(Scope)和作用域链(Scope Chain)控制着变量和函数的可访问性和生命周期
  • 作用域可以分为全局作用域(Global Scope)和局部作用域(Local Scope)
  • 全局作用域中的变量和函数可以在整个代码中被访问,它们在程序启动时创建,在程序结束时销毁。
  • 局部作用域是在函数内部创建的,只能在函数内部访问。每次调用函数时都会创建一个新的局部作用域,函数执行结束后,局部作用域中的变量通常会被销毁。
  • 作用域链是由多个作用域组成的链式结构,它决定了变量和函数的查找顺序。
  • 当在一个作用域中引用一个变量或函数时,JavaScript解释器会首先在当前作用域中查找,如果找不到,则会沿着作用域链向上查找,直到找到匹配的变量或函数或者到达全局作用域。
  • 在函数嵌套的情况下,每个函数都有自己的作用域,当内部函数访问外部函数的变量时,会通过作用域链向上查找。

2. 原型和原型链

  • 在JavaScript中,每个对象都有一个原型(Prototype)。

  • 原型是一个对象,其他对象可以通过原型继承其属性和方法。

  • 当访问一个对象的属性或方法时,如果对象本身没有该属性或方法,JavaScript引擎会沿着原型链向上查找,直到找到该属性或方法或者到达原型链的顶端(即 Object.prototype)。

  • **原型链(Prototype Chain)**是由一系列对象组成的链式结构,用于实现对象之间的继承关系。当试图访问一个对象的属性或方法时,JavaScript引擎会按照以下步骤查找:

    1. 首先查找对象自身是否具有该属性或方法。
    2. 如果对象自身没有该属性或方法,则会沿着对象的原型链向上查找,直到找到或者到达原型链的顶端。

    原型链的形成是因为每个对象都有一个指向其原型对象的引用,通过这种引用关系,形成了对象之间的继承关系。

3.事件循环

事件循环是为了处理异步操作而设计的,它使得JavaScript可以在单线程环境中处理多个任务。

事件循环的基本原理是不断地从任务队列(Task Queue)中取出任务执行,直到任务队列为空。任务队列分为宏任务队列(Macro Task Queue)和微任务队列(Micro Task Queue)两种:

  1. 宏任务队列(Macro Task Queue):包含一些异步任务,比如定时器(setTimeout、setInterval)、事件回调(如用户交互事件、网络请求完成事件等)等。在每次事件循环中,从宏任务队列中取出一个任务执行,执行完毕后再从微任务队列中取出任务执行。
  2. 微任务队列(Micro Task Queue):包含一些优先级较高的任务,比如Promise的回调函数、MutationObserver的回调等。当执行栈为空时,会先执行微任务队列中的所有任务,直到微任务队列为空,然后再执行宏任务队列中的任务。

事件循环的过程可以简单描述为:

  1. 从宏任务队列中取出一个任务执行。
  2. 执行过程中遇到微任务,将其放入微任务队列。
  3. 执行完当前宏任务后,依次执行微任务队列中的任务,直到微任务队列为空。
  4. 回到步骤1,重复执行这个过程。
相关推荐
山河木马13 小时前
矩阵专题3-怎么创建投影矩阵(uProjectionMatrix)
javascript·webgl·计算机图形学
泯泷14 小时前
第 2 篇:设计第一套字节码:Opcode、Instruction 与 Constant Pool
前端·javascript·安全
泯泷15 小时前
第 1 篇:从 1 + 2 开始:亲手写出第一台 JSVM
前端·javascript·安全
朦胧之15 小时前
页面白屏卡住排查方法
前端·javascript
犇驫聊AI16 小时前
Chrome DevTools MCP + Claude Code 自定义skills生成接口代码生成器
前端·javascript
kyriewen16 小时前
别再这样写 async/await 了:我在 Code Review 中见过最多的 8 个错误
前端·javascript·面试
用户2986985301421 小时前
在 React 中使用 JavaScript 将 Excel 转换为 SVG
前端·javascript·react.js
labixiong1 天前
手写Promise--微任务、静态方法、async/await 全搞懂(三)
前端·javascript
铁皮饭盒1 天前
3行代码搞定页面截图,Bun.WebView真的简单
javascript
kyriewen2 天前
我手写了一个 EventEmitter,面试官追问了 6 个问题——第 4 个我没答上来
前端·javascript·面试