创作者：张敏

转载请联系“极光学苑”授权！

前言

在JavaScript的语法中，涉及到变量和函数的使用时我们初学都会记住一个规律，那就是 " 先定义，后使用 " 。

如果在没有定义时使用某个变量或函数，执行过程会出现一个引用错误的报错信息，提示变量或函数未定义。

另外，JavaScript的代码执行时，总体上有一个从上往下执行的过程（特殊结构除外）。

但是，有时候写程序过程中，我们会发现如果先使用一个在后面定义的变量或函数，程序并不会报错。这其中的原因在于JavaScript的解析器的解析原理，下面我们详细的给大家来解释一下。

思考

在解释前，我们先来看一道面试题：

很多面试的朋友乍一看到这个简短的代码，按照惯常思维从上往下执行代码，粗心之下如果给出 "out" 的答案，那么面试的结果就不会乐观了。

有网友确实因为这样一道看似简单的题目，失去了工作机会。

那么，真正的答案是什么呢？控制台输出 undefined 。

想了解其中的原理，不要错过接下来给大家的讲解。

JavaScript预解析

JavaScript 代码的执行是由浏览器中的 JavaScript 解析器来执行的。

JavaScript 解析器执行 JavaScript 代码的时候，分为前后两个过程：

预解析过程和代码执行过程。

预解析过程：

1. 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
2. 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
3. 先提升 var，在提升 function 。

JavaScript 的执行过程：

在预解析之后，根据新的代码顺序，从上往下按照既定规律执行 js 代码。

很多问题的关键点提炼出来，原理就是预解析过程中出现的变量声明提升和函数声明提升。

变量声明提升

在预解析过程中，所有定义的变量，都会将声明的过程提升到所在的全局作用域或者函数作用域最上面，在将来的代码执行过程中，按照先后顺序会先执行被提升的声明变量过程。

? 提升过程中，只提升声明过程，不提升变量赋值，变量赋值的过程会保留在原代码位置。

那么被提升到顶部的变量，相当于定义后未被赋值，未赋值的变量内默认存储 undefined值。

? 因此，在 js 中会出现一种现象，在前面调用后定义的变量，不会报错，只会使用 undefined值。

上面这段程序的输出结果就是 undefined 。

如果我们用代码来模拟 JavaScript 解析器的工作，相当于：

讲到这里，回想我们思考中的面试题，可以得到我们想到的解释了。我们来将面试题的代码解析过程也用代码来模拟一下：

这时我们再来分析，函数内部调用a变量时，根据作用域链的查找顺序，会优先在本层函数作用域内查找是否有定义的a变量，结果找到了被提升后的a的定义，因此不会再往外查找函数外部的a。

同时，a变量提升后，内部因为没有赋值，存储的为默认值 undefined，所以输出答案就是undefined。

对于我们的程序来说，使用变量是为了用它内部存储的数据，而不是被提升后使 undefined，因此推荐朋友们在定义变量时，最好 直接把变量定义过程书写在代码最前面。

函数声明提升

同变量提升类似的，在预解析过程中，所有定义的函数，都会将声明的过程提升到所在的全局作用域或者函数作用域最上面，在将来的代码执行过程中，按照先后顺序会先执行被提升的函数声明过程。

?在预解析之后的代码执行过程中，函数定义过程已经在最开始就会执行，一旦函数定义成功，那么函数名内就已经存储了指向函数对象的地址，后续通过函数名就可以直接调用函数。

?因此，在 js 中会出现一种现象，在前面调用后定义的函数，不会报错，而且能正常执行函数内部的代码。

执行结果：控制台输出1。

如果我们用代码来模拟JavaScript解析器的工作，相当于：

另外，有一种特殊的函数定义方式，函数表达式：

它进行的是变量声明提升，而不是函数声明提升。提升后变量内部存的是一个 undefined。在前面进行函数方法调用，数据类型会提示错误。

结果：

对于我们的程序来说，函数声明提升可以用于调整代码的顺序，将大段的定义过程放到代码最后，但是不影响代码执行效果。

因此，建议在定义函数时，最好使用 function 关键字定义方式，这样函数声明提升可以永远生效。

提升顺序

预解析过程中，先提升 var 变量声明，再提升 function 函数声明。

?假设出现变量名和函数名相同，那么后提升的函数名标识符会覆盖先提升的变量名，那么在后续代码中出现调用标识符时，内部是函数的地址，而不是 undefined。

结果：

