一篇文章帶你了解js作用域

xiguadada 發(fā)布于2019-08-21 18:36 / 648人閱讀

摘要：函數(shù)所能訪問的作用域鏈為，在執(zhí)行函數(shù)時(shí)，的值已經(jīng)被修改成了。在執(zhí)行一個(gè)函數(shù)時(shí)，如果我們需要查找某個(gè)變量值，那么會(huì)去這個(gè)函數(shù)被定義時(shí)所在的作用域鏈中查找，一旦找到需要的變量，就會(huì)停止向上查找。參考文章題解作用域

走在前端的大道上

本篇將自己讀過的相關(guān) javascript作用域文章中，對自己有啟發(fā)的章節(jié)片段總結(jié)在這（會(huì)對原文進(jìn)行刪改）,會(huì)不斷豐富提煉總結(jié)更新。

說說你對JavaScript作用域的理解？

JavaScript是門動(dòng)態(tài)語言，跟Java不一樣，JavaScript可以隨意定義全局變量和局部變量，變量會(huì)在該作用域下提升，而且JavaScript沒有塊級(jí)作用域。全局變量就是定義在全局的變量了，局部變量是定義在函數(shù)里的變量，每一個(gè)函數(shù)都是一個(gè)作用域，當(dāng)函數(shù)執(zhí)行時(shí)會(huì)優(yōu)先查找當(dāng)前作用域，然后逐級(jí)向上。定義在 if 和 for 語句里的變量，在大括號(hào)外面也能訪問到，這就是沒有塊級(jí)作用域。

JavaScript是靜態(tài)作用域，在對變量進(jìn)行查詢時(shí)，變量值由函數(shù)定義時(shí)的位置決定，和執(zhí)行時(shí)的所處的作用域無關(guān)。

知道ES6的童鞋可能還會(huì)指出 JavaScript已經(jīng)有塊級(jí)作用域了，而且用 let 和 const 定義的變量不會(huì)提升。

來感受一下

第一題

var a = 1;
function fn() {
  console.log("1:" + a);

  var a = 2;
  bar()
  console.log("2:" + a)
}

function bar() {
  console.log("3:" + a)
}

fn()

第一個(gè) a 打印的值是 1:undefined 而不是 1。因?yàn)槲覀冊?fn() 中定義了變量 a，用 var 定義的變量會(huì)在當(dāng)前作用域提升，但是并不會(huì)攜帶賦給變量的值一起提升。

第二個(gè) a 打印的值是 3:1 而不是 2。因?yàn)楹瘮?shù) bar 是定義在全局作用域中的，所以作用域鏈?zhǔn)?bar -> global，bar 里面沒有定義a，所以就會(huì)順著作用域鏈向上找，然后在 global 中找到了 a。

第三個(gè) a 打印的值是 2:2。這句話所在的作用域鏈?zhǔn)?fn -> global，執(zhí)行 console.log("2:" + a) 會(huì)首先在 fn 作用域里查找 a，找到有 a，并且值為2，所以結(jié)果就是2。
答案：

// 第一題正確答案
1:undefined
3:1
2:2

第二題

var a = 1;
function fn() {
  console.log("1:" + a);
  a = 2
}

a = 3;
function bar() {
  console.log("2:" + a);
}

fn();
bar();

第一個(gè) a 打印的值是 1:3，既不是 undefined 也不是 1。首先， fn 中的 a = 2 是給變量 a 賦值，并沒有定義變量。然后，執(zhí)行函數(shù) fn，在查找變量 a 時(shí)，此時(shí)查找的變量就是全局變量 a，不過此時(shí) a 的值為3。

第二個(gè) a 打印的值是 2:2。函數(shù) bar 所能訪問的作用域鏈為 bar->global，在執(zhí)行函數(shù) bar 時(shí)，a 的值已經(jīng)被修改成了 2。
答案：

// 第二題正確答案
1:3
2:2

知識(shí)點(diǎn)：

在JavaScript中，通過 let 和 const 定義的變量具有塊級(jí)作用域的特性。通過 var 定義的變量會(huì)在它自身的作用域中進(jìn)行提升，而 let 和 const 定義的變量不會(huì)。
每個(gè)JavaScript程序都具有一個(gè)全局作用域，每創(chuàng)建一個(gè)函數(shù)都會(huì)創(chuàng)建一個(gè)作用域。
在創(chuàng)建函數(shù)時(shí)，將這些函數(shù)進(jìn)行嵌套，它們的作用域也會(huì)嵌套，形成作用域鏈，子作用域可以訪問父作用域，但是父作用域不能訪問子作用域。
在執(zhí)行一個(gè)函數(shù)時(shí)，如果我們需要查找某個(gè)變量值，那么會(huì)去這個(gè)函數(shù)被 定義 時(shí)所在的作用域鏈中查找，一旦找到需要的變量，就會(huì)停止向上查找。
“變量的值由函數(shù)定義時(shí)的位置決定”這句話有歧義，準(zhǔn)確說是查找變量時(shí)，是去定義這個(gè)函數(shù)時(shí)所在的作用域鏈查找。

參考文章：
1.題解JavaScript作用域