JavaScript 中的五种作用域:开发人员深入探讨

javascript 中的五种作用域:开发人员深入探讨

javascript 对变量的行为是由它的作用域决定的。理解范围是编写健壮、可维护的代码的基础。本文将探讨 javascript 中的五种主要作用域类型——全局、局部、块、函数作用域(和闭包)和作用域链。最后,您将清楚地掌握 javascript 如何跨不同上下文处理变量。

目录

1. 全球范围

解释:

在任何函数或块之外声明的变量都具有全局范围。这意味着它们可以在 javascript 代码中的任何位置访问。在浏览器中运行时,全局变量成为 window 对象的属性,如果应用程序的不同部分尝试使用相同的变量名称,则可能会导致冲突。

例子:

var globalvar = "i am a global variable";function displayglobal() {  console.log(globalvar); // accessible from inside the function}displayglobal(); // outputs: i am a global variableconsole.log(globalvar); // accessible outside the function as well

登录后复制

重要考虑因素:

使用太多全局变量会污染全局命名空间,增加由于命名冲突而出现错误的可能性。

2. 本地范围

解释:

函数内声明的变量位于局部范围内。它们只能从该函数内访问。一旦函数执行完毕,变量就会从内存中删除,并且无法再访问。

立即学习“Java免费学习笔记(深入)”;

例子:

function localscopeexample() {  var localvar = "i am local to this function";  console.log(localvar); // works fine}localscopeexample();console.log(localvar); // error: localvar is not defined

登录后复制

重要考虑因素:

本地作用域有助于避免变量名称冲突,促进函数内的封装和数据隐私。

3. 块作用域

解释:

在 javascript(特别是 es6+)中,用 let 和 const 声明的变量是块作用域的。块是 {}(大括号)之间的任何代码,例如 if 语句、循环和函数中的代码。块作用域变量仅限于定义它们的块。

例子:

if (true) {  let blockscopedvar = "i exist only within this block";  console.log(blockscopedvar); // accessible here}console.log(blockscopedvar); // error: blockscopedvar is not defined

登录后复制

重要考虑因素:

与 var 不同,let 和 const 可以防止变量意外泄漏到其预期块之外,从而使您的代码更具可预测性。

4. 闭包和函数作用域

解释:

javascript 中的每个函数都会创建自己的作用域,称为 函数作用域。函数内声明的变量只能在该函数内访问。然而,javascript 还支持闭包,它允许内部函数即使在外部函数完成执行后也可以访问外部函数的变量。

例子:

function outerfunction() {  let outervar = "i am outside!";  function innerfunction() {    console.log(outervar); // can access outervar due to closure  }  return innerfunction;}const closureexample = outerfunction();closureexample(); // outputs: i am outside!

登录后复制

重要考虑因素:

闭包非常强大,因为它们允许在函数中持久存储数据,而不会污染全局范围。它们支持数据封装和函数工厂等功能。

5. 作用域链

解释:

javascript 使用作用域链来解决变量访问。如果在当前作用域中找不到变量,javascript 将查找作用域链,检查外部作用域,直到找到该变量或到达全局作用域。

例子:

let globalVar = "I am a global variable";function outerFunction() {  let outerVar = "I am an outer variable";  function innerFunction() {    let innerVar = "I am an inner variable";    console.log(globalVar); // Found in the global scope    console.log(outerVar); // Found in the outer function scope    console.log(innerVar); // Found in the inner function scope  }  innerFunction();}outerFunction();

登录后复制

重要考虑因素:

作用域链有助于解析嵌套函数或块中的变量。它在父作用域中向上移动,直到找到所需的变量或在未定义的情况下抛出错误。

结论

了解 javascript 中的各种类型的作用域——全局、局部、块、闭包/函数作用域和作用域链——使您能够编写更清晰、更高效的代码。通过仔细管理变量的声明和访问方式,您可以避免意外行为,特别是在更大、更复杂的应用程序中。

掌握范围是成为高级 javascript 开发人员的一个关键方面,确保您的代码无论其复杂程度如何都按预期运行。

喜欢阅读吗?如果您发现这篇文章富有洞察力或有帮助,请考虑给我买杯咖啡来支持我的工作。您的贡献有助于推动更多此类内容。单击此处请我喝杯虚拟咖啡。干杯!

以上就是JavaScript 中的五种作用域:开发人员深入探讨的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2669446.html

(0)
上一篇 2025年3月7日 12:44:43
下一篇 2025年2月23日 07:12:20

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript 中的闭包

    你好, 在这篇文章中,让我们学习闭包。 闭包在 javascript 中至关重要,因为它们允许函数从其父作用域访问变量,即使在父函数关闭之后也是如此。这对于需要随着时间的推移记住数据的函数至关重要,例如回调函数或维护状态。这里要记住的一点是…

    2025年3月7日
    200
  • 了解 CORS 在 Web 浏览器中的工作原理

    跨源资源共享 (cors) 是 web 浏览器中的一项重要安全功能,它控制 web 应用程序如何从与提供初始网页的域不同的域请求资源(例如数据、图像或脚本) 。它的主要目的是保护用户免受试图访问其他网站上敏感信息的恶意网站的侵害。本博客将解…

    2025年3月7日
    200
  • JavaScript 中的提升

    什么是 javascript 提升? 提升是指 javascript 中在执行之前进行声明的过程。首先处理变量和函数声明。因此,即使变量在声明之前被引用,也不会导致错误,而是返回 undefined。对于函数声明,整个函数被提升,这意味着它…

    2025年3月7日
    200
  • 了解 JavaScript 中的变量:初学者指南

    理解 javascript 中的变量:初学者指南 欢迎回到我们的 javascript 世界之旅!在这篇博文中,我们将深入探讨编程中的基本概念之一:变量。变量对于在 javascript 程序中存储和操作数据至关重要。我们将介绍什么是变量、…

    2025年3月7日
    200
  • JavaScript 中的临时死区 (TDZ) 和提升:

    JavaScript 中的临时死区 (TDZ) 和提升: 临时死区(TDZ):临时死区是指进入作用域(如块或函数)和声明变量之间的时间段。在此区域中,任何访问变量的尝试都将导致引用错误。 TDZ 存在于初始化之前使用 let、const 和…

    2025年3月7日
    200
  • DSA 与 JS:用 JavaScript 解释大 O 表示法

    废话不多说,我们直接进入正题吧。什么是大 o 表示法以及它的用途是什么?明确的答案是 big o 表示法是一种描述算法性能如何随着输入大小的增长而变化的方法。它可以帮助您了解处理越来越大的数据量时代码的速度有多快或多慢。 简单来说,big …

    2025年3月7日
    200
  • 执行上下文和调用堆栈

    为顶级代码创建全局执行上下文,即不在任何 fn 内的代码。因此,首先执行 fn 之外的代码。fn-decln/exprsn 的 fn 主体内的代码仅在调用时执行。 执行上下文(ec) 一段js执行的环境。存储一些要执行的代码的所有必要信息,…

    2025年3月7日
    200
  • 使用 Secrets Loader 轻松管理 Laravel 和 JS 项目

    跨各种环境管理 api 密钥、令牌和凭证等敏感数据可能非常棘手,尤其是在开发和部署应用程序时。确保秘密在需要时安全地存储和获取,而不是将它们硬编码到版本控制中,对于维护安全性至关重要。 这就是我创建 secrets loader 的原因,这…

    2025年3月7日
    200
  • 如何在Reactjs中制作动态进度条

    使用 react 和循环进度组件构建性能仪表板在本博客中,我们将探讨如何使用 react 构建性能指标仪表板。仪表板显示不同绩效指标(例如可访问性、seo 和最佳实践)的循环进度指示器。进度指示器逐渐填满,模拟加载动画。 该项目使用 tai…

    2025年3月7日
    200
  • 适用于您日常工作流程的 ESEST 提示、技巧、最佳实践和代码片段示例

    es6 (ecmascript 2015) 对 javascript 进行了重大改革,引入了许多新功能,可以简化您的编码并提高项目的整体质量。 在这篇文章中,我们将介绍一些es2015 提示、技巧、最佳实践,并提供代码片段示例来增强您的日常…

    2025年3月7日
    200

发表回复

登录后才能评论