JavaScript中的作用域和作用域鏈

作用域:

變量所在的上下文,指的是變量在哪些地方可以訪問

對于JavaScript來說有全局作用域但是沒有塊級作用域,在ES6中引入了關鍵字let可以生成塊作用域.見以下代碼:

var value = true
if (value) {
  var age = 18
  console.log(`我今年${age}歲了`)
}
console.log (`我也是${age}歲了哦`)

//輸出  "我今年18歲了"   "我也是18歲了哦"
// 可見在if()中不存在塊級作用域

在這里if()里的變量具有全局作用域,全局皆可使用

var value = true
if (value) {
  let age = 18
  console.log(`我今年${age}歲了`)
}
console.log (`我也是${age}歲了哦`)

/*輸出
  "我今年18歲了"
  "error"
  "ReferenceError: age is not defined*/

在這里使用關鍵字let 使 if () 塊里的變量age產生了塊級作用域,使得它只在這個塊里生效.

JS中有函數作用域,指的是作用域在函數內部。這里一共說了三種作用域,其實可以說是兩種:一種是全局作用域,而是局部作用域(函數作用域、塊級作用域),塊級作用域概念又包括了函數作用域。


簡要說下幾個作用域聲明方式:
  1. 全局作用域:在所有函數外部使用var語句聲明變量或者在聲明變量時忽略var則會隱式轉化為全局變量
  2. 函數作用域: 需要在函數內部使用var 聲明變量才行
  3. 塊級作用域: 在變量名前添加let語句聲明(ES6)

作用域鏈

var a = "你好,我是a";
function scopeChain(a) {
  var b =1;
  function inScope(a) {
     var c = "螞蟻"
     console.log(`大象愛${c}`)
     console.log(`我是最內層的函數,這里也可以使用a: ${a}`)
  }
  console.log(`能使用a嗎?${a}`)
  inScope(a)
}
scopeChain(a)

這里a是全局作用域下的變量,b是函數scopeChain()作用域下的變量,而c是函數scopeChain()里的inScope()函數作用域下的變量。

作用域鏈的前端始終是當前環境作用域下變量對象,逐層往外作用域鏈接,最后端是全局變量環境下的變量,這些變量時鏈接在一起,在解析一個變量時從鏈前端往后端搜索(從內不找外部找),但是有一點值得注意:每個變量的作用域總是從自身聲明的作用域往外找,而不是調用它的地方

var a = 1
function fn1(){
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
function fn2(){
  console.log(a)
}
var fn = fn1()
fn()

 //輸出1

這里就是當fn1() 執行后調用 fn2() 時,發現fn3()作用域下沒有,也就是作用域鏈前端沒有,往外找一層也就是fn1()作用域下進行查找,作用域也就往后端前進了一步,發現還是沒有,繼續往外層作用域查找找到了全局作用域,也就是作用域鏈的最后端,找到了后調用它。

但是對于fn2()來說它需要調用a這個變量,這里也就出現了誤區:在fn3()里有變量a,那么是用的是這個變量a嗎?

  • 但其實fn2()是發現不了這個變量a的,因為fn2()聲明的地方并不在fn3()里,同理fn1()也不是fn2()聲明的地方,所以對于fn2()來說它只發現了全局下的 var a =1 所以調用它并輸出a時也就等于1.

var a = 1
function fn1(){
  function fn2(){
    console.log(a)
  }
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn()

//輸出多少?
  • 由以上的論述可以分析出這段代碼,當fn1()被調用時也就是return fn3 ,也就調用了fn3(),然后fn3()里又是調用fn2(),而fn() 是在fn1()里聲明的,自然也就使用了fn1()里的變量a,又因為a變量在調用前聲明并賦值了,故此輸出為2

var a = 1
function fn1(){

  function fn3(){
    function fn2(){
      console.log(a)
    }
    var a

    fn2()
    a = 4
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn()

//輸出多少?

分析這段代碼,發現與上面代碼不同之處在于先聲明了 ``` var a ``后沒有里脊賦值,在調用了fn2()后再進行的賦值,那么這里應該是多少呢?

  • 這里也就牽涉到了聲明前置,對于fn3()下,當聲明 var a時,也就是執行到了fn3()代碼前,函數聲明和變量聲明會提前至代碼前端,所以這里聲明并沒有影響到輸出值得改變,但是賦值操作是按照程序順序執行的,當調用前,a只聲明沒有賦值,則會輸出undefined。 而具體變量查找是符合作用域鏈的順序來的.

總結如下:

  1. 函數在執行的過程中,先從自己內部找變量
  2. 如果找不到,再從創建當前函數所在的作用域去找, 以此往上
  3. 注意找的是變量的當前的狀態
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容