成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

深入理解 Javascript 之 JS的解析與執(zhí)行過(guò)程

amuqiao / 1483人閱讀

摘要：的解析與執(zhí)行過(guò)程第一個(gè)彈出函數(shù)體第二個(gè)彈出函數(shù)體第三個(gè)彈出第四個(gè)彈出第五個(gè)彈出最后一行報(bào)錯(cuò)執(zhí)行分析第行，沒(méi)有關(guān)鍵字，不解析第行，遇到關(guān)鍵字，解析到全局的頭部第行，沒(méi)有關(guān)鍵字，不解析第行，遇到關(guān)鍵字，解析到全局的頭部第行，沒(méi)有關(guān)鍵

js的解析與執(zhí)行過(guò)程 

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();
- 第一個(gè) alert(a)  彈出 function a(){ alter(4); } 函數(shù)體
- 第二個(gè) alter(a)  彈出 function a(){ alter(4); } 函數(shù)體
- 第三個(gè) alter(a)  彈出 1
- 第四個(gè) alter(a)  彈出 3
- 第五個(gè) alter(a)  彈出 3
- 最后一行報(bào)錯(cuò) a is not a function

執(zhí)行分析

// 第1行，沒(méi)有關(guān)鍵字 ， 不解析
// 第2行，遇到 function 關(guān)鍵字，解析到全局的頭部
a = function a(){ alter(2); }
// 第3行，沒(méi)有關(guān)鍵字 ， 不解析
// 第4行，遇到關(guān)鍵字 var ， 解析到全局的頭部
a = undefined
// 第5行，沒(méi)有關(guān)鍵字 ， 不解析
// 第6行，遇到關(guān)鍵字 var ， 解析到全局的頭部
a = undefined
// 第8行，遇到 function 關(guān)鍵字，解析到全局的頭部
a = function a(){ alter(4); }
// 第9行，沒(méi)有關(guān)鍵字 ， 不解析
// 第10行，a() 函數(shù)調(diào)用
此時(shí)這里有4個(gè)同名變量 a ，依循規(guī)則是：function 優(yōu)先與 var, 同名的后面覆蓋前面的
因此，a = function a(){ alter(2); } 替換掉下面的2個(gè) a = undefined ，a = function a(){ alter(4); } 又替換掉 a = function a(){ alter(2); } ,最終只剩下 a = function a(){ alter(4); }

接下來(lái)我們進(jìn)入正題哦

一、 全局預(yù)處理和執(zhí)行 1.1、全局預(yù)處理階段

實(shí)例0

var a = 5;
var b ;
function xxx(){
  // 用聲明的方式創(chuàng)建的函數(shù)
}
var fun = function () {
  // 用函數(shù)表達(dá)式創(chuàng)建的函數(shù)
}
c = 5;  // 不會(huì)報(bào)錯(cuò)，但是也不會(huì)加入詞法環(huán)境
假設(shè)全局我們創(chuàng)建了上訴的內(nèi)容

首先js會(huì)創(chuàng)建一個(gè)詞法環(huán)境對(duì)象LexicalEnviroment,全局下等同于我們的window；

// 創(chuàng)建詞法環(huán)境如下
LexicalEnviroment{
  a: undefined
  b: undefined
  xxx: 該函數(shù)的引用
  fun: undefined
}

// 這里有著變量提升的知識(shí)

實(shí)例1

f(); // ff
g(); // 報(bào)錯(cuò)： g is not a function

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

// 【解析】
// 因?yàn)樵~法環(huán)境中f存在引用，g確實(shí)是undefined，因此當(dāng)在為g賦值之前調(diào)用g會(huì)報(bào)錯(cuò)。

實(shí)例2

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

實(shí)例3 變量重名

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


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

// 【解析】
//  可見不是根據(jù)最后出現(xiàn)的覆蓋前面的
1.2、全局執(zhí)行階段

實(shí)例 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);

執(zhí)行過(guò)程如下

1. 構(gòu)建詞法環(huán)境
2. 詞法環(huán)境如下
{
  f: function () {console.log("f")}
  a: undefined
  g: undefined
}
3. 開始執(zhí)行
4. alert(a); // undefined
5. alert(b); // 報(bào)錯(cuò)： 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);}

