深入理解 Javascript 之作用域

banana_pi 發布于2019-08-23 10:51 / 1178人閱讀

摘要：作用域是門動態語言，跟不一樣，可以隨意定義全局變量和局部變量，變量會在該作用域下提升，而且沒有塊級作用域。一預處理作用域解析的作用域只用兩種，一個是全局的，一個是函數的，也稱為全局作用域和局部作用域局部作用域可以訪問全局作用域。

作用域

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

一、預處理 + 作用域解析

JavaScript 的作用域只用兩種，一個是全局的，一個是函數的，也稱為全局作用域和局部作用域；局部作用域可以訪問全局作用域。但是全局作用域不能訪問局部作用域

有這樣一段代碼

var a = 1;
function fn1(){
    alert(a);
    var a = 2;
}
fn1();
alert(a);

這里先揭曉答案：

第一個 alert(a) 彈出 undefined
第二個 alert(a) 彈出 1

1. 預解析（預編譯）全局作用域（全局詞法環境）

// 全局詞法環境
// 第1行，遇到 var 關鍵字，解析到全局的頭部
a = undefined
// 第2行，遇到 function 關鍵字，解析到全局的頭部
fn1 = function fn1(){
    alert(a);
    var a = 2;
}
// 第3行，沒有遇到關鍵字，不解析
// 第4行，沒有遇到關鍵字，不解析

2. 開始執行代碼

第1行，遇到表達式 a = 1, a 被賦值成 1 
第6行，遇到函數調用 fn1() ,           ---- 開始 預解析（預編譯） 局部-----

3. 預解析（預編譯）局部作用域 (函數詞法環境)

// 第3行，沒有遇到關鍵字，不解析
// 第4行，遇到 var 關鍵字，解析到局部
a = undefined

4. 開始執行局部代碼

第3行，彈出 undefined
第4行，遇到表達式，把局部 a 改成 2

5. 局部執行完成，繼續執行全局

第7行，彈出 1 ，因為全局和局部是兩個獨立的作用域

二、作用域疑惑之處

1. js沒有塊作用域

2. js不是動態作用域,js是靜態作用域

function f(){
  alert(x);
}
function f1() {
  var x = 6;
  f();
}
function f2() {
  var x = 10;
  f();
}

f1();
// 執行會報錯，因此js不是動態作用域哦

二、作用域鏈

var a = 10;

function f() {
  var x = 100;
  function g () {
    // 
  }
  g();
}
f();

作用域鏈解析

1. 創建詞法環境（window）
2. 加入 a 以及 f函數 ，這時候     【f.scope === window】
3. 進入f函數，創建f函數的詞法環境  【f.le => f.scope】
4. 創建f 的詞法環境 
5. 添加x和 g函數 到f函數的詞法環境 【g.scope === f.le】
6. 進入g函數，創建g函數的詞法環境  【g.le => g.scope】

g.le  ->  g->scope  ->  f.le  ->  f.scope  ->  window

三、作用域的本質

var a = 10;

function f() {
  var x = 100;
  function g () {
    // 
    alert(a);
  }
  g();
}
f();

我們在g內部使用了變量a，想要找到a，

首先在g的詞法環境中查找，如果沒找到

到g.scope 也就是 f的詞法環境中查找，如果依舊沒找到

到f.scope 也就是全局詞法環境中查找。

GPU云服務器云服務器深入理解webrtc之aec 深入理解javascript javascript作用域鏈深入理解系列

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

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

【進階2-2期】JavaScript深入之從作用域鏈理解閉包

摘要：使用上一篇文章的例子來說明下自由變量進階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數，也不是局部變量，所以是自由變量。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第7天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計...

simpleapples 2019-08-23 13:47 評論0 收藏0
【進階2-3期】JavaScript深入之閉包面試題解

摘要：閉包面試題解由于作用域鏈機制的影響，閉包只能取得內部函數的最后一個值，這引起的一個副作用就是如果內部函數在一個循環中，那么變量的值始終為最后一個值。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第8天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了...

alanoddsoff 2019-08-23 13:47 評論0 收藏0
深入學習js之——作用域鏈

摘要：開篇作用域是每種計算機語言最重要的基礎之一，因此要想深入的學習作用域和作用域鏈就是個繞不開的話題。這樣由多個執行上下文的變量對象構成的鏈表就叫做作用域鏈。這時候執行上下文的作用域鏈，我們命名為至此，作用域鏈創建完畢。開篇作用域是每種計算機語言最重要的基礎之一，因此要想深入的學習JavaScript,作用域和作用域鏈就是個繞不開的話題。在《深入學習js之—-執行上下文棧》中我們提到...

lemanli 2019-08-23 15:26 評論0 收藏0
JavaScript深入之作用域鏈

摘要：下面，讓我們以一個函數的創建和激活兩個時期來講解作用域鏈是如何創建和變化的。這時候執行上下文的作用域鏈，我們命名為至此，作用域鏈創建完畢。 JavaScript深入系列第五篇，講述作用鏈的創建過程，最后結合著變量對象，執行上下文棧，讓我們一起捋一捋函數創建和執行的過程中到底發生了什么？前言在《JavaScript深入之執行上下文棧》中講到，當JavaScript代碼執行一段可執行代...

waltr 2019-08-20 15:42 評論0 收藏0
深入學習js之——詞法作用域和動態作用域

摘要：在中的應用采用詞法作用域，也就是靜態作用域。那什么又是詞法作用域或者靜態作用域呢請繼續往下看靜態作用域與動態作用域因為采用的是詞法作用域函數的作用域在函數定義的時候就決定了。開篇當我們在開始學習任何一門語言的時候，都會接觸到變量的概念，變量的出現其實是為了解決一個問題，為的是存儲某些值，進而，存儲某些值的目的是為了在之后對這個值進行訪問或者修改，正是這種存儲和訪問變量的能力將狀態給...

shiweifu 2019-08-23 15:06 評論0 收藏0