深入理解 Javascript 之 JS的解析與執行過程

amuqiao 發布于2019-08-23 10:51 / 1479人閱讀

摘要：的解析與執行過程第一個彈出函數體第二個彈出函數體第三個彈出第四個彈出第五個彈出最后一行報錯執行分析第行，沒有關鍵字，不解析第行，遇到關鍵字，解析到全局的頭部第行，沒有關鍵字，不解析第行，遇到關鍵字，解析到全局的頭部第行，沒有關鍵

js的解析與執行過程

alert(a);
function a(){ alter(2); }
alert(a);
var a = 1
alert(a);
var a = 3;
alert(a);
function a(){ alter(4); }
alert(a);
a();

- 第一個 alert(a)  彈出 function a(){ alter(4); } 函數體
- 第二個 alter(a)  彈出 function a(){ alter(4); } 函數體
- 第三個 alter(a)  彈出 1
- 第四個 alter(a)  彈出 3
- 第五個 alter(a)  彈出 3
- 最后一行報錯 a is not a function

執行分析

// 第1行，沒有關鍵字 ， 不解析
// 第2行，遇到 function 關鍵字，解析到全局的頭部
a = function a(){ alter(2); }
// 第3行，沒有關鍵字 ， 不解析
// 第4行，遇到關鍵字 var ， 解析到全局的頭部
a = undefined
// 第5行，沒有關鍵字 ， 不解析
// 第6行，遇到關鍵字 var ， 解析到全局的頭部
a = undefined
// 第8行，遇到 function 關鍵字，解析到全局的頭部
a = function a(){ alter(4); }
// 第9行，沒有關鍵字 ， 不解析
// 第10行，a() 函數調用

此時這里有4個同名變量 a ，依循規則是：function 優先與 var, 同名的后面覆蓋前面的
因此，a = function a(){ alter(2); } 替換掉下面的2個 a = undefined ，a = function a(){ alter(4); } 又替換掉 a = function a(){ alter(2); } ,最終只剩下 a = function a(){ alter(4); }

接下來我們進入正題哦

一、全局預處理和執行 1.1、全局預處理階段

實例0

var a = 5;
var b ;
function xxx(){
  // 用聲明的方式創建的函數
}
var fun = function () {
  // 用函數表達式創建的函數
}
c = 5;  // 不會報錯，但是也不會加入詞法環境

假設全局我們創建了上訴的內容

首先js會創建一個詞法環境對象LexicalEnviroment,全局下等同于我們的window；

// 創建詞法環境如下
LexicalEnviroment{
  a: undefined
  b: undefined
  xxx: 該函數的引用
  fun: undefined
}

// 這里有著變量提升的知識

實例1

f(); // ff
g(); // 報錯： g is not a function

function f(){
  console.log("ff");
}
var g = function() {
  // 
}

// 【解析】
// 因為詞法環境中f存在引用，g確實是undefined，因此當在為g賦值之前調用g會報錯。

實例2

console.log(a); // undefined
console.log(b); // 報錯： b is not defined
var a = 1;
b = 4;

實例3 變量重名

// 處理函數聲明沖突 => 覆蓋
alert(f);
var f = 0;
function f() {
  cosole.log("f");
}
// 執行結果： 彈出一個f函數的字符串


// 處理變量聲明沖突  => 忽略
alert(f);
function f() {
  cosole.log("f");
}
var f = 0;
// 執行結果： 彈出一個f函數的字符串

// 【解析】
//  可見不是根據最后出現的覆蓋前面的

1.2、全局執行階段

實例 4

alert(a);
alert(b);
alert(f);
alert(g);


