在JavaScript中，用var申明的變量實(shí)際上是有作用域的。

如果一個(gè)變量在函數(shù)體內(nèi)部申明，則該變量的作用域?yàn)檎麄€(gè)函數(shù)體，在函數(shù)體外不可引用該變量：

'use strict';

function foo() {
  var x = 1;
  x = x + 1;
}

x = x + 2; // ReferenceError! 無(wú)法在函數(shù)體外引用變量x

如果兩個(gè)不同的函數(shù)各自申明了同一個(gè)變量，那么該變量只在各自的函數(shù)體內(nèi)起作用。換句話說(shuō)，不同函數(shù)內(nèi)部的同名變量互相獨(dú)立，互不影響：

'use strict';

function foo() {
  var x = 1;
  x = x + 1;
}

function bar() {
  var x = 'A';
  x = x + 'B';
}

由于JavaScript的函數(shù)可以嵌套，此時(shí)，內(nèi)部函數(shù)可以訪問(wèn)外部函數(shù)定義的變量，反過(guò)來(lái)則不行：

'use strict';

function foo() {
  var x = 1;
  function bar() {
    var y = x + 1; // bar可以訪問(wèn)foo的變量x!
  }
  var z = y + 1; // ReferenceError! foo不可以訪問(wèn)bar的變量y!
}

如果內(nèi)部函數(shù)和外部函數(shù)的變量名重名怎么辦？

'use strict';

function foo() {
  var x = 1;
  function bar() {
    var x = 'A';
    alert('x in bar() = ' + x); // 'A'
  }
  alert('x in foo() = ' + x); // 1
  bar();
}

這說(shuō)明JavaScript的函數(shù)在查找變量時(shí)從自身函數(shù)定義開(kāi)始，從“內(nèi)”向“外”查找。如果內(nèi)部函數(shù)定義了與外部函數(shù)重名的變量，則內(nèi)部函數(shù)的變量將“屏蔽”外部函數(shù)的變量。

變量提升

JavaScript的函數(shù)定義有個(gè)特點(diǎn)，它會(huì)先掃描整個(gè)函數(shù)體的語(yǔ)句，把所有申明的變量“提升”到函數(shù)頂部：

'use strict';

function foo() {
  var x = 'Hello, ' + y;
  alert(x);
  var y = 'Bob';
}

foo();

雖然是strict模式，但語(yǔ)句var x = 'Hello, ' + y;并不報(bào)錯(cuò)，原因是變量y在稍后申明了。但是alert顯示Hello, undefined，說(shuō)明變量y的值為undefined。這正是因?yàn)镴avaScript引擎自動(dòng)提升了變量y的聲明，但不會(huì)提升變量y的賦值。

對(duì)于上述foo()函數(shù)，JavaScript引擎看到的代碼相當(dāng)于：

function foo() {
  var y; // 提升變量y的申明
  var x = 'Hello, ' + y;
  alert(x);
  y = 'Bob';
}

由于JavaScript的這一怪異的“特性”，我們?cè)诤瘮?shù)內(nèi)部定義變量時(shí)，請(qǐng)嚴(yán)格遵守“在函數(shù)內(nèi)部首先申明所有變量”這一規(guī)則。最常見(jiàn)的做法是用一個(gè)var申明函數(shù)內(nèi)部用到的所有變量：

function foo() {
  var
    x = 1, // x初始化為1
    y = x + 1, // y初始化為2
    z, i; // z和i為undefined
  // 其他語(yǔ)句:
  for (i=0; i<100; i++) {
    ...
  }
}

全局作用域

不在任何函數(shù)內(nèi)定義的變量就具有全局作用域。實(shí)際上，JavaScript默認(rèn)有一個(gè)全局對(duì)象window，全局作用域的變量實(shí)際上被綁定到window的一個(gè)屬性：

'use strict';

var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'

因此，直接訪問(wèn)全局變量course和訪問(wèn)window.course是完全一樣的。

你可能猜到了，由于函數(shù)定義有兩種方式，以變量方式var foo = function () {}定義的函數(shù)實(shí)際上也是一個(gè)全局變量，因此，頂層函數(shù)的定義也被視為一個(gè)全局變量，并綁定到window對(duì)象：

'use strict';

function foo() {
  alert('foo');
}

foo(); // 直接調(diào)用foo()
window.foo(); // 通過(guò)window.foo()調(diào)用

進(jìn)一步大膽地猜測(cè)，我們每次直接調(diào)用的alert()函數(shù)其實(shí)也是window的一個(gè)變量：

'use strict';

window.alert('調(diào)用window.alert()');
// 把a(bǔ)lert保存到另一個(gè)變量:
var old_alert = window.alert;
// 給alert賦一個(gè)新函數(shù):
window.alert = function () {}

// 恢復(fù)alert:
window.alert = old_alert;
alert('又可以用alert()了!');

這說(shuō)明JavaScript實(shí)際上只有一個(gè)全局作用域。任何變量（函數(shù)也視為變量），如果沒(méi)有在當(dāng)前函數(shù)作用域中找到，就會(huì)繼續(xù)往上查找，最后如果在全局作用域中也沒(méi)有找到，則報(bào)ReferenceError錯(cuò)誤。

名字空間

全局變量會(huì)綁定到window上，不同的JavaScript文件如果使用了相同的全局變量，或者定義了相同名字的頂層函數(shù)，都會(huì)造成命名沖突，并且很難被發(fā)現(xiàn)。

減少?zèng)_突的一個(gè)方法是把自己的所有變量和函數(shù)全部綁定到一個(gè)全局變量中。例如：

// 唯一的全局變量MYAPP:
var MYAPP = {};

// 其他變量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函數(shù):
MYAPP.foo = function () {
  return 'foo';
};

把自己的代碼全部放入唯一的名字空間MYAPP中，會(huì)大大減少全局變量沖突的可能。

許多著名的JavaScript庫(kù)都是這么干的：jQuery，YUI，underscore等等。

局部作用域

由于JavaScript的變量作用域?qū)嶋H上是函數(shù)內(nèi)部，我們?cè)?code>for循環(huán)等語(yǔ)句塊中是無(wú)法定義具有局部作用域的變量的：

'use strict';

function foo() {
  for (var i=0; i<100; i++) {
    //
  }
  i += 100; // 仍然可以引用變量i
}

為了解決塊級(jí)作用域，ES6引入了新的關(guān)鍵字let，用let替代var可以申明一個(gè)塊級(jí)作用域的變量：

'use strict';

function foo() {
  var sum = 0;
  for (let i=0; i<100; i++) {
    sum += i;
  }
  i += 1; // SyntaxError
}

常量

由于var和let申明的是變量，如果要申明一個(gè)常量，在ES6之前是不行的，我們通常用全部大寫的變量來(lái)表示“這是一個(gè)常量，不要修改它的值”：

var PI = 3.14;

ES6標(biāo)準(zhǔn)引入了新的關(guān)鍵字const來(lái)定義常量，const與let都具有塊級(jí)作用域：

'use strict';

const PI = 3.14;
PI = 3; // 某些瀏覽器不報(bào)錯(cuò)，但是無(wú)效果！
PI; // 3.14

最新評(píng)論