作用域是JavaScript最重要的概念之一，想要學好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對JavaScript作用域示例詳解的介紹，希望能幫助大家更好的學習JavaScript。

任何程序設計語言都有作用域的概念，簡單的說，作用域就是變量與函數的可訪問范圍，即作用域控制著變量與函數的可見性和生命周期。在JavaScript中，變量的作用域有全局作用域和局部作用域兩種。

一、JavaScript中無塊級作用域

在Java或C#中存在塊級作用域，即：大括號也是一個作用域。

public static void main ()

{

if(1==1){

String name = "seven";

}

System.out.println(name);

}

// 報錯

public static void Main()

{

if(1==1){

string name = "seven";

}

Console.WriteLine(name);

}

// 報錯

在JavaScript語言中無塊級作用域

function Main(){

if(1==1){

var name = 'seven';

}

console.log(name);

}

// 輸出： seven

二、JavaScript采用函數作用域

在JavaScript中每個函數作為一個作用域，在外部無法訪問內部作用域中的變量。

function Main(){

var innerValue = 'seven';

}

Main();

console.log(innerValue);

// 報錯：Uncaught ReferenceError: innerValue is not defined

三、JavaScript的作用域鏈

由于JavaScript中的每個函數作為一個作用域，如果出現函數嵌套函數，則就會出現作用域鏈。

xo = 'alex';

function Func(){

var xo = "seven";

function inner(){

var xo = 'alvin';

console.log(xo);

}

inner();

}

Func();

如上述代碼則出現三個作用域組成的作用域鏈，如果出現作用域鏈后，那么尋找變量時候就會出現順序，對于上述實例：

當執(zhí)行console.log(xo)時，其尋找順序為根據作用域鏈從內到外的優(yōu)先級尋找，如果內層沒有就逐步向上找，直到沒找到拋出異常。

四、JavaScript的作用域鏈執(zhí)行前已創(chuàng)建

JavaScript的作用域在被執(zhí)行之前已經創(chuàng)建，日后再去執(zhí)行時只需要按照作用域鏈去尋找即可。

示例一：

xo = 'alex';

function Func(){

var xo = "seven";

function inner(){

console.log(xo);

}

return inner;

}

var ret = Func();

ret();

// 輸出結果： seven

上述代碼，在函數被調用之前作用域鏈已經存在：

•全局作用域 -> Func函數作用域 -> inner函數作用域

當執(zhí)行【ret();】時，由于其代指的是inner函數，此函數的作用域鏈在執(zhí)行之前已經被定義為：全局作用域 -> Func函數作用域 -> inner函數作用域，所以，在執(zhí)行【ret();】時，會根據已經存在的作用域鏈去尋找變量。

示例二：

xo = 'alex';

function Func(){

var xo = "eirc";

function inner(){

console.log(xo);

}

xo = 'seven';

return inner;

}

var ret = Func();

ret();

// 輸出結果： seven

上述代碼和示例一的目的相同，也是強調在函數被調用之前作用域鏈已經存在：

•全局作用域 -> Func函數作用域 -> inner函數作用域

不同的時，在執(zhí)行【var ret = Func();】時，Func作用域中的xo變量的值已經由 “eric” 被重置為 “seven”，所以之后再執(zhí)行【ret();】時，就只能找到“seven”。

示例三：

xo = 'alex';<br>

function Bar(){

console.log(xo);

}

function Func(){

var xo = "seven";

return Bar;

}

var ret = Func();

ret();

// 輸出結果： alex

上述代碼，在函數被執(zhí)行之前已經創(chuàng)建了兩條作用域鏈：

•全局作用域 -> Bar函數作用域

•全局作用域 -> Func函數作用域

當執(zhí)行【ret();】時，ret代指的Bar函數，而Bar函數的作用域鏈已經存在：全局作用域 -> Bar函數作用域，所以，執(zhí)行時會根據已經存在的作用域鏈去尋找。

五、聲明提前

在JavaScript中如果不創(chuàng)建變量，直接去使用，則報錯：

console.log(xxoo);

// 報錯：Uncaught ReferenceError: xxoo is not defined

JavaScript中如果創(chuàng)建值而不賦值，則該值為 undefined，如：

var xxoo;

console.log(xxoo);

// 輸出：undefined

在函數內如果這么寫：

function Foo(){

console.log(xo);

var xo = 'seven';

}

Foo();

// 輸出：undefined

上述代碼，不報錯而是輸出 undefined，其原因是：JavaScript的函數在被執(zhí)行之前，會將其中的變量全部聲明，而不賦值。所以，相當于上述實例中，函數在“預編譯”時，已經執(zhí)行了var xo；所以上述代碼中輸出的是undefined。

以上所述是小編給大家介紹的JavaScript作用域示例詳解，希望對大家有所幫助