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,重复执行这个过程。
相关推荐
ℋᙚᵐⁱᒻᵉ鲸落5 小时前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
默_笙6 小时前
🎃 前端学了 Next.js,后端该学啥?NestJS 就是 Node 版的蜜雪冰城
前端·javascript
এ慕ོ冬℘゜8 小时前
navigator 导航对象 BOM制作方法
javascript
kyriewen10 小时前
面试官让我用 AI 重构一个 8 年陈的 React 组件——他说他不看代码,只看我会不会拆
前端·javascript·面试
Jacky199911 小时前
Electron + Vue 3 桌面打字游戏实战:从 VSCode 扩展到独立应用的架构改造
javascript
柚yuzumi12 小时前
别再猜 this:先看它属于谁,再看它指向谁
前端·javascript
汉堡大王952713 小时前
面试必考:手写代码 new 做了什么?从原理到实现全解析
前端·javascript·面试
BillKu13 小时前
TypeScript中,字符串字面量联合类型(Union Type)、enum的用法说明
前端·javascript·typescript
顶级自由人15 小时前
本地正常、线上正常,为什么一个 Hook 仍会报错?
前端·javascript·程序员
lerhxx15 小时前
R3F 第一人称漫游与碰撞检测:Pointer Lock + 不穿墙的滑墙秘诀(中)
前端·javascript·three.js