如何理解javascript詞法作用域？

最近在看詞法作用域，遇到一個(gè)例子不是很理解
var value = 1;
function foo() {
    console.log(value);
}
function bar() {
    var value = 2;
    foo();
}
bar(); //結(jié)果是1


function bar() {
    var value = 2;
    function foo() {
         console.log(value);
    }
    foo();
}

bar();//結(jié)果是2

第一個(gè)例子，在執(zhí)行foo函數(shù)時(shí)先是從foo函數(shù)內(nèi)部查找局部變量value，
因?yàn)閒oo函數(shù)中沒有value變量所有又向上一層查找，此時(shí)查找的是全局
變量value=1，不太明白的是foo函數(shù)的上一層為什么不是bar函數(shù)？這兩個(gè)例子
有什么區(qū)別嗎？

回答

編輯回答

櫻花霓

因?yàn)榈谝粋€(gè)foo是在外面定義的，它的上一層不是bar

2017年1月5日 22:29

編輯回答

老梗

這里我的一些理解和解釋，希望能對你有所幫助！

針對例一

1、解釋：foo和bar是兄弟關(guān)系，沒用從屬關(guān)系，但是可以互相調(diào)用
2、原例代碼解釋：

var value = 1;
function foo() {
    console.log(value);
}
function bar() {
    var value = 2; //在bar函數(shù)內(nèi)容重新定義了一個(gè)局部變量，這兒并沒有改變?nèi)肿兞縱alue的值
    foo(); //調(diào)用函數(shù)foo,首先在自己函數(shù)內(nèi)部查找value值，沒找到往上一層(這是就是全局)找，由于bar內(nèi)部沒能改變?nèi)汁h(huán)境下的值，所以此時(shí)的值仍為1
}
bar(); //結(jié)果是1

3、代碼舉例：

3.1、在bar內(nèi)部改變?nèi)汁h(huán)境下的值
```
var value = 1;
function foo() {
    console.log(value);
}
function bar() {
    value = 2;  //去掉var聲明，此時(shí)就是對全局環(huán)境下value值進(jìn)行了重新賦值
    foo();
}
bar(); //結(jié)果是2
```

3.2、測試作用域
```
var value = 1;
function foo() {
    console.log(test); //在這兒獲取bar內(nèi)部的局部變量肯定不存在的
}
function bar() {
    var test = 2; //這是一個(gè)局部變量
    foo();
}
bar(); //報(bào)錯(cuò)，test is not defined;
```

針對例二

1、解釋：bar和foo是父子關(guān)系，子作用域當(dāng)然可以打印父作用域下的變量
2、原例代碼解釋：

var value = 1;
function bar() {
    var value = 2;
    function foo() {
         console.log(value);
    }
    foo(); //調(diào)用時(shí)，先在foo內(nèi)部找，沒找到，去父作用域bar找，找到了，輸出value的值，值為2，如果bar也沒有找到，接著往上找，知道找到或者確認(rèn)不存在而報(bào)錯(cuò)為止
}
bar();//結(jié)果是2

3、代碼舉例：

3.1、去掉bar內(nèi)部的value聲明和賦值
```
var value = 1;
function bar() {
    function foo() {
         console.log(value);
    }
    foo(); //此時(shí)會去找最外面那個(gè)value值了
}
bar();//結(jié)果是1
```
3.2、在foo內(nèi)部再加一層復(fù)制
```
var value = 1;
function bar() {
    var value = 2;
    function foo() {
        var value = 3;
         console.log(value);
    }
    foo(); //此時(shí)會自己的作用域就用相應(yīng)的變量值，就打印自己的值，不往上尋找
}
bar();//結(jié)果是3
```