首页 > 编程语言 >前端小白必知必会:JavaScript的作用域

前端小白必知必会:JavaScript的作用域

时间:2024-05-28 11:01:56浏览次数:23  
标签:console 变量 访问 作用域 JavaScript 必知 函数

文章导读:AI 辅助学习前端,包含入门、进阶、高级部分前端系列内容,当前是 JavaScript 的部分,瑶琴会持续更新,适合零基础的朋友,已有前端工作经验的可以不看,也可以当作基础知识回顾。

这篇文章瑶琴带大家学习 javascript 中关于变量作用域的相关知识点。在 JavaScript 中,变量的作用域指的是变量在代码中的可访问性和可见性范围。JavaScript 中有两种主要的作用域:全局作用域和局部作用域。

1.全局作用域(Global Scope)

在代码的任何地方都可以访问的作用域,定义在全局作用域中的变量在整个程序中都是可见的。

// 全局作用域 var globalVariable = 'Global Variable';
function exampleFunction() { // 函数作用域 
    var localVariable = 'Local Variable'; 
 console.log(localVariable); // 可以访问局部变量     console.log(globalVariable); // 可以访问全局变量 
}
exampleFunction(); // console.log(localVariable); // 错误,无法访问局部变量

2.局部作用域(Local Scope)

在函数内部定义的变量拥有局部作用域,只能在函数内部访问。函数外部无法访问函数内部的变量,这样可以防止变量污染和冲突。

// 块级作用域 
if (true) { 
    let blockVariable = 'Block Variable'; 
    console.log(blockVariable); 
    // 可以访问块级作用域中的变量 
} 
// console.log(blockVariable); // 错误,无法访问块级作用域中的变量

JavaScript 中的变量作用域遵循词法作用域(也称为静态作用域)规则,即变量的作用域由它们在代码中的位置决定,与调用栈无关。

在 JavaScript 中,变量作用域的特点包括:

块级作用域: 在 ES6(ECMAScript 2015)之前,JavaScript 中没有块级作用域,只有函数作用域和全局作用域。但是在 ES6 中引入了 let 和 const 关键字,可以创建块级作用域。

函数作用域: 在函数内部定义的变量只在函数内部可见,外部无法访问。

变量提升(Hoisting): 在 JavaScript 中,变量的声明会被提升到作用域的顶部,但是变量的赋值保持在原地。这意味着可以在声明之前使用变量,但是如果在声明之前访问变量的值,那么它的值会是 undefined。

闭包(Closure): 闭包是指函数和函数内部能够访问到的变量的组合。函数可以创建闭包,闭包可以访问外部函数的变量,即使外部函数已经执行完毕。

function outerFunction() {
     var outerVariable = 'Outer Variable'; 
     function innerFunction() {
         console.log(outerVariable); // 内部函数可以访问外部函数的变量 
     } 
    return innerFunction; 
} 
var innerFn = outerFunction(); 
innerFn(); // 输出 'Outer Variable'

在这个例子中,innerFunction 是闭包,它可以访问 outerFunction 中声明的 outerVariable 变量,即使 outerFunction 已经执行完毕。

对于初学者来说,理解并合理使用作用域是必要的,只要编码就离不开变量的声明和作用域问题,初学者可以结合上面的例子自己实践。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师,加油。

最后啰嗦一句,好记性不如烂笔头,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。

标签:console,变量,访问,作用域,JavaScript,必知,函数
From: https://blog.csdn.net/weixin_40348267/article/details/139260426

