所謂的作用域，可以簡單理解為一個可以讀、寫的范圍(區域),有些js經驗的同學可能會說:"js沒有塊級作用域",js除了全局作用域外，只有函數可以創建作用域。作用域的一個好處就是可以隔離變量。

我們通過一些例子來幫助我們理解js中的作用域。

 alert(a); var a = 1; 

如果對作用域一點不了解的同學可能會說 alert的是1或者報錯；但實際上是undefined；

說到這里，我們首先說一下js逐行解析代碼之前做的一些準備工作，

js在逐行讀代碼之前，會做一些“預解析”工作，會先提前找到一些”小東西”，當然”js解析器“不會隨便找一些數據的，它會根據var,function,參數來找。

”js解析器“它比較”懶“，在正式運行代碼之前都會給var聲明的變量賦值為undefined，也就是var a = undefined；會把整個函數看作一個代碼塊，不去管里邊有多少代碼。參數等到后邊例子中會說。

當所有準備工作都做好后，“JS解析器”就開始逐行執行代碼了，現在我們來分析開始的這個例子就很容易明白為什么是undefined了。

再來看下邊這個例子

 alert(a); var a = 1; alert(a); var a = 2; alert(a); 

我們來一點點分析這個

首先 ”預解析“: 解析器會找var

讀到第二行時 a = undefined；

讀到第四行時 依然 a = undefined；

正式逐行執行代碼:

第一行 alert:undefined　

第二行 a = 1;

第三行 alert:1;

第五行 alert:2

接著看下邊這個例子

 alert(a);  var a = 1; alert(a);  function a (){ alert(2); } alert(a);  var a = 3;  alert(a);  function a (){ alert(4); } alert(a);

我們依然來一點點分析這個

首先 ”預解析“: 解析器會找var function；

讀到第二行時 a = undefined；

讀到第四行時 a = function a (){ alert(2);} //所有的函數，在正式運行代碼之前，都是整個函數塊;變量遇到重名的,只留一個變量,如果變量和函數重名，就只留下函數。

讀到第六行時，a = function a (){ alert(2);}

讀到第八行時，a = function a (){ alert(4);}

正式逐行執行代碼:

第一行 alert: function a (){ alert(4);}　

第二行 a = 1; //表達式可以修改預解析的值！

第三行 alert:1;

第四行 函數沒有調用，略過;

第五行 alert:1；

第六行 a = 3;

第七行 alert:3

第八行 函數沒有調用，略過;

第九行 alert:3

如圖所示：

繼續看例子：

var a = 1;function fn1(){ alert(a); //undefined    var a = 2;}fn1();alert(a); //1

首先 ”預解析“: 解析器會找var function

讀到第一行時 a = undefined；

讀到第二行時 fn1 = function fn1 (){alert(2);var a = 2;}

正式逐行執行代碼: 第一行 a = 1;

第六行 函數調用，進入函數作用域 在函數作用域內依舊是先預解析，再逐行執行

　　函數內預解析：a = undefined；

　　執行：alert:undefined;

　　a = 2; //此時的a僅為函數作用域中的a，不會影響全局中的a

函數執行完畢，回到全局作用域；

第七行 alert:1;

繼續：

var a = 1;function fn1(){ alert(a); //1   a = 2;}fn1();alert(a); //2

這個例子上邊那個例子唯一的區別就是函數中的a沒有var，只分析其中關鍵的地方

在函數作用域中 第三行alert(a),由于函數中沒有var a，所以"解析器"會到函數的作用域的上一級作用域去尋找a(作用域上下級關系的確定就看函數是在哪個作用域下創建的,在哪個作用域下創建，就是哪個作用域的下級)，此時函數的上一級是全局作用域，在全局作用域中，a = 1,所以此時第三行 alert:1,接著第四行，a = 2賦值，依然是函數作用域中沒有a, 所以在上一級作用域，也就是全局作用域中找到a，修改全局作用域中的a， 所以會使全局作用域中的a = 2， 因此第七行 alert:2；

這點要理解清楚，注意有無var的區別。

接著來：

 var a = 1; function fn1(a){ alert(a); //undefined  a = 2; } fn1(); alert(a); // 1

這個例子和上一個的區別就是多了個參數，參數的作用相當于局部變量，也就是在函數中預解析會有var a = undefined，所以第三行 alert:undefined，第四行 a = 2 改的是函數作用域中的a，不影響全局中的a，第七行alert:1；

接著：

var a = 1;function fn1(a){alert(a); // 1a = 2;}fn1(a);alert(a); // 1

這個例子又與上一個有些區別，在第六行函數調用時傳了個實參進去，第六行函數實參的a是全局變量a = 1的1，函數執行時，第二行 a = 1,所以第三行alert:1，第七行alert:1。

注意這幾個例子之間的區別，別混淆了。

再來一個：

var a = 1;function en(){var a = 2;fn();}function fn(){alert(a); //1}en();

fn中的a未聲明，要到創建這個函數的那個作用域中取值――是“創建”，而不是“調用”這個函數的作用域中。

PS：JavaScript中的作用域和上下文概念

javascript中的作用域(scope)和上下文(context)是這門語言的獨到之處，這部分歸功于他們帶來的靈活性。每個函數有不同的變量上下文和作用域。這些概念是javascript中一些強大的設計模式的后盾。然而這也給開發人員帶來很大困惑。下面全面揭示了javascript中的上下文和作用域的不同，以及各種設計模式如何使用他們。

上下文 vs 作用域

首先需要澄清的問題是上下文和作用域是不同的概念。多年來我注意到許多開發者經常將這兩個術語混淆，錯誤的將一個描述為另一個。平心而論，這些術語變得非常混亂不堪。

每個函數調用都有與之相關的作用域和上下文。從根本上說，范圍是基于函數(function-based)而上下文是基于對象(object-based)。換句話說，作用域是和每次函數調用時變量的訪問有關，并且每次調用都是獨立的。上下文總是關鍵字 this 的值，是調用當前可執行代碼的對象的引用。

以上所述是小編給大家介紹的javascript中的作用域(推薦)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！