JavaScript预解释机制详解：变量提升与函数声明差异

JavaScript内存空间划分

JavaScript运行时的内存空间主要划分为两种类型：栈内存（Stack）和堆内存（Heap）。

栈内存主要用于提供JavaScript代码执行的环境，并存储基本数据类型的值。全局作用域以及函数内部的私有作用域，其执行环境均位于栈内存中。

堆内存主要用于存储引用数据类型的值。对于对象而言，其属性名和属性值会被存储在堆内存中；对于函数而言，函数体内的代码字符串会被存储在堆内存中。

全局作用域与预解释机制

当浏览器加载HTML页面时，首先会创建一个供JavaScript代码执行的环境，即全局作用域（Global），在浏览器环境中对应window对象。

在JavaScript代码正式执行之前，浏览器引擎会执行一项预处理工作：扫描所有带有var和function关键字的代码，并进行提前声明或定义，这一过程被称为“预解释”或“变量提升”。

声明（Declare）是指告知浏览器存在这样一个变量或函数，例如执行var num1;或function fn;。

定义（Defined）是指为已声明的变量或函数赋值，例如执行num1=12;或fn=function(){}。

需要注意的是，如果变量仅声明而未定义，其默认值为undefined（未定义）。

var与function预解释差异

在预解释阶段，var声明的变量与function定义的函数处理方式存在显著差异。

对于var声明的变量，预解释阶段仅完成变量的提前声明，实际的赋值操作要等到代码执行到该行时才完成。

对于function定义的函数，预解释阶段会同时完成声明和定义。因此，当代码执行到该函数定义行时，引擎会直接跳过，因为函数已在预解释阶段完整创建。

预解释仅针对当前作用域进行。在全局作用域下，函数体内的代码被视为字符串存储，因此函数内部声明的局部变量（如var total）在当前层级没有实际意义，不会在全局预解释中处理。这体现了“预解释发生在当前作用域下”的原则。

console.log(obj);//->undefined
 var obj = {name: "张珊珊", age: 10};
 function fn(num1, num2) {//代码执行到这一行的时候直接的跳过,因为在预解释的时候我们已经完成了声明加定义
var total = num1 + num2;
 console.log(total);
 }
 var num1 = 12;

 fn(num1, 100);//执行fn，把全局变量num1的值赋值给形参num1，把100赋值给形参num2

变量作用域与查找规则

在全局作用域中声明的变量属于全局变量。

在私有作用域（如函数内部）中声明的变量属于私有变量，函数的形参也属于私有变量。

判断函数中出现的变量是私有还是全局，需遵循特定规则。

首先检查该变量是否为函数形参，其次检查是否在私有作用域中通过var声明过。只要满足其中任一条件，该变量即为私有变量，其作用域局限于当前函数，与全局变量无关。若两者均不满足，则说明该变量非私有，引擎会沿作用域链向上级作用域继续查找。

函数执行与闭包

函数执行时会创建一个新的私有作用域（位于栈内存），用于执行函数体内的代码。

函数执行的流程包括：1) 给形参赋值；2) 在私有作用域下进行预解释；3) 执行私有作用域内的代码。

新创建的私有作用域保护了内部变量不受外部干扰，这种机制被称为“闭包”。

匿名函数与自执行函数

主要区别在于：带有var关键字的变量可以在代码执行前进行声明（提升），而不带var关键字的变量则不会在预解释阶段被声明。

无论条件判断是否成立，预解释阶段都会对代码进行扫描。

window预解释:var a; -> window.a;
 if (!("a" in window)) {//"a" in window -> true
 var a = "我们";
 }
console.log(a);//->undefined

预解释仅针对赋值符号“=”左边的变量名进行，右边的值不参与预解释。

匿名函数表达式是指将函数的定义部分作为值，赋值给一个变量或元素的事件处理程序。

在预解释阶段，对于var fn = function(){}这样的写法，仅执行var fn;的声明，此时fn的默认值为undefined。

fn();//->undefined() Uncaught TypeError: fn is not a function JS中只有函数可以执行 && JS上面的代码如果报错了,在不进行任何的特殊处理情况下我们下面的代码都不在执行了
var fn = function () {
 console.log("ok");
 };
 fn();

预解释的时候:fn=xxxfff000
 fn();//->"ok"
 function fn() {
 console.log("ok");
 }
 fn();//->"ok"

函数体中return语句下方的代码不再执行，但这些代码仍需参与预解释。return后面的表达式作为返回值处理，不参与预解释。

var total = 300;
 function fn() {
 console.log(total);
 return function sum() {};//return是把函数中的值返回到函数的外面,这里是把function对应的内存地址返回的到函数的外面,例如:return xxxfff111;函数体中return下面的代码都不在执行了
var total = 10;
 }
 fn();

匿名函数在全局作用域下不进行预解释，只有函数表达式赋值完成后，变量才指向该函数。

匿名自执行函数是指定义与执行同时完成的函数形式。

示例代码为：(function(num){})(100);

在预解释阶段，如果遇到同名变量或函数，只保留一次声明，但赋值操作会重复进行。

在JavaScript中，变量名与函数名相同被视为重复声明。

预解释的具体行为表现为：先声明，后定义，最终值由最后一次赋值决定。

var fn; 声明
fn = xxxfff000; [声明]不要了+定义
fn = xxxfff111; [声明]不要了+定义
->fn=xxxfff111
 var fn = 12;//window.fn=12
 function fn() {//window.fn=function(){}
 }
 function fn() {
 }

以上即为关于JavaScript预解释机制的详细解析。