相关文章

  • LLM 大模型学习必知必会系列(六):量化技术解析、QLoRA技术、量化库介绍使用(AutoGPTQ、A
    LLM大模型学习必知必会系列(六):量化技术解析、QLoRA技术、量化库介绍使用(AutoGPTQ、AutoAWQ)模型的推理过程是一个复杂函数的计算过程,这个计算一般以矩阵乘法为主,也就是涉及到了并行计算。一般来说,单核CPU可以进行的计算种类更多,速度更快,但一般都是单条计算;而显卡能进行的都是基......
  • LLM 大模型学习必知必会系列(七):掌握分布式训练与LoRA/LISA微调:打造高性能大模型的秘
    LLM大模型学习必知必会系列(七):掌握分布式训练与LoRA/LISA微调:打造高性能大模型的秘诀进阶实战指南1.微调(SupervisedFinetuning)指令微调阶段使用了已标注数据。这个阶段训练的数据集数量不会像预训练阶段那么大,最多可以达到几千万条,最少可以达到几百条到几千条。指令微调可以......
  • LLM 大模型学习必知必会系列(四):LLM训练理论篇以及Transformer结构模型详解
    LLM大模型学习必知必会系列(四):LLM训练理论篇以及Transformer结构模型详解1.模型/训练/推理知识介绍深度学习领域所谓的“模型”,是一个复杂的数学公式构成的计算步骤。为了便于理解,我们以一元一次方程为例子解释:y=ax+b该方程意味着给出常数a、b后,可以通过给出的x求出......
  • LLM 大模型学习必知必会系列(三):LLM和多模态模型高效推理实践
    LLM大模型学习必知必会系列(三):LLM和多模态模型高效推理实践1.多模态大模型推理LLM的推理流程:多模态的LLM的原理:代码演示:使用ModelScopeNoteBook完成语言大模型,视觉大模型,音频大模型的推理环境配置与安装以下主要演示的模型推理代码可在魔搭社区免费实例PAI-DSW......
  • 你不知道的JavaScript(上中下合集) (作者 [美] Kyle Simpson 译者 赵望野 梁杰 单业 姜
    书:pan.baidu.com/s/199LHxxIlMixw3gYSY8tyPw?pwd=ywxg提取码:ywxg作用域与闭包:详细解释了词法作用域、动态作用域以及闭包的概念,展示了它们如何影响变量和函数的可访问性。函数作用域与块作用域:区分了函数作用域和块作用域,并解释了let和const等关键字如何引入块级作用域。变量......
  • 在JavaScript中如何移除数组中的特定项
    在日常开发中,我们经常需要从数组中移除某个特定的元素。在JavaScript中,存在多种不同的方法来完成这一任务,本文将总结几种常见的处理方式,并介绍它们的优缺点。常规情况1.使用.splice()方法按值移除数组元素是否修改原数组:是是否移除重复项:是(使用循环),否(使用i......
  • 代码雨(coderain)源码(html5+css3+javascript,原创)
     大家看过黑客帝国的代码雨吗?本人自己写了一个,效果还可以。演示效果请见https://www.lanbaoshi.site/coderain.htm下面上代码:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="htt......
  • JavaScript 控制网页行为
    UI框架Ant-Design:阿里巴巴出品,基于React的UI框架ElementUI、iview、ice:饿了么出品,基于Vue的UI框架Bootstrap:Twitter推出的一个用于前端的开源工具包AmazeUI:又叫“妹子UI”,一款HTML5跨屏前端框架1.基本使用1.1.引入JavaScript内部标签使用<script>//........
  • JavaScript 中 toString 的奇妙使用
    JavaScript中的toString()方法,我们通常会一些其他类型的变量,转为字符串类型。但这里还有一些其他奇妙的用法。不同的类型调用toString()会得到不同的结果。我们来一一分析下。1.函数类型我们开发者自定义的函数,和JavaScript官方内置的函数,在调用toString时,输出是不一样......
  • (读后分享)移动Web前端高效开发实战:HTML 5 + CSS 3 + JavaScript + Webpack + React Nat
    链接:pan.baidu.com/s/1tIHXj9HmIYojAHqje09DTA?pwd=jqso提取码:jqsoHTML5新特性与应用:介绍HTML5的新特性,包括语义化标签、本地存储、设备兼容、连接特性等,并讲解如何在移动Web前端开发中充分利用这些特性提升用户体验。CSS3样式与动画设计:详细讲解CSS3的样式设计和动画效果,包......