本文解析JavaScript中变量提升与函数提升的核心机制。通过代码示例说明var声明提前但赋值不提升，以及函数声明优先于变量声明的覆盖规则。深入探讨编译期与执行期的行为差异，帮助开发者避免undefined陷阱并正确理解执行顺序。
前言
在JavaScript开发中，对变量进行操作后打印值经常会出现undefined的现象。这背后的核心原因涉及JavaScript引擎特有的变量提升机制。
举例：
var data="lyyyyy";
getData();
function getData(){
//第一次打印
console.log("data值为: ", data);
var data="yyyyyyy";
//第二次打印
console.log("data值为: ", data);
}代码执行后，第一次打印的值显示为undefined，而第二次打印的值为yyyyy。
原因分析：
当执行getData()方法时，JavaScript引擎会在函数内部首先将变量的声明提升到代码块的最前面。随后，如果函数内部存在嵌套函数，也会进行相应的函数声明提升。最后，才按照代码逻辑的先后顺序执行具体语句。前两步仅涉及声明，不涉及赋值，这解释了为何第一次打印结果为undefined。
实际的方法内部代码执行顺序应该是这样的：
function getData(){
//一。声明变量
var data;
//二。声明函数（如果函数内部有函数的话）
//三。按照代码的顺序执行
console.log("data值为: ", data);
data="yyyyyyy";
//第二次打印
console.log("data值为: ", data);
}通过观察拆分后的代码执行顺序，可以清晰地理解为何会产生上述结果，从而不再感到困惑。
为什么有变量提升
那么为什么会出现变量提升这个现象呢?
JavaScript与其他编程语言类似，代码执行都经历编译和执行两个阶段。在编译阶段，JavaScript引擎会搜集所有的变量声明并提前进行声明处理，而其他语句保持原有顺序不变。因此，在编译阶段，变量声明这一步骤就已经完成；而赋值等具体操作则是在执行阶段，当代码运行到该语句时才执行。
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. JavaScript会将变量的声明提升到代码顶部执行。因此，对于语句var a = 2;，JavaScript引擎会将其拆分为var a;和a = 2;两部分，并将var a这一步提升到顶部执行。
- 2. 变量提升的本质在于JavaScript引擎在编译阶段就将所有的变量声明处理完毕，因此在执行阶段，所有变量都已经完成了声明过程。
- 3. 当存在多个同名变量声明时，函数声明会覆盖其他类型的声明。如果有多个函数声明，则由最后一个函数声明覆盖之前所有的声明。
到此这篇关于JavaScript中的变量提升和函数提升的文章就介绍到这了,更多相关js变量提升内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！