（1）作用域

一個(gè)變量的作用域（scope）是程序源代碼中定義的這個(gè)變量的區(qū)域。

1. 在JS中使用的是詞法作用域（lexical scope)

不在任何函數(shù)內(nèi)聲明的變量（函數(shù)內(nèi)省略var的也算全局）稱(chēng)作全局變量（global scope）
在函數(shù)內(nèi)聲明的變量具有函數(shù)作用域（function scope），屬于局部變量

局部變量?jī)?yōu)先級(jí)高于全局變量

var name="one";
function test(){
 var name="two";
 console.log(name); //two
}
test();

函數(shù)內(nèi)省略var的，會(huì)影響全局變量，因?yàn)樗鼘?shí)際上已經(jīng)被重寫(xiě)成了全局變量

var name="one";
function test(){
 name="two";
 
}
test();
console.log(name); //two

函數(shù)作用域，就是說(shuō)函數(shù)是一個(gè)作用域的基本單位，js不像c/c++那樣具有塊級(jí)作用域 比如 if for 等

function test(){
 for(var i=0;i<10;i++){
  if(i==5){
   var name = "one";
  }
 }
 console.log(name); //one
}

test(); //因?yàn)槭呛瘮?shù)級(jí)作用域，所以可以訪問(wèn)到name="one"

當(dāng)然了，js里邊還使用到了高階函數(shù)，其實(shí)可以理解成嵌套函數(shù)

function test1(){
 var name = "one";
 return function (){
  console.log(name);
 }
}
test1()();

test1()之后將調(diào)用外層函數(shù)，返回了一個(gè)內(nèi)層函數(shù)，再繼續(xù)()，就相應(yīng)調(diào)用執(zhí)行了內(nèi)層函數(shù)，所以就輸出 ”one"
嵌套函數(shù)涉及到了閉包，后面再談..這里內(nèi)層函數(shù)可以訪問(wèn)到外層函數(shù)中聲明的變量name，這就涉及到了作用域鏈機(jī)制

2. JS中的聲明提前

js中的函數(shù)作用域是指在函數(shù)內(nèi)聲明的所有變量在函數(shù)體內(nèi)始終是可見(jiàn)的。并且，變量在聲明之前就可以使用了，這種情況就叫做聲明提前（hoisting)
tip:聲明提前是在js引擎預(yù)編譯時(shí)就進(jìn)行了，在代碼被執(zhí)行之前已經(jīng)有聲明提前的現(xiàn)象產(chǎn)生了

比如

var name="one";
function test(){
 console.log(name); //undefined
 var name="two";
 console.log(name); //two
}

test();

上邊就達(dá)到了下面的效果

var name="one";
function test(){
 var name;
 console.log(name); //undefined
 name="two";
 console.log(name); //two
}

test();

再試試把var去掉？這是函數(shù)內(nèi)的name已經(jīng)變成了全局變量，所以不再是undefined

var name="one";
function test(){
 console.log(name); //one
 name="two";
 console.log(name); //two
}

test();

3. 值得注意的是，上面提到的都沒(méi)有傳參數(shù)，如果test有參數(shù)，又如何呢？

function test(name){
 console.log(name); //one
 name="two";
 console.log(name); //two
}

var name = "one";
test(name);
console.log(name); // one

之前說(shuō)過(guò)，基本類(lèi)型是按值傳遞的，所以傳進(jìn)test里面的name實(shí)際上只是一個(gè)副本，函數(shù)返回之后這個(gè)副本就被清除了。
千萬(wàn)不要以為函數(shù)里邊的name="two"把全局name修改了，因?yàn)樗鼈兪莾蓚€(gè)獨(dú)立的name

（2）作用域鏈

上面提到的高級(jí)函數(shù)就涉及到了作用域鏈

function test1(){
 var name = "one";
 return function (){
  console.log(name);
 }
}
test1()();

1. 引入一大段話來(lái)解釋?zhuān)?br /> 每一段js代碼（全局代碼或函數(shù)）都有一個(gè)與之關(guān)聯(lián)的作用域鏈（scope chain）。

