本文主要為大家分享一篇詳解JS的解析順序和作用域，具有很好的參考價值，希望對大家有幫助。一起跟著小編過來看看吧。
一、javascript的解析順序
我們大家所理解的程式碼的執行順序都是從上到下的，但實際上的確不是這樣的。我們來看看下面的程式碼。
1 alert(a);
2 var a = 1;
登入後複製
如果執行順序是從上到下的，在上面彈出一個a，瀏覽器會認為從上到下執行的，那麼當它alert（a）的時候，他就會發現沒有這個東西，那麼他就會報錯，但是實際上他彈出的結果是undefined。傳回值是undefined說明a沒有被定義也就是沒有賦值。下面來來講解一下javascript的解析順序。
1.ES5中有宣告意義的關鍵字
var 會存在變數提升
function 也有宣告變數的作用。
2.解析順序
1.找宣告 var、function 宣告：只是宣告變量，而不包含賦值。
2. 執行
注意：以上兩步驟 都遵循從上至下，執行的時候遇到等號，先看等號的右邊。
注意：當function宣告的變數和var宣告的變數重名時，function的變數權重會比var宣告的高。
下面多来几个例子解析一下就清楚许多了，但是看例子之前要知道一下什么叫作用域。
二、作用域
作用域就是：起作用的范围分为下面两种
1.全局作用域
2.函数作用域
他们两个的区别看下面的例子仔细分析。
三、看几个例子解析一下执行顺序的步骤
1. 第一个例子：
var x = 5;
a();
function a(){
alert(x); var x = 10;
}
alert(x);登入後複製
解析过程
1,.寻找声明 (看全局作用域)
var x;
function a(){}登入後複製
2.执行
x = 5;
a() ------------->执行到这个函数的过程中在重新进行以上两步
1,寻找声明 var x; （函数作用域）
2. 执行
alert(x); 这个x在函数作用域中存在，并且还没有执行到赋值的那一步,那么弹出的东西就是undefined;
x = 10;
alert(x) 这里弹窗是全局变量 5；
所以浏览器弹窗的内容是 undefined 5
2. 第二个例子
a() function a(){ alert(x); var x = 10;}alert(x);登入後複製
解析过程 按照上面的例子一样分析
1. 寻找声明
function a(){}
2.执行
a()------------------------->函数
1.寻找声明
var x;
2.执行
alert(x) 弹出未定义
x = 10；
alert(x); 这里的x会从全局中寻找x，但是发现并没有x，所 以浏览器会 报错 x is not defined x没有被定义
所以浏览器的弹出的内容是 undefined 报错
我相信看了这两个例子的人都对这个解析过程都有了清除的了解，如果还是不太了解，建议重新看一次。
下面介绍几个需要注意的地方， 直接上例子
3. 第三个例子
前面讲到了当function声明的变量和var声明的变量重名时，function的变量权重会比var声明的要高。来一个例子证明一下
alert(a)function a() { alert("函数")}var a = 1; alert(a)登入後複製
解析过程
1.寻找声明
function a(){}
var a;
2. 执行
alert（a） 前面说到了function的声明比var声明的权重高，所有执行这个的时候他会弹出这个 函数块（函数体）
a = 1;
alert(a); 这里弹出的就是 1 了
所以最后的结果就是 函数块 1；
4.第四个例子
子作用域可以向父级作用域找变量，直到全局作用域为止，反之不行。 如果子作用域有同样的变量，那么他就会使用自己的，不会去找爸爸要。
var a = 5;function fn() { alert(a)}fn()登入後複製
解析过程
1.寻找声明
var a;
function fn(){}
2.执行
a = 5;
fn()--------------------------------------> 函数
1.找声明
2.执行
alert(a); 他这里没有a 所以去找爸爸要。 a = 5； 所以弹窗是 5
所以最后结果为 弹窗5
下面看一下爸爸会不会去找儿子要东西
function fn(){ var b = 5; return b; }fn();alert(b);登入後複製
1.寻找声明
function fn(){}
2. 执行
fn（）----------------------------------------> 函数
1.寻找声明
1.var b;
2.执行
return b;
alert(b); //我们看一下返回值是多少 b is not defined 他说b没有被定义，说明父作用域不可以向自作用域去寻找变量。
5. 第五个例子
当一个变量无中生有时，不管从哪个作用域出来的，统统归到window下，下面看两个例子
fn(); alert(a); var a = 0; alert(a); function fn(){ var a = 1; }登入後複製
这一个例子应该可以自己分析了 最后的结果是 undefined 0
我们再来看一下下面这个你会很吃惊
fn() alert(a) var a = 0; alert(a); function fn(){ a = 1; }登入後複製
明明都一样，我吃惊什么 返回值不是还是 undefined 和 0 吗
但是你有没有发现倒数第二行 上面的声明了 下面的没有声明，来解析一波
1.寻找变量
var a;
function fn(){}
2.fn()---------------------------->函数
a = 1; 这个时候就说到了那一点，无中生有的变量，统统归到window下面
所以下面的执行过程
alert(a) 这里的弹窗就是 1 了
a = 0;
alert(a) 弹出 0
所以最后的结果是 1 0
四、严格模式
严格模式下的代码执行时，非常严格
变量不允许无中生有
意义：规范代码开发的流畅，逻辑
"use strict"a = 1；alert(a);
登入後複製
当我们写后面两句代码的时候不会报错和出现问题，但是当我们加上第一句代码的时候，我们在这样写的时候就会报错了。所以我们还是按照规范的标准来,提高自己的能力
五、可能好多人做了上面的例子感觉不太过瘾，下面我再给出几个例子，可以自己去分析分析，我会在最后面给出答案。
1. 第一个例子 // 10 报错
var a = 10;alert(a);a()function a(){ alert(20);}登入後複製
2.第二个例子 undefined 1 0
var a = 0; function fn(){ alert(a); var a = 1; alert(a); } fn(); alert(a);登入後複製
3.第三个例子 当同样的声明同样的名字重复时，后面写的会覆盖前面写的 //2 1 1 3
a() var a = function(){ alert(1) } a(); function a(){ alert(2); } a(); var a = function(){ alert(3); } a()登入後複製
以上是詳解JS的解析順序及作用域的詳細內容。更多資訊請關注PHP中文網其他相關文章！
