目录
- 正文
- 一.变量提升
- 二.函数提升
- 三.判断顺序
- 四.其他“提升”
- 1.作为import结果的声明是“提升的”；
正文
对一些计算机语言来说，程序被执行时，对命令的翻译通常是自上而下逐行执行的，这通常被称为代码解释；
对另外一些语言来说，这种翻译是预先进行的，被称为代码编译，这样在程序执行的时候，运行的就是已经编译好的、可执行的计算机指令。
JavaScript通常被认为是解释型的，因为每次执行js源码时都需要进行处理。但这么说也不是完全准确的，我们需要知道，JavaScript引擎实际上是动态编译程序，然后立即执行编译后的代码。而JavaScript中的变量声明和函数提升的直接原因就是编译阶段编译器所做的事。
在提升过程中，虽然声明似乎在程序中被提升了，但实际发生的事情是，函数和变量声明在编译阶段被添加到内存中。
一.变量提升
就变量和常量而言，关键字 var 被提升，let 和 const 不允许提升。
a = 5; console.log(a); var a; // 5
在上面的示例中，在声明变量 a 之前使用它。程序运行并显示输出 5。该程序的作用如下：
var a; a = 5; console.log(a); // 5
然而在 JavaScript 中，初始化不会被提升。
console.log(a);//undefined var a = 5;
上述程序的作用如下：
var a; console.log(a); a = 5;
在编译阶段，只有声明被移动到内存中。因此，变量 a 的值是 undefined，因为 a 是在未初始化的情况下打印的。注意：当变量在函数内部使用时，变量仅被提升到函数的顶部。
var a = 4;
function greet() {
b = 'hello';
console.log(b);
var b;
}
greet(); // hello
console.log(b);//Uncaught ReferenceError: b is not defined
如果变量与 let (const)关键字一起使用，则不会提升该变量。
a = 5; console.log(a);// error let a;
换一种角度说，变量与let(const)关键字一起使用，变量被提升到暂时性死区(TDZ)中，直到程序执行到该变量的let(const)声明语句的时候才从TDZ中被释放。
二.函数提升
由于函数声明和变量声明都会被提升，函数会先被提升，然后才是变量，并且后面的函数声明会覆盖前面的。
代码示例：
foo();
var foo;
function foo(){
console.log(1);
}
foo = function(){
console.log(2);
};
最终结果会输出1。因为函数声明会被提升，而函数表达式不会被提升。这段代码可以理解成：
function foo(){
console.log(1);
}
foo();
foo = function(){
console.log(2);
};
三.判断顺序
执行函数中的第一行代码时，如何判断该函数的词法作用域中存在哪些变量呢？该变量代表的是什么呢？判断步骤如下：
- 将参数列表中的参数作为变量标识符存储在作用域中，值为undefined；
- 将传入的实参对应给相应的参数列表中的标识符赋值；
- 函数提升；若作用域中有与函数名同名的标识符，则该函数取代该标识符的值；
- var提升；若作用域中有同名的标识符，则不做任何改变，否则在作用域中添加该标识符，且值为undefined；
- 执行第一行代码。
四.其他“提升”
1.作为import结果的声明是“提升的”；
foo();
import { foo } from "foo";
上面这段代码中，foo()是可以运行的，不只是因为import...语句的静态决议在编译过程中确定了foo值是什么，也因为它“提升”了在模块作用域顶层的声明，使它在模块所用位置可用。
以上就是JS中的提升机制变量提升函数提升实例详解的详细内容，更多关于JS 变量提升函数提升的资料请关注自由互联其它相关文章！