如果调用标识符的过程在源代码函数和变量定义后面，相当于函数名覆盖了一次变量名，结果在执行到变量赋值时，又被新值覆盖了函数的地址，那么在后面再次调用标识符，用的就是变量存的新值。

结果：

如果我们用代码来模拟 JavaScript 解析器的工作，相当于：

当然，以上这些特殊案例的写法大部分会出现在面试题中，来对大家进行一个误导，同时检测大家对 JavaScript 基础原理的掌握程度。在实际自行编写代码过程中，还是建议 不要书写相同的标识符给变量名或函数名，避免出现覆盖。、

总结

1. 变量声明提升：只提升定义，赋值过程保留在原位置。

2. 函数声明提升：整个定义过程都被提升。

3. 建议利用函数声明提升，规避变量声明提升。

最后，JavaScript 中很多基本原理经常被用作前端的面试题，通过这篇文章，希望大家对预解析过程有了一个清晰的了解，再次遇到相关面试题可以轻松解决。

想要得到更多的前端面试攻略，请关注公众号：极光训练营。

言

JavaScript是一门解释型的语言 , 想要运行JavaScript代码需要两个阶段

• 编译阶段: 编译阶段就是我们常说的JavaScript预解释（预处理）阶段，在这个阶段JavaScript解释器将完成把JavaScript脚本代码转换到字节码
• 执行阶段: 在编译阶段JavaScript解释器借助执行环境把字节码生成机械码，并从上到下按顺序执行
• 本文就重点介绍预解释，框架图如下：
• 
  

一、什么是预解释

在js中，带var 和function关键字的需要预解释：

那什么是预解释?就是在js代码执行之前，先申明好带有var 关键字和带有function关键字的变量，在内存里先安排好。

预解释:JavaScript代码执行之前，浏览器首先会默认的把所有带var和function的进行提前的声明或者定义

1.理解声明和定义

声明(declare):如var num;=>告诉浏览器在全局作用域中有一个num的变量了；如果一个变量只是声明了但是没有赋值，默认的值是undefined

定义(defined):如num=12;=>给我们的变量进行赋值。

2.对于带var和function关键字的在预解释的时候操作不一样的

var=>在预解释的时候只是提前的声明

function=>在预解释的时候提前的声明+定义都完成了

3.预解释只发生在当前的作用域下。

例如：开始只对window下的进行预解释，只有函数执行的时候才会对函数中的进行预解释

二、作用域链

1.如何区分私有变量和全局变量？

1）在全局作用域下声明（预解释的时候）的变量是全局变量

2）只有函数执行会产生私有的作用域,比如for(){}、if(){}和switch(){}都不会产生私有作用域

3）在"私有作用域中声明的变量(var 声明)"和"函数的形参"都是私有的变量。在私有作用域中，代码执行的时保遇到了一个变量，首先我们需要确定它是否为私有的变量，如果是私有的变量，那么和外面的没有在何的关系；如果不是私有的，则往当前作用域的上级作用域进行查找，如果上级作用域也没有则继续查找，一直找到window为止，这就是作用域链。

我们举个例子来区别私有变量和全局变量：

//=>变量提升：var a;var b;var c;test=AAAFFF111；
var a=10,b=11,c=12;
function test(a){
//=>私有作用域：a=10 var b；
a=1；//=>私有变量a=1
var b=2；//=>私有变量b=2
c=3；//=>全局变量c=3
}
test(10);
console.log(a);//10
console.log(b);//11
console.log(c);//3

判断是否是私有变量一个标准就是是否是在函数中var声明的变量和函数的形参都是私有的变量。本道题目在test函数中a是形参和var b定义的变量b都是私有变量。

2.函数传参

这是因为当函数执行的时候,首先会形成一个新的私有的作用域，然后按照如下的步骤执行：

1）如果有形参，先给形参赋值

2）进行私有作用域中的预解释

3）私有作用域中的代码从上到下执行

我们来看一道例题

var total=0；
function fn(num1,num2){
console.log(total);//->undefined 外面修改不了私有的
var total=num1 +num2；
console.log(total);//->300
}
fn(100,200);
console.log(total);//->0 私有的也修改不了外面的

3.JS中内存的分类

• 栈内存：用来提供一个供JS代码执行的环境，即作用域（全局作用域/私有的作用域）
• 堆内存：用来存储引用数据类型的值。对象存储的是属性名和属性值，函数存储的是代码字符串。

三、全局作用域下带var和不带var的区别

