JavaScript中的变量提升和函数提升
更新时间：2022年07月04日 14:56:04 作者：wx5e435a4343578
这篇文章主要介绍了JavaScript中的变量提升和函数提升，在js中对变量进行操作后打印值经常会出现undefined的现象。其实原因是因为js中有一个叫做变量提升的功能
前言
在js中对变量进行操作后打印值经常会出现undefined的现象。其实原因是因为js中有一个叫做变量提升的功
举例：
var data="lyyyyy";
getData();
function getData(){
//第一次打印
console.log("data值为: ", data);
var data="yyyyyyy";
//第二次打印
console.log("data值为: ", data);
}打印的值第一个为undefined，而第二个打印的值为yyyyy.
原因：
在执行getData()方法的时候会在函数内部首先将变量的声明提升到第一步。然后再声明函数内部的函数（如果函数内部有函数的话）。之后才会按照方法内部的逻辑先后顺序执行代码。前两步只是声明！！！看到这里应该就已经知道为什么会有上面那样的结果了。
实际的方法内部代码执行顺序应该是这样的：
function getData(){
//一。声明变量
var data;
//二。声明函数（如果函数内部有函数的话）
//三。按照代码的顺序执行
console.log("data值为: ", data);
data="yyyyyyy";
//第二次打印
console.log("data值为: ", data);
}看到拆分后的代码执行顺序对结果也就不迷茫了。
为什么有变量提升
那么为什么会出现变量提升这个现象呢?
其实js和其他语言一样，都要经历编译和执行阶段。而js在编译阶段的时候，会搜集所有的变量声明并且提前声明变量，而其他的语句都不会改变他们的顺序，因此，在编译阶段的时候，第一步就已经执行了，而第二步则是在执行阶段执行到该语句的时候才执行。
javascript变量提升和函数提升
变量提升是把变量提升提到函数顶部。需要说明的是，变量提升只是提升变量的声明，并不会把赋值也提升上来。函数提升是把整个函数都提到前面去。函数表达式不能被提升，函数声明形式能被提升。
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
//变量提升
function test(){
a=2;
var a;
console.log(a); //2
}
test();
//变量提升,不会把赋值也提升上来
var v='Hello World';
(function(){
var v;
console.log(v); //undefined
v='I love you';
})();
//函数声明形式能被提升
function myTest(){
foo();
function foo(){
console.log("hello world"); //hello world
}
}
myTest();
//函数表达式不能被提升
function myTest2(){
foo(); //foo is not a function
var foo =function foo(){
console.log("hello world");
}
}
myTest2();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
//输出Goodbye Jack
var name = 'World!';
(function () {
if (typeof name === 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();
//输出Hello World!
var name2 = 'World!';
(function () {
if (typeof name2 === 'undefined') {
name2 = 'Jack';
console.log('Goodbye ' + name2);
} else {
console.log('Hello ' + name2);
}
})();
//输出Hello World!
var name3 = 'World!';
(function () {
if (typeof this.name3 === 'undefined') {
var name3 = 'Jack';
console.log('Goodbye ' + name3);
} else {
console.log('Hello ' + this.name3);
}
})();
</script>
</body>
</html>总结
- 1.js会将变量的声明提升到js顶部执行，因此对于这种语句:var a = 2;其实上js会将其分为var a;和a = 2;两部分，并且将var a这一步提升到顶部执行。
- 2.变量提升的本质其实是由于js引擎在编译的时候，就将所有的变量声明了，因此在执行的时候，所有的变量都已经完成声明。
- 3.当有多个同名变量声明的时候，函数声明会覆盖其他的声明。如果有多个函数声明，则是由最后的一个函数声明覆盖之前所有的声明。
到此这篇关于JavaScript中的变量提升和函数提升的文章就介绍到这了,更多相关js变量提升内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
大家应该都知道基本图表一共有六种，分别是柱状图、折线图、散点图、气泡图、饼图和雷达图。前面五种图形都已经介绍过如何实现了，今天我们一起来看看最后的雷达图。有需要的朋友们可以参考学习下。2016-09-09
想象一下，你把一个重要内容放在一个弹出窗口，又不聚集到这个窗口。让使用屏幕阅读器的同学情何以堪，只有当他们 tab 到这页面结束，还继续 tab，才可能找到这个弹窗2011-10-10
这篇文章主要为大家详细介绍了微信小程序实现根据日期和时间排序功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了Javascript实现秒表倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
Javascript实现的类似Google的Div拖动效果代码
Javascript实现的类似Google的Div拖动效果代码，需要的朋友可以参考下。2011-08-08
这篇文章主要介绍了微信小程序网络请求封装示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
javascript设计模式 – 访问者模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 访问者模式,结合实例形式分析了javascript访问者模式基本概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
javascript 倒排序实现代码。2009-06-06
本篇文章主要是对textarea 控制输入字符字节数的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
这篇文章主要介绍了JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例,使用javascript较为逼真的模拟出了国际象棋对弈的场景,需要的朋友可以参考下2015-04-04
最新评论