這個(gè)作用域鏈?zhǔn)且粋€(gè)對(duì)象列表或者鏈表，這組對(duì)象定義了這段代碼中“作用域中”的變量。

當(dāng)js需要查找變量x的值的時(shí)候（這個(gè)過(guò)程稱(chēng)為變量解析（variable resolution）），它會(huì)從鏈的第一個(gè)對(duì)象開(kāi)始查找，如果這個(gè)對(duì)象有一個(gè)名為x的屬性，則會(huì)直接使用這個(gè)屬性的值，如果第一個(gè)對(duì)象中沒(méi)有名為x的屬性，js會(huì)繼續(xù)查找鏈上的下一個(gè)對(duì)象。如果第二個(gè)對(duì)象依然沒(méi)有名為x的屬性，則會(huì)繼續(xù)查找下一個(gè)，以此類(lèi)推。如果作用域鏈上沒(méi)有任何一個(gè)對(duì)象含有屬性x，那么就認(rèn)為這段代碼的作用域鏈上不存在x，并最終拋出一個(gè)引用錯(cuò)誤（ReferenceError）異常。

2. 作用域鏈舉例：

在js最頂層代碼中（也就是不包括任何函數(shù)定義內(nèi)的代碼），作用域鏈由一個(gè)全局對(duì)象組成。

在不包含嵌套的函數(shù)體內(nèi)，作用域鏈上有兩個(gè)對(duì)象，第一個(gè)是定義函數(shù)參數(shù)和局部變量的對(duì)象，第二個(gè)是全局對(duì)象。

在一個(gè)嵌套的函數(shù)體內(nèi)，作用域上至少有三個(gè)對(duì)象。

3. 作用域鏈創(chuàng)建規(guī)則：

當(dāng)定義一個(gè)函數(shù)時(shí)（注意，是定義的時(shí)候就開(kāi)始了），它實(shí)際上保存一個(gè)作用域鏈。

當(dāng)調(diào)用這個(gè)函數(shù)時(shí)，它創(chuàng)建一個(gè)新的對(duì)象來(lái)儲(chǔ)存它的參數(shù)或局部變量，并將這個(gè)對(duì)象添加保存至那個(gè)作用域鏈上，同時(shí)創(chuàng)建一個(gè)新的更長(zhǎng)的表示函數(shù)調(diào)用作用域的“鏈”。

對(duì)于嵌套函數(shù)來(lái)說(shuō)，情況又有所變化：每次調(diào)用外部函數(shù)的時(shí)候，內(nèi)部函數(shù)又會(huì)重新定義一遍。因?yàn)槊看握{(diào)用外部函數(shù)的時(shí)候，作用域鏈都是不同的。內(nèi)部函數(shù)在每次定義的時(shí)候都要微妙的差別---在每次調(diào)用外部函數(shù)時(shí)，內(nèi)部函數(shù)的代碼都是相同的，而且關(guān)聯(lián)這段代碼的作用域鏈也不相同。

（tip: 把上面三點(diǎn)理解好，記住了，最好還要能用自己的話說(shuō)出來(lái)，不然就背下來(lái)，因?yàn)槊嬖嚬倬椭苯訂?wèn)你：請(qǐng)描述一下作用域鏈...)

舉個(gè)作用域鏈的實(shí)用例子：

var name="one";
function test(){
 var name="two";
 function test1(){
  var name="three";
  console.log(name); //three
 }
 function test2(){
  console.log(name); // two
 }
 
 test1();
 test2();
}

test();

上邊是個(gè)嵌套函數(shù)，相應(yīng)的應(yīng)該是作用域鏈上有三個(gè)對(duì)象
那么在調(diào)用的時(shí)候，需要查找name的值，就在作用域鏈上查找

當(dāng)成功調(diào)用test1()的時(shí)候，順序?yàn)?test1()->test()->全局對(duì)象window 因?yàn)樵趖est1()上就找到了name的值three，所以完成搜索返回
當(dāng)成功調(diào)用test1()的時(shí)候，順序?yàn)?test2()->test()->全局對(duì)象window 因?yàn)樵趖est2()上沒(méi)找到name的值，所以找test()中的，找到了name的值two,就完成搜索返回

