0

0

如何理解JavaScript中的变量提升

清浅

清浅

发布时间:2019-04-20 11:20:52

|

2949人浏览过

|

来源于php中文网

原创

javascript中的变量提升就是变量和函数的声明会跑到代码的最前面,但是实际上变量和函数声明的位置并不会动,只是在编译过程中放入了内存之中。

JavaScript虽然是一种解释型语言,但是在Web开发中在执行之前有一个重要的步骤就是解释器浏览代码并识别声明的所有变量,记下何时它们被重新分配,并将代码块划分为三个级别的范围:块,函数和全局。接下来就将为大家详细介绍JavaScript中的变量提升,希望对大家有所帮助

如何理解JavaScript中的变量提升

【推荐课程:JavaScript教程

例:

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

function exampleFunction() { 
 var x = "declared inside function";
 console.log("Inside function"); 
 console.log(x);
 }
 console.log(x);

效果图:

如何理解JavaScript中的变量提升

上述例子中函数的范围包括变量x,因此变量仅在该函数中已知。如果在全局范围内访问它就会报错,因为x不是声明的变量。

如果将x的声明移到函数之外,它将在全局范围中,在函数外或函数内都可以使用。

var x = "declared outside function";
exampleFunction();
function exampleFunction() { 
 console.log("Inside function");
 console.log(x);}
 console.log("Outside function");
 console.log(x);

效果图:

如何理解JavaScript中的变量提升

随着ES6的出现,引入了两种提升变量的新方法:let和const方法。这些方法可以对变量可用的范围进行更细致的控制。let和const定义的局部变量,仅可在他们定义的级别中使用

EnablePPA中小学绩效考核系统2.0
EnablePPA中小学绩效考核系统2.0

无论从何种情形出发,在目前校长负责制的制度安排下,中小学校长作为学校的领导者、管理者和教育者,其管理水平对于学校发展的重要性都是不言而喻的。从这个角度看,建立科学的校长绩效评价体系以及拥有相对应的评估手段和工具,有利于教育行政机关针对校长的管理实践全过程及其结果进行测定与衡量,做出价值判断和评估,从而有利于强化学校教学管理,提升教学质量,并衍生带来校长转变管理观念,提升自身综合管理素质。

下载

变量提升

在下面的例子中,x声明了var,并且x在整个函数中和子块中都调用了相同变量。如果x用let或者const声明,那么外部范围将无法访问它,如果我们再次在子模块中声明let x;实际上它是一个不同的变量了

function varTest() { 
 var x = 1; 
 if (true) { 
   var x = 2;  
   console.log(x); // 2 
 }
 console.log(x); // 2 
 }
 function letTest() {
 let x = 1; 
 if (true) {
   let x = 2; 
   console.log(x); // 2
 }
 console.log(x); // 1}

例:

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

function doSomething() {
 console.log(bar); // undefined
 console.log(foo); // ReferenceError
 var bar = 1; 
 let foo = 2;}

在此函数中,声明bar被提升到作用域的顶部。实际上它是这样执行的:

function doSomething() {
 var bar;
 console.log(bar); // undefined
 console.log(foo); // ReferenceError
 bar = 1; 
 let foo = 2;}

这就是为什么console.log(bar)的结果是undefined,而console.log(foo)会报错

这使得这样的事情成为可能:

num = 6;
console.log(num); // returns 6
var num;

和:

dogName("Watson");
function dogName(name) {
 console.log("My dog's name is " + name);
 }

在第一个例子中,虽然var num是在分配之后声明的,但是从计算机的角度来看,它注意到我们已经早全局中声明了它,就会将声明放到顶部,然后继续执行其余的代码。在第二个例子中,即使我们在定义它之前调用/调用该函数,该定义也会被提升到作用域的顶部,所以当我们实际开始执行代码时,解释器已经知道它是什么dogName()。

注意:对于var变量,只有声明被提升,而不是赋值。

总结:以上就是本篇文章的全部内容了,希望对大家学习变量提升有所帮助。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

29

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法,阅读专题下面的文章了解更多处理方案。

20

2025.12.25

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

37

2025.12.25

word转换成ppt教程大全
word转换成ppt教程大全

本专题整合了word转换成ppt教程,阅读专题下面的文章了解更多详细操作。

6

2025.12.25

msvcp140.dll丢失相关教程
msvcp140.dll丢失相关教程

本专题整合了msvcp140.dll丢失相关解决方法,阅读专题下面的文章了解更多详细操作。

2

2025.12.25

笔记本电脑卡反应很慢处理方法汇总
笔记本电脑卡反应很慢处理方法汇总

本专题整合了笔记本电脑卡反应慢解决方法,阅读专题下面的文章了解更多详细内容。

6

2025.12.25

微信调黑色模式教程
微信调黑色模式教程

本专题整合了微信调黑色模式教程,阅读下面的文章了解更多详细内容。

5

2025.12.25

ps入门教程
ps入门教程

本专题整合了ps相关教程,阅读下面的文章了解更多详细内容。

4

2025.12.25

苹果官网入口直接访问
苹果官网入口直接访问

苹果官网直接访问入口是https://www.apple.com/cn/,该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

218

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号