关于变量提升和函数提升的那些事

关于变量提升和函数提升的那些事

技术杂谈小彩虹2021-07-16 7:16:3990A+A-

前言

在学习javascript过程中,我们应该如何让初学者理解关于变量提升和函数提升,接下来让我们来了解一下关于变量提升和函数提升的那些事。

变量提升

首先,大家都知道代码是从上往下执行的,接下来,我们需要简单了解一下JS的代码在运行过程,需要经历那些阶段,代码的运行过程中,分为编译阶段和执行阶段,变量提升就发生在编译阶段,接着我们来看下面的例子

console.log(a)//undefined
var a = 'tdl'

a = 'tdl'
var a
console.log(a)//tdl

第一段代码的执行结果是undefined,第二段是tdl,为什么会出现这种情况,很多初学者可能会认为两段代码的输出结果都是tdl,这就涉及到变量提升的问题了,变量提升会吧所有的变量声明提到最开头的阶段,并给变量赋值为undefined,然后按照代码以后一行执行,我们把这两段代码在预编译阶段的处理过程模拟一下,会变成下面这样的代码

var a = undefined
console.log(a)//undefined
a = 'tdl'

var a = undefined
a = 'tdl'
console.log(a)//tdl

我们就可以这样理解关于变量提升,就是把变量声明提到最前面,然后赋值为undefined,然后将代码从上往下执行。然后到a赋值阶段,就会把tdl赋给变量a,从而取代undefined。就会按照这样将代码按先后顺序执行

函数提升

了解函数提升之前我们应该简单了解一下函数声明和函数表达式,而区分函数声明和表达式最简单的方法就是看function关键字出现在声明中的位置(不单单值一行代码,而是整个声明的位置),如果function出现在声明的第一个词,那么就是函数声明,否则即使表达式。我们看下面的两段代码

Name()//tdl
function Name(){
    console.log('tdl');
}

Name()
console.log(Name);//ReferenceError: Name is not defined
var a = function Name(){
    console.log('tdl');
}

从中我们可以看出,第一段代码hi输出tdl,第二段会报错,我们简要来看一下他的预编译过程

function Name(){
    console.log('tdl');//函数声明部分被提升
    Name()// 执行之后会输出结果tdl
} 

var a = undefined
Name()
console.log(Name);//ReferenceError: Name is not defined
function Name(){
    console.log('tdl');
}

第一段代码中可以找到name,所以就正常输出name的值,而第二段代码,按照从上往下的执行顺序,Name没有找到,所以就会报错。 )

总结

  1. 变量声明和函数声明都会被提升到最开头
  2. 代码分为编译阶段和执行阶段,代码是按顺序从上往下执行的。
  3. 学习JS最基础的一点是要学会看懂代码,关于变量提升和函数提升很重要的基础。

参考资料来源小黄书

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们