我们先来看以下两个例子：

//例题1
console.log(num);//->undefined
var num=12;
//例题2
console.log(num2);//->Uncaught ReferenceError:num2 is not defined 
num2=12;//不能预解释

当你看到var num=12时，可能会认为只是个声明。但JavaScript实际上会将其看成两条声明语句：var num;和 num=12;第一个定义声明是在预解释阶段进行的。第二个赋值声明会被留在原地等待执行阶段。num2=12 相当于给window增加了一个叫做num2的属性名，属性值是12；而var num=12 首先它相当于给全局作用域增加了一个全局变量num，它也相当于给window增加了一个属性名num2，属性值是12。两者最大区别：带var的可以进行预解释，所以在赋值的前面执行不会报错；不带var的是不能进行预解释的，在前面执行会报错；

接下来我们举例说明：

//例题1
var total=0;
function fn(){
console.log(total);//undefined
var total=100;
}
fn();
console.log(total);//0
//例题2
var total=0;
function fn(){
console.log(total);//0
total=100;
}
fn();
console.log(total);//100

例题1中带var变量在私有作用域中可以预解释，所以第一个console打出来的值为undefined。私有作用域中出现的一个变量不是私有的，则往上级作用域进行查找，上级没有则继续向上查找，一直找到window为止，例题2中不带var变量不是私有的，所以往上级找

四、预解释五大毫无节操的表现

1.预解释的时候不管你的条件是否成立，都要把带var的进行提前的声明。

请看下面这道例题：

if（!("num" in window)){
var num=12；//这句话会被提到大括号之外的全局作用域：var num;->window.num； 
}
console.log(num);//undefined

2.预解释的时候只预解释”=”左边的，右边的值，不参与预解释

请看下面这道例题：

fn()；//报错
var fn=function (){ //window下的预解释：var fn;
console.log("ok");
}；

3.自执行函数：定义和执行一起完成了。

自执行函数定义的那个function在全局作用域下不进行预解释，当代码执行到这个位置的时候定义和执行一起完成了。常见有以下几种形式：

(function(num){})(10);
~function(num){}(10);
+function(num){}(10);
-function(num){}(10);
！function(num){}(10);

4.函数体中return下面的代码虽然不再执行了，但是需要进行预解释；return后面跟着的都是我们返回的值，所以不进行预解释；

function fn(){
//预解释：var num;
console.log(num);//->undefined
return function(){};
var num=100;
}

5.函数声明和变量声明都会被提升。但是一个值得注意的细节（这个细节可以出现在有多个“重复”声明的代码中）是函数会首先被提升，然后才是变量。在预解释的时候，如果名字已经声明过了，不需要从新的声明，但是需要重新的赋值；

我们先来看下两个简单的例子：

//例题1
 function a() {}
 var a
 console.log(typeof a)//'function'
//例题2
 var c=1
 function c(c) {
 console.log(c)
 var c=3
 }
 c(2)//Uncaught TypeError: c is not a function

当遇到存在函数声明和变量声明都会被提升的情况，函数声明优先级比较高，最后变量声明会被函数声明所覆盖，但是可以重新赋值,所以上个例子可以等价为

function c(c) {
console.log(c)
var c=3
}
c=1
c(2)

接下来我们看下两道比较复杂的题目:

//例题3
fn();
function fn(){console.log(1);};
fn();
var fn=10;
fn();
function fn(){console.log(2);};
fn();

1.一开始预解释，函数声明和赋值一起来，fn 就是function fn(){console.log(1);}；遇到var fn=10;不会重新再声明，但是遇到function fn(){console.log(2);}就会从重新赋值，所以一开始fn()的值就是2

2.再执行fn();值不变还是2

3.fn重新赋值为10，所以运行fn()时报错，接下去的语句就没再执行。

//例题4
alert(a);
a();
var a=3;
function a(){
alert(10)
}
alert(a);
a=6;
a()

1.函数声明优先于变量声明，预解释时候，函数声明和赋值一起来，a就是function a(){alert(10)}，后面遇到var a=3，也无需再重复声明，所以先弹出function a(){alert(10)}

2.a()，执行函数，然后弹出10

3.接着执行了var a=3; 所以alert(a)就是显示3

4.由于a不是一个函数了，所以往下在执行到a()的时候， 报错。

对前端的技术，架构技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的架构师学习资料

知识体系已整理好，欢迎免费领取。还有面试视频分享可以免费获取。关注我，可以获得没有的架构经验哦！！