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

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

全局作用域

第一種作用域是全局作用域。它很容易定義。如果一個(gè)變量或函數(shù)是_全局的_，那么在程序中的任何地方都可以訪問到它們。在瀏覽器中，全局作用域是 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() 中被訪問，如果我們?cè)噲D在 myFunc() 外面訪問 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)致無法預(yù)料的副作用。

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

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

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

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

function outer() {
  var x = 5;

  function inner() {
    console.log( x );
  }

  inner(); // 5
}

但是 .outer() 函數(shù)不能訪問 .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ù)中沒有使用 var 關(guān)鍵字定義的變量不是這個(gè)函數(shù)的局部變量 － JavaScript 會(huì)向上遍歷作用域鏈（最后會(huì)到 window 對(duì)象）尋找之前定義的這個(gè)變量。如果這個(gè)變量沒有定義，則會(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ù)可以訪問在該函數(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ù)中定義，并且沒有暴露在全局作用域中。

bar(); // 1

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

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

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

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