// 最后的詞法環(huán)境如下（window）
{
  f: function () {console.log("f")}
  a: 5
  g: function () {console.log("g);}   
  b: 6
}
二、 函數(shù)預(yù)處理和執(zhí)行 2.1、函數(shù)預(yù)處理階段 + 執(zhí)行階段

實(shí)例 5

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

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

f(1,2);

執(zhí)行分析

1. 1. 構(gòu)建詞法環(huán)境
2. 詞法環(huán)境如下
{
  a: 最初是1， 因?yàn)闆_突，最后變成了 函數(shù)的引用 function a() {// }
  b: 2

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

實(shí)例 6

函數(shù)內(nèi)部如果沒(méi)有用var聲明的變量，會(huì)成為最外部的詞法環(huán)境的變量（也就是全局了）

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

a();

// window.c === 100

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96755.html

相關(guān)文章

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

    摘要：關(guān)于兩個(gè)專業(yè)術(shù)語(yǔ)的討論起自對(duì)你不知道的一書的閱讀學(xué)習(xí)。遇到，編譯器會(huì)詢問(wèn)作用域是否已經(jīng)有一個(gè)該名稱的變量存在于同一個(gè)作用域的集合中。摘錄來(lái)自你不知道的。 JS 編譯之 LHS RHS 一、前言 最近和朋友聊技術(shù)的時(shí)候，聊到 LHS RHS，我竟然沒(méi)聽說(shuō)過(guò) 沒(méi)聽說(shuō)過(guò)。。。 于是成功引起了我的好奇心。 關(guān)于兩個(gè)專業(yè)術(shù)語(yǔ)的討論起自對(duì)《你不知道的JavaScript》一書的閱讀學(xué)習(xí)。 二、編譯...

    Cristic 評(píng)論0 收藏0

  • 【進(jìn)階1-2期】JavaScript深入之執(zhí)行上下文棧和變量對(duì)象

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

    Richard_Gao 評(píng)論0 收藏0

  • 《Webkit技術(shù)內(nèi)幕》之頁(yè)面渲染過(guò)程

    摘要：文章同步到技術(shù)內(nèi)幕之頁(yè)面渲染過(guò)程最近拜讀了傳說(shuō)中的技術(shù)內(nèi)幕一書，有很大收獲，尤其是對(duì)頁(yè)面渲染有了較深的認(rèn)識(shí)。解析語(yǔ)法分析，基于詞法解釋器生成的新標(biāo)記，構(gòu)建成抽象語(yǔ)法樹，解析器嘗試將其與某條語(yǔ)法規(guī)則進(jìn)行匹配。 文章同步到github《Webkit技術(shù)內(nèi)幕》之頁(yè)面渲染過(guò)程 最近拜讀了傳說(shuō)中的《Webkit技術(shù)內(nèi)幕》一書，有很大收獲，尤其是對(duì)頁(yè)面渲染有了較深的認(rèn)識(shí)。由于功力有限，而且書中設(shè)...

    vvpvvp 評(píng)論0 收藏0

  • 《Webkit技術(shù)內(nèi)幕》之頁(yè)面渲染過(guò)程

    摘要：文章同步到技術(shù)內(nèi)幕之頁(yè)面渲染過(guò)程最近拜讀了傳說(shuō)中的技術(shù)內(nèi)幕一書，有很大收獲，尤其是對(duì)頁(yè)面渲染有了較深的認(rèn)識(shí)。解析語(yǔ)法分析，基于詞法解釋器生成的新標(biāo)記，構(gòu)建成抽象語(yǔ)法樹，解析器嘗試將其與某條語(yǔ)法規(guī)則進(jìn)行匹配。 文章同步到github《Webkit技術(shù)內(nèi)幕》之頁(yè)面渲染過(guò)程 最近拜讀了傳說(shuō)中的《Webkit技術(shù)內(nèi)幕》一書，有很大收獲，尤其是對(duì)頁(yè)面渲染有了較深的認(rèn)識(shí)。由于功力有限，而且書中設(shè)...

    adam1q84 評(píng)論0 收藏0

  • 《Webkit技術(shù)內(nèi)幕》之頁(yè)面渲染過(guò)程

    摘要：文章同步到技術(shù)內(nèi)幕之頁(yè)面渲染過(guò)程最近拜讀了傳說(shuō)中的技術(shù)內(nèi)幕一書，有很大收獲，尤其是對(duì)頁(yè)面渲染有了較深的認(rèn)識(shí)。解析語(yǔ)法分析，基于詞法解釋器生成的新標(biāo)記，構(gòu)建成抽象語(yǔ)法樹，解析器嘗試將其與某條語(yǔ)法規(guī)則進(jìn)行匹配。 文章同步到github《Webkit技術(shù)內(nèi)幕》之頁(yè)面渲染過(guò)程 最近拜讀了傳說(shuō)中的《Webkit技術(shù)內(nèi)幕》一書，有很大收獲，尤其是對(duì)頁(yè)面渲染有了較深的認(rèn)識(shí)。由于功力有限，而且書中設(shè)...

    forsigner 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

amuqiao

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<