還有一個(gè)例子有時(shí)候我們會(huì)犯錯(cuò)的，面試的時(shí)候也經(jīng)常被騙到。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function buttonInit(){
  for(var i=1;i<4;i++){
    var b=document.getElementById("button"+i);
    b.addEventListener("click",function(){ 
      alert("Button"+i); //都是 Button4
    },false);
  }
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>

為什么？
根據(jù)作用域鏈中變量的尋找規(guī)則：

b.addEventListener("click",function(){ 
      alert("Button"+i);
    },false);

這里有一個(gè)函數(shù)，它是匿名函數(shù)，既然是函數(shù)，那就在作用域鏈上具有一個(gè)對(duì)象，這個(gè)函數(shù)里邊使用到了變量i，它自然會(huì)在作用域上尋找它。
查找順序是 這個(gè)匿名函數(shù) -->外部的函數(shù)buttonInit() -->全局對(duì)象window

匿名函數(shù)中找不到i,自然跑到了buttonInit(), ok,在for中找到了，

這時(shí)注冊(cè)事件已經(jīng)結(jié)束了，不要以為它會(huì)一個(gè)一個(gè)把i放下來(lái)，因?yàn)楹瘮?shù)作用域之內(nèi)的變量對(duì)作用域內(nèi)是一直可見(jiàn)的，就是說(shuō)會(huì)保持到最后的狀態(tài)

當(dāng)匿名函數(shù)要使用i的時(shí)候，注冊(cè)事件完了，i已經(jīng)變成了4，所以都是Button4

那怎么解決呢？

給它傳值進(jìn)去吧，每次循環(huán)時(shí)，再使用一個(gè)匿名函數(shù)，把for里邊的i傳進(jìn)去，匿名函數(shù)的規(guī)則如代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function buttonInit(){
  for(var i=1;i<4;i++){
    (function(data_i){
    var b=document.getElementById("button"+data_i);
    b.addEventListener("click",function(){ 
      alert("Button"+data_i);
    },false);
    })(i);
  }
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>

這樣就可以 Button1..2..3了

4.上述就是作用域鏈的基本描述，另外，with語(yǔ)句可用于臨時(shí)拓展作用域鏈（不推薦使用with）

語(yǔ)法形如：

with(object)

statement

這個(gè)with語(yǔ)句，將object添加到作用域鏈的頭部，然后執(zhí)行statement,最后把作用域鏈恢復(fù)到原始狀態(tài)

簡(jiǎn)單用法：

比如給表單中各個(gè)項(xiàng)的值value賦值

一般可以我們直接這樣

var f = document.forms[0];
f.name.value = "";
f.age.value = "";
f.email.value = "";

引入with后(因?yàn)槭褂脀ith會(huì)產(chǎn)生一系列問(wèn)題，所以還是使用上面那張形式吧）

with(document.forms[0]){
f.name.value = "";
f.age.value = "";
f.email.value = "";
}

另外，假如 一個(gè)對(duì)象o具有x屬性，o.x = 1;
那么使用

with(o){
 x = 2;
}

就可以轉(zhuǎn)換成 o.x = 2;
假如o沒(méi)有定義屬性x，它的功能就只是相當(dāng)于 x = 2; 一個(gè)全局變量罷了。

因?yàn)閣ith提供了一種讀取o的屬性的快捷方式，但他并不能創(chuàng)建o本身沒(méi)有的屬性。

要理解變量的作用域范圍就得先理解作用域鏈
用var關(guān)鍵字聲明一個(gè)變量時(shí)，就是為該變量所在的對(duì)象添加了一個(gè)屬性。
作用域鏈：由于js的變量都是對(duì)象的屬性，而該對(duì)象可能又是其它對(duì)象的屬性，而所有的對(duì)象都是window對(duì)象的屬性，所以這些對(duì)象的關(guān)系可以看作是一條鏈
鏈頭就是變量所處的對(duì)象，鏈尾就是window對(duì)象

看下面的代碼：