var a = 5;
b = 6;
alert(b);
function f() {
  console.log("f");
}
var g = function () {
  console.log("g);
}
alert(g);

執行過程如下

1. 構建詞法環境
2. 詞法環境如下
{
  f: function () {console.log("f")}
  a: undefined
  g: undefined
}
3. 開始執行
4. alert(a); // undefined
5. alert(b); // 報錯： b is not defined
6. alert(f); // function () {console.log("f")}
7. alert(g); // undefined
8. a = 5;  b = 6                                  [window下的變量賦值]
9. alert(b); // 6
10. g = function () {console.log("g);}            [window下的變量賦值]
11. alert(g); // function () {console.log("g);}

// 最后的詞法環境如下（window）
{
  f: function () {console.log("f")}
  a: 5
  g: function () {console.log("g);}   
  b: 6
}

二、函數預處理和執行 2.1、函數預處理階段 + 執行階段

實例 5

function f(a, b) {
  alert(a);
  alert(b);

  var b = 10;
  function a() {
    //
  }
}

f(1,2);

執行分析

1. 1. 構建詞法環境
2. 詞法環境如下
{
  a: 最初是1， 因為沖突，最后變成了 函數的引用 function a() {// }
  b: 2

}
3. 開始執行
4. alert(a); // function a() {// }
5. alert(b); // 2

實例 6

函數內部如果沒有用var聲明的變量，會成為最外部的詞法環境的變量（也就是全局了）

function a() {
  function b() {
    c = 100;
  }
  b();
}

a();

// window.c === 100

GPU云服務器云服務器深入理解webrtc之aec 深入理解javascript js事件執行過程 javascript與js的區別

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

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

JS編譯之 LHS RHS（你不知道的JavaScript 小記一）

摘要：關于兩個專業術語的討論起自對你不知道的一書的閱讀學習。遇到，編譯器會詢問作用域是否已經有一個該名稱的變量存在于同一個作用域的集合中。摘錄來自你不知道的。 JS 編譯之 LHS RHS 一、前言最近和朋友聊技術的時候，聊到 LHS RHS，我竟然沒聽說過沒聽說過。。。于是成功引起了我的好奇心。關于兩個專業術語的討論起自對《你不知道的JavaScript》一書的閱讀學習。二、編譯...

Cristic 2019-08-22 18:41 評論0 收藏0
【進階1-2期】JavaScript深入之執行上下文棧和變量對象

摘要：本計劃一共期，每期重點攻克一個面試重難點，如果你還不了解本進階計劃，點擊查看前端進階的破冰之旅本期推薦文章深入之執行上下文棧和深入之變量對象，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第二天。本計劃一共28期，每期...

Richard_Gao 2019-08-23 13:46 評論0 收藏0
《Webkit技術內幕》之頁面渲染過程

摘要：文章同步到技術內幕之頁面渲染過程最近拜讀了傳說中的技術內幕一書，有很大收獲，尤其是對頁面渲染有了較深的認識。解析語法分析，基于詞法解釋器生成的新標記，構建成抽象語法樹，解析器嘗試將其與某條語法規則進行匹配。文章同步到github《Webkit技術內幕》之頁面渲染過程最近拜讀了傳說中的《Webkit技術內幕》一書，有很大收獲，尤其是對頁面渲染有了較深的認識。由于功力有限，而且書中設...

vvpvvp 2019-08-29 16:17 評論0 收藏0
《Webkit技術內幕》之頁面渲染過程

摘要：文章同步到技術內幕之頁面渲染過程最近拜讀了傳說中的技術內幕一書，有很大收獲，尤其是對頁面渲染有了較深的認識。解析語法分析，基于詞法解釋器生成的新標記，構建成抽象語法樹，解析器嘗試將其與某條語法規則進行匹配。文章同步到github《Webkit技術內幕》之頁面渲染過程最近拜讀了傳說中的《Webkit技術內幕》一書，有很大收獲，尤其是對頁面渲染有了較深的認識。由于功力有限，而且書中設...

adam1q84 2019-08-23 10:43 評論0 收藏0
《Webkit技術內幕》之頁面渲染過程

摘要：文章同步到技術內幕之頁面渲染過程最近拜讀了傳說中的技術內幕一書，有很大收獲，尤其是對頁面渲染有了較深的認識。解析語法分析，基于詞法解釋器生成的新標記，構建成抽象語法樹，解析器嘗試將其與某條語法規則進行匹配。文章同步到github《Webkit技術內幕》之頁面渲染過程最近拜讀了傳說中的《Webkit技術內幕》一書，有很大收獲，尤其是對頁面渲染有了較深的認識。由于功力有限，而且書中設...

forsigner 2019-08-02 11:09 評論0 收藏0