首页 > 编程语言 >Javascript 一题搞懂 var 变量提升 & 函数声明提升!

Javascript 一题搞懂 var 变量提升 & 函数声明提升!

时间:2024-09-27 20:51:40浏览次数:9  
标签:console 变量 作用域 Javascript 提升 var 搞懂 声明 函数

前置知识: 在 JavaScript 中,“变量提升”(Hoisting)是指在代码执行之前,变量和函数声明会被提升到其所在作用域的顶部。对于使用 var 关键字声明的变量,会发生变量提升现象。

一、声明提升

1.变量声明提升: 无论 var 变量在代码中的何处声明,它都会被提升到其所在的函数作用域或全局作用域的顶部。例如:

     console.log(a); // undefined
     var a = 10;

在这个例子中,虽然变量 a 的声明在console.log之后,但由于变量提升,在执行 console.log(a) 时,变量 a 已经存在于作用域中,只是还没有被赋值,所以输出 undefined
2.函数声明提升: 函数声明也会被提升到作用域的顶部。这意味着可以在函数声明之前调用函数。例如:

     foo(); //Function called.
     function foo() {
       console.log('Function called.');
     }

在这个例子中,函数 foo 在被调用之前声明,由于函数声明提升,代码可以正常执行并输出 Function called.

二、变量提升的影响

1.可能导致错误: 如果不了解变量提升,可能会在代码中出现意外的结果。例如,在变量赋值之前使用变量可能会导致 undefined 的值被使用,或者在函数声明和调用的顺序不清晰时可能会出现错误。
2.代码可读性和可维护性: 变量提升可能会使代码的可读性降低,因为代码的执行顺序可能与看起来的顺序不一致。这也会使代码的维护变得更加困难,特别是在大型项目中。

三、如何避免声明提升带来的问题?

使用ES6 中的 let 和 const: 声明的变量不会发生变量提升。

如果在声明之前使用 let 或 const 变量,会抛出 ReferenceError。

例如:

     console.log(b); // ReferenceError: b is not defined
     let b = 20;

总之,变量提升是 JavaScript 中使用 var 声明变量的一个特性,但在现代 JavaScript 开发中,建议使用 let 和 const 来声明变量,以避免由于变量提升带来的潜在问题,并提高代码的可读性和可维护性。

题目(源自字节前端题库 高频):

//请写出打印结果
var a=1;
function b() {
    a=10;
    return;
    function a() {}
}
b()
console.log(a);

打印结果为 1 or 10 ? 来看浏览器输出的结果:
var 变量提升题

以下是对这段代码的分析:

一、代码解读

var a = 1;:在全局作用域中声明了一个变量 a 并初始化为 1。
function b() {...}:定义了一个函数 b。
a = 10;:尝试将变量 a 的值修改为 10。但在这个函数内部,由于存在一个名为 a 的函数声明,会导致变量提升,使得这里的 a 被视为局部函数名而不是外部的全局变量 a。
return;:函数立即返回,不执行后面的代码。
function a() {}:在函数 b 内部声明了一个函数,名为 a。这个声明会被提升到函数的顶部,在函数内部,这个局部的 a 会覆盖外部的全局变量 a 的引用。
b();:调用函数 b。
console.log(a);:在全局作用域中打印变量 a 的值。
二、结果分析
由于在函数 b 内部的函数声明导致了变量提升,并且在函数内部对a的赋值被视为对局部函数a 的操作,而不是对全局变量a 的操作。所以全局变量 a 的值始终保持为初始值 1。最终控制台输出 1

标签:console,变量,作用域,Javascript,提升,var,搞懂,声明,函数
From: https://blog.csdn.net/Mz0127/article/details/142599829

相关文章

  • 事件【JavaScript】
    1.事件事件是用户或浏览器动作的表示,JavaScript中的一切交互都是通过事件来处理的。2. 事件冒泡(EventBubbling)事件冒泡是指事件从最具体的元素(即触发事件的元素)开始触发,然后逐级向上传播到较为不具体的元素(即该元素的父元素、祖先元素),直到到达最顶层的元素(通常是documen......
  • C++17 std::variant 详解:概念、用法和实现细节
    std::variant是C++17引入的一个新的标准库类型,它提供了一种类型安全的联合体。这个类可以在同一时间持有几种可能类型中的一个值。本文将详细介绍std::variant的概念、用法和实现细节。1.基本概念std::variant是一个模板类,可以存储几种不同类型中的一个值。它的声明如下:te......
  • JavaScript 网页设计案例详解( 最新技术趋势)
    前言随着JavaScript生态系统的不断发展和浏览器支持的不断完善,2024年的前端开发技术已经变得更加现代化和高效。JavaScript在网页设计中的应用不再局限于基础的交互,它与最新的Web标准、API结合,为开发者带来了丰富的功能和出色的性能优化。本文将通过一个网页设计案例,结......
  • JavaScript 闭包
    什么是闭包?简单理解:闭包=内层函数+外层函数的变量。正如前面所说的作用域链也会涉及到闭包,如下:leta=6;//全局作用域functionf(){a=7;//父级作用域functiond(){a=8;//自己的作用域console.log(a);}d();}f(); 闭包的官方......
  • 【微服务】一张图搞懂微服务架构设计
    1.前言当前,微服务架构在很多公司都已经落地实施了,下面用一张图简要概述下微服务架构设计中常用组件。不能说已经使用微服务好几年了,结果对微服务架构没有一个整体的认知,一个只懂搬砖的程序员不是一个好码农!  2.流量入口Nginx在上图中可以看到,Nginx作为整个架构的流量入......
  • JavaScript 网页设计经典案例代码全览
    一、响应式导航栏HTML结构:<nav><!--这是一个导航栏的容器--><divclass="logo">YourLogo</div><!--用于显示logo的div元素--><divclass="menu-icon">&#9776;</div><!--显示菜单图标(通常用于触发菜单的显示/隐藏)-->......
  • JavaScript 变量的作用域链
    作用域链本质上就是使用的是哪个变量,全局变量,局部变量,自身的变量。这个在看别人代码的逻辑的时候非常有用,底层是变量的查找机制。嵌套关系的作用域窜连起来形成了作用域链在函数被执行,会优先查找当前函数作用域中的变量。如果当前函数作用域找不到,则会逐级查找父级作用域,知道......
  • 快速搞懂你是否要做深度合成算法备案
    需要备案的对象《互联网信息服务深度合成管理规定》第十九条指出,具有舆论属性或者社会动员能力的深度合成服务提供者,应当履行备案和变更、注销备案手续。这里我们要分舆论属性和社会动员能力,以及深度合成服务提供者两部分看。什么是舆论属性和社会动员能力?根据《具有舆论......
  • JavaScript null和0和undefined的比较
    null和0和undefined的比较alert(null>0); //(1)falsealert(null==0);//(2)falsealert(null>=0);//(3)true注意:这是因为相等性检查 == 和普通比较符 ><>=<= 的代码逻辑是相互独立的。进行值的比较时,null 会被转化为数字,因此它被转化为了 0。这就是为......
  • javascript 匿名函数之立即执行
    函数分为具名函数和匿名函数,具名函数需要先声明在进行调用,而匿名函数是完全没有值。例如:我们设置点击事件中的function就是匿名函数document.addEventListener('click',function(){})我们可以设置匿名函数立即执行。好处是一方面可以防止变量污染,另外一方面,......