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,重复执行这个过程。
相关推荐
洛小豆8 分钟前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator12 分钟前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆17 分钟前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
bug爱好者27 分钟前
原生小程序如何实现跨页面传值
前端·javascript
bug爱好者36 分钟前
原生微信小程序最实用的工具函数合集
前端·javascript
3Katrina39 分钟前
JS事件机制详解(2)--- 委托机制、事件应用
前端·javascript·面试
code_YuJun1 小时前
从内存角度理解JS代码执行过程
javascript
DoraBigHead1 小时前
【JS三兄弟谁是谁】搞懂 splice、slice、split,只需一杯奶茶的时间!
前端·javascript·面试
国家不保护废物1 小时前
前端存储与后端服务的奇妙冒险:一个Node.js服务器的诞生记(cookie实现用户登入)
前端·javascript·后端
前端付豪1 小时前
2、前端架构三要素:模块化、工程化、平台化
前端·javascript·架构