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

xiguadada 發布于2019-08-21 18:36 / 645人閱讀

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

走在前端的大道上

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

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

JavaScript是門動態語言，跟Java不一樣，JavaScript可以隨意定義全局變量和局部變量，變量會在該作用域下提升，而且JavaScript沒有塊級作用域。全局變量就是定義在全局的變量了，局部變量是定義在函數里的變量，每一個函數都是一個作用域，當函數執行時會優先查找當前作用域，然后逐級向上。定義在 if 和 for 語句里的變量，在大括號外面也能訪問到，這就是沒有塊級作用域。

JavaScript是靜態作用域，在對變量進行查詢時，變量值由函數定義時的位置決定，和執行時的所處的作用域無關。

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

來感受一下

第一題

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

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

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

fn()

第一個 a 打印的值是 1:undefined 而不是 1。因為我們在 fn() 中定義了變量 a，用 var 定義的變量會在當前作用域提升，但是并不會攜帶賦給變量的值一起提升。

第二個 a 打印的值是 3:1 而不是 2。因為函數 bar 是定義在全局作用域中的，所以作用域鏈是 bar -> global，bar 里面沒有定義a，所以就會順著作用域鏈向上找，然后在 global 中找到了 a。

第三個 a 打印的值是 2:2。這句話所在的作用域鏈是 fn -> global，執行 console.log("2:" + a) 會首先在 fn 作用域里查找 a，找到有 a，并且值為2，所以結果就是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();

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

第二個 a 打印的值是 2:2。函數 bar 所能訪問的作用域鏈為 bar->global，在執行函數 bar 時，a 的值已經被修改成了 2。
答案：

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

知識點：

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

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

GPU云服務器云服務器這篇文章手把手帶你閱讀Netty源碼【附 js作用域和上下文作用域中作用域

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90635.html

【進階1-4期】JavaScript深入之帶你走進內存機制

摘要：引擎對堆內存中的對象進行分代管理新生代存活周期較短的對象，如臨時變量字符串等。內存泄漏對于持續運行的服務進程，必須及時釋放不再用到的內存。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第4天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計劃...

不知名網友 2019-08-23 13:47 評論0 收藏0
一文帶你了解什么是JavaScript 函數式編程？

摘要：前言函數式編程在前端已經成為了一個非常熱門的話題。整個過程就是體現了函數式編程的核心思想通過函數對數據進行轉換。高階函數函數式編程傾向于復用一組通用的函數功能來處理數據，它通過使用高階函數來實現。前言函數式編程在前端已經成為了一個非常熱門的話題。在最近幾年里，我們看到非常多的應用程序代碼庫里大量使用著函數式編程思想。本文將略去那些晦澀難懂的概念介紹，重點展示在 JavaScrip...

acrazing 2019-08-26 10:40 評論0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....

izhuhaodev 2019-08-21 11:44 評論0 收藏0
【進階2-1期】深入淺出圖解作用域鏈和閉包

摘要：本期推薦文章從作用域鏈談閉包，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。推薦理由這是一篇譯文，深入淺出圖解作用域鏈，一步步深入介紹閉包。作用域鏈的頂端是全局對象，在全局環境中定義的變量就會綁定到全局對象中。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周開始前端進階的第二期，本周的主題是作用域閉包，今天是第6天。本...

levius 2019-08-23 13:47 評論0 收藏0
javascript知識點

摘要：模塊化是隨著前端技術的發展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化目前 Vue.js 的火爆不亞于當初的 React，本人對寫代碼有潔癖，代碼也是藝術。此篇是準備篇，工欲善其事，必先利其器。我們先在代...

Karrdy 2019-08-26 11:34 評論0 收藏0