作用域通常是指在指定的時(shí)間內(nèi)，變量存在于一段代碼中。缺乏對(duì)作用域的理解可能會(huì)導(dǎo)致令人沮喪的調(diào)試體驗(yàn)。作用域的概念是關(guān)于我們的代碼中可以訪問(wèn)到哪些確定的函數(shù)或變量，代碼的上下文和執(zhí)行環(huán)境。

在 JavaScript 中，有兩種類型的作用域：全局和局部作用域。

全局作用域

第一種作用域是全局作用域。它很容易定義。如果一個(gè)變量或函數(shù)是_全局的_，那么在程序中的任何地方都可以訪問(wèn)到它們。在瀏覽器中，全局作用域是 window對(duì)象。如果在函數(shù)外面聲明一個(gè)變量，那么這個(gè)變量就存在全局對(duì)象中。例如：

var x = 9;

一旦該變量被定義，則可以被引用為 window.x，因?yàn)樗嬖谟谌謱?duì)象中，我們可以簡(jiǎn)單的引用它為 x。

局部作用域

JavaScript 也可以在每個(gè)函數(shù)體中創(chuàng)建局部作用域。例如：

function myFunc() { var x = 5;}myFunc();console.log( x ); // ReferenceError: x is not defined

由于 x 是在 myFunc() 中初始化，所以它只能在 myFunc() 中被訪問(wèn)，如果我們?cè)噲D在 myFunc() 外面訪問(wèn) x，則會(huì)得到一個(gè)引用錯(cuò)誤。

注意

如果你忘記使用 var 關(guān)鍵字聲明變量，那么這個(gè)變量會(huì)自動(dòng)變成全局變量。所以這段代碼可以運(yùn)行：

function myFunc() { x = 5;}myFunc();console.log( x ); // 5

這是一個(gè)壞主意。全局變量的值可以被程序的任何部分或者其他腳本更改。這是不期望發(fā)生的，因?yàn)樗鼤?huì)導(dǎo)致無(wú)法預(yù)料的副作用。

立即調(diào)用表達(dá)式（IIFE）提供了一個(gè)避免全局變量的方式。你會(huì)看到許多如 jQuery 的 JavaScript 庫(kù)經(jīng)常使用這種方式：

(function() { var jQuery = { /* All my methods go here. */ }; window.jQuery = jQuery;})();

將一切包含在一個(gè)函數(shù)中并立即調(diào)用這個(gè)函數(shù)，這意味著函數(shù)中的所有變量都被綁定在_局部作用域_中。在函數(shù)結(jié)尾部分，你可以通過(guò)將 jQuery 對(duì)象綁定在全局對(duì)象 window 上，將一些方法和屬性公開(kāi)出來(lái)。了解更多關(guān)于立即調(diào)用函數(shù)表達(dá)式，請(qǐng)查看 Ben Alman 的文章 Immediately-Invoked Function Expression。

因?yàn)榫植孔饔糜蛲ㄟ^(guò)函數(shù)而工作，任何在另一個(gè)函數(shù)中定義的函數(shù)都可以訪問(wèn)外部函數(shù)里的變量：

function outer() { var x = 5; function inner() { console.log( x ); } inner(); // 5}

但是 .outer() 函數(shù)不能訪問(wèn) .inner() 函數(shù)中定義的任何變量。

function outer() { var x = 5; function inner() { console.log( x ); var y = 10; } inner(); // 5 console.log( y ); // ReferenceError: y is not defined}

另外，在一個(gè)函數(shù)中沒(méi)有使用 var 關(guān)鍵字定義的變量不是這個(gè)函數(shù)的局部變量 － JavaScript 會(huì)向上遍歷作用域鏈（最后會(huì)到 window 對(duì)象）尋找之前定義的這個(gè)變量。如果這個(gè)變量沒(méi)有定義，則會(huì)在全局中定義該變量，這樣會(huì)導(dǎo)致意外的結(jié)果。

// Functions have access to variables defined in the same scope.var foo = 'hello';var sayHello = function() { console.log( foo );};sayHello(); // 'hello'console.log( foo ); // 'hello'

相同名稱的變量可以在不同作用域中保存不同的值：

var foo = 'world';var sayHello = function() { var foo = 'hello'; console.log( foo );};sayHello(); // 'hello'console.log( foo ); // 'world'

當(dāng)在一個(gè)函數(shù)中引用一個(gè)外部作用域定義的變量，函數(shù)可以訪問(wèn)在該函數(shù)定義之后發(fā)生改變的變量值。

var myFunction = function() { var foo = 'hello'; var myFn = function() { console.log( foo ); }; foo = 'world'; return myFn;};var f = myFunction();f(); // 'world'

這是一個(gè)更復(fù)雜的作用域例子：

(function() { var baz = 1; var bim = function() { console.log( baz ); }; bar = function() { console.log( baz ); };})();

在這個(gè)實(shí)例中，運(yùn)行：

console.log( baz ); // baz is not defined outside of the function

將會(huì)得到一個(gè) ReferenceError。baz 僅僅是在函數(shù)中定義，并且沒(méi)有暴露在全局作用域中。

bar(); // 1

.bar() 是在匿名函數(shù)中定義的， 但是它沒(méi)有使用 var 關(guān)鍵字定義，這意味著它沒(méi)有綁定到局部作用域，而是在全局作用域創(chuàng)建。另外，它可以訪問(wèn) baz 變量，因?yàn)?.bar() 是在與 baz 相同的作用域定義的，所以它可以訪問(wèn)變量 baz，即使函數(shù)外部的其他代碼不可以。

bim(); // ReferenceError: bim is not defined

.bim() 只在函數(shù)中定義的，所以它作為局部變量而不存在于全局對(duì)象中。

以上就是簡(jiǎn)單了解JavaScript作用域的詳細(xì)內(nèi)容，更多關(guān)于JavaScript作用域的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！