前端JavaScript中的3个大boss,我们来轻松拿捏它

808 阅读3分钟

今天云哥来讲一下JS中3个最重要的东西,也是前端学习和面试中的重点

1️⃣ 作用域与闭包

作用域是代码执行时的环境,决定变量和函数的可见性及生命周期。它像一层层的壳,保护着内部变量不受外界干扰,避免命名冲突。

  • 全局作用域:在整个程序中均可访问,如window对象的属性,但易引发命名污染。
  • 模块作用域:通过ES6模块导入导出或早期的模块化方案实现,每个模块有自己的作用域。
  • 函数作用域:在函数内部声明的变量仅在该函数内部有效,闭包正是在此基础上产生的。
  • 块级作用域(ES6引入):使用letconst定义的变量仅在当前代码块内有效,解决了var带来的变量提升问题。

闭包是函数与其词法环境的组合,允许函数访问并修改外部作用域中的变量,即使外部函数已经执行完毕。它使得变量长期驻留内存,虽强大但也需注意内存管理,以免造成泄露。

闭包应用场景广泛,比如:

  • 在定时器、事件监听中维持状态,
  • 创建私有变量模拟面向对象编程的封装,
  • 实现函数记忆化减少重复计算等。

3.png

2️⃣ 原型与原型链

原型是JavaScript中实现继承的核心机制。每个对象都有一个内置的[[Prototype]](可访问形式为__proto__),指向它的原型对象。原型对象上定义的属性和方法可被其所有实例共享。

  • 原型链:当试图访问一个对象的属性或方法时,若自身没有,则会沿着__proto__这条链向上查找,直至到达Object.prototype,形成一条链式结构。

理解原型链的关键是把握__proto__prototypeconstructor的关系:

  • __proto__指向创建该对象的构造函数的prototype
  • prototype属性存在于函数对象中,存放共享属性和方法。
  • constructor属性指向创建该原型对象的构造函数本身。

这一机制使得对象能够继承其构造函数原型上的属性和方法,最终追溯至Object.prototype,构成完整的继承体系。

1.png

3️⃣ 单线程与事件循环

JavaScript是单线程语言,意味着同一时间只能执行一个任务。为了提高效率并处理I/O操作,引入了事件循环机制。

单线程设计基于早期Web需求,确保DOM操作的连续性和一致性,避免多线程并发修改DOM导致的冲突。

异步处理:虽然单线程看似限制了并行处理能力,但事件循环模型允许JavaScript在等待IO操作(如网络请求、文件读写)的同时继续执行其他任务,通过回调函数、Promise、async/await等机制实现非阻塞的异步操作。

事件循环包括多个阶段,如宏任务(执行脚本代码)、微任务(Promise回调等),确保在每个循环中合理调度任务,提供流畅的用户界面和高效的后台处理。

综上所述,理解JavaScript的作用域与闭包、原型与原型链、异步与单线程机制,是深入掌握这门语言的关键,也是构建复杂应用的基础。

2.png