JavaScript抽象概念是怎樣的

今天就跟大家聊聊有關(guān)JavaScript抽象概念是怎樣的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司專(zhuān)業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商，專(zhuān)業(yè)提供成都服務(wù)器托管，服務(wù)器租用，川西大數(shù)據(jù)中心，川西大數(shù)據(jù)中心，成都多線服務(wù)器托管等服務(wù)器托管服務(wù)。

想必大伙兒看到本期的標(biāo)題很有疑惑，為什么是簡(jiǎn)而不單，單而不簡(jiǎn)的執(zhí)行上下文呢?我來(lái)先解釋一下，對(duì)于 javaScript  上一些抽象的概念，我們可以把它講的非常復(fù)雜，也可以把它講的極其簡(jiǎn)單，更可以把它講的既復(fù)雜又簡(jiǎn)單。

嗯～ 最近重新回顧了這些抽象的概念，發(fā)現(xiàn)有些概念之前并不能很好的融會(huì)貫通，所以把這些相對(duì)抽象難以理解的概念作為幾期文章來(lái)寫(xiě)。

我個(gè)人覺(jué)得要想更好的理解抽象概念，不得不借助可視化的圖像減少作者和讀者之間的理解力和理解差錯(cuò)。

1、執(zhí)行上下文

1.1 JavaScript 引擎

說(shuō)到執(zhí)行上下文，不得不先扯扯 JavaScript 引擎，JavaScript 引擎是什么?考慮到這篇文章不專(zhuān)門(mén)寫(xiě) JavaScript  引擎，可以自己谷歌一下。說(shuō)白了，JavaScript 引擎就是用來(lái)「解釋」、「編譯」和「執(zhí)行」JavaScript 代碼的。

畢竟開(kāi)發(fā)人員寫(xiě)的 JS 代碼只能夠讓開(kāi)發(fā)者認(rèn)得出來(lái)，交給計(jì)算機(jī)，由于計(jì)算機(jī)只識(shí)別二進(jìn)制，所以中間需要進(jìn)行一系列的解釋和轉(zhuǎn)化才能看懂執(zhí)行這些  JavaScript 代碼。

1.2 執(zhí)行棧 (Execution stack)

小鹿注：保證 JavaScript 代碼的執(zhí)行"順序"。

JavaScript 引擎既然可以執(zhí)行 JS 的代碼，那么是按照什么順序執(zhí)行的，又是怎么保證這些順序而不被所打亂的。先看一段簡(jiǎn)單的代碼：

var foo2 = function () {   console.log('foo2'); }  var foo1 = function () {   console.log('foo1');   foo2()   console.log('foo3') }  foo1(); // 輸出：“foo1  foo2  foo3”

通過(guò)上述代碼片段的執(zhí)行，輸出的順序?yàn)?#39;foo1 foo2 foo3'。

代碼執(zhí)行，foo1()函數(shù)先執(zhí)行，首先輸出'foo1'，遇到 foo2() 函數(shù)的執(zhí)行命令，將執(zhí)行權(quán)交給 foo2， foo2  函數(shù)體執(zhí)行，輸出'foo2'。foo2 執(zhí)行完畢后，將執(zhí)行權(quán)交回 foo1 函數(shù)，最后輸出'foo3'

我們可以找出上述代碼執(zhí)行的規(guī)律，先執(zhí)行的函數(shù)，會(huì)在最后退出，后執(zhí)行的函數(shù)，先執(zhí)行完畢。這個(gè)執(zhí)行順序不就是“?！钡摹跋冗M(jìn)后出”``“后進(jìn)先出”的結(jié)構(gòu)嘛。JavaScript  引擎將其這種執(zhí)行結(jié)構(gòu)稱(chēng)為「執(zhí)行棧」，用于保證 JavaScript 代碼的順序。

1.3 執(zhí)行上下文(Exception Context)

小鹿注：將執(zhí)行的代碼"模塊化" —— 執(zhí)行上下文的分類(lèi)。

什么是執(zhí)行上下文?雖然我們?cè)凇皥?zhí)行上下文”詞義上很難直接理解，但是它具體代表的是什么，是很容易理解的，下面我把“執(zhí)行上下文”的抽象概念進(jìn)行具體化。

上述我們已經(jīng)解釋了 JavaScript  引擎是使用執(zhí)行棧來(lái)保證代碼的執(zhí)行順序的，但是執(zhí)行過(guò)程中需要涉及到一些變量的作用范圍界定(作用域)、閉包等復(fù)雜情況，我們需要 JavaScript  引擎引入一種機(jī)制來(lái)解決這些看起來(lái)復(fù)雜的問(wèn)題，所以「執(zhí)行上下文」的概念產(chǎn)生了。

但是，執(zhí)行上下文是什么?這不得不讓我想起組件的模塊化開(kāi)發(fā)，之前的一個(gè)網(wǎng)頁(yè)應(yīng)用代碼從上到下一個(gè)文件寫(xiě)下來(lái)幾千行代碼，難以閱讀、難以維護(hù)，所以有了后來(lái)的模塊化開(kāi)發(fā)。每個(gè)模塊都有自己的功能，都有屬于自己的局部變量和樣式。

我們可以理解為 JavaScript 引擎為了更好的解釋和執(zhí)行代碼，所以引入類(lèi)似于像組件模塊的“執(zhí)行上下文”的概念用于管理運(yùn)行時(shí)代碼的復(fù)雜度。

2、執(zhí)行上下文的分類(lèi)

上述我們把抽象的“執(zhí)行上下文”類(lèi)似于“模塊”的具體概念便于理解。當(dāng)然，執(zhí)行上下文也就是所謂的“模塊”也有不同的分類(lèi)，在這里具體只展開(kāi)兩種，「全局執(zhí)行上下文」和「局部執(zhí)行上下文」。

2.1 全局執(zhí)行上下文(Global Exception Context)

全局上下文這個(gè)“模塊”由兩部分組成，「全局對(duì)象」和「this」。

下圖是全局執(zhí)行上下文的最基本形式。包含一個(gè) window 對(duì)象，以及一個(gè) this 變量，而這個(gè) this 變量是指向 window  對(duì)象的，如最右圖的打印結(jié)果。

從這里我們看出，執(zhí)行上下文可以理解為是一個(gè)在內(nèi)存中的「對(duì)象和變量」集合的模塊(或者說(shuō)是片段)，這也是為什么我們可以把它看作類(lèi)似“模塊”的原因(除此之外還有其他作用)

小鹿注：為了便于理解，定義是我自己總結(jié)的，如有欠缺歡迎指出～

2.2 局部執(zhí)行上下文

局部執(zhí)行上下文和全局執(zhí)行上下文類(lèi)似，但不完全相同，在函數(shù)局部執(zhí)行上下文中，需要注意的有以下兩點(diǎn)：

• 函數(shù)傳入的參數(shù)會(huì)作為局部執(zhí)行上下文的變量來(lái)存儲(chǔ)

• 局部上下文有一個(gè) arguments 參數(shù)對(duì)象(參考)局部執(zhí)行上下文內(nèi)容會(huì)在下面的兩個(gè)階段中詳細(xì)講到。

3、執(zhí)行上下文兩個(gè)階段

無(wú)論是全局執(zhí)行上下文還是局部的執(zhí)行上下文，都會(huì)經(jīng)歷兩個(gè)階段，分別是「創(chuàng)建」和「執(zhí)行」。

如下我們有一段代碼：

var name = "小鹿"; var age = 23;  function getInfo(){   return {     name: name,     age: age   }; }

3.1 創(chuàng)建階段(Creation)

創(chuàng)建階段要完成的事情，如下：

• 在堆內(nèi)存中創(chuàng)建全局對(duì)象(global object)—— 瀏覽器環(huán)境是 windows，Node 環(huán)境是 Global

• 讓 this 變量指向這個(gè)全局對(duì)象

• 設(shè)置當(dāng)前執(zhí)行上下文中「變量和函數(shù)」的內(nèi)存空間

• 將聲明的變量加入內(nèi)存中(同時(shí)掛在到全局對(duì)象上)，為變量賦值 undifined，函數(shù)存儲(chǔ)的是字符串形式

小鹿注：左 (1) 圖執(zhí)行的代碼，左 (2) 圖創(chuàng)建階段完成后的執(zhí)行上下文內(nèi)存中狀態(tài)，右 (1) 創(chuàng)建階段全局對(duì)象的狀態(tài)。

JavaScript 引擎在執(zhí)行代碼之前，先在堆內(nèi)存中創(chuàng)建全局執(zhí)行上下文，生成全局對(duì)象(global object)，然后讓 this  變量指向這個(gè)變量。JavaScript 發(fā)現(xiàn)代碼中聲明的兩個(gè)變量 name 和  age，然后在全局執(zhí)行上下文中申請(qǐng)內(nèi)存空間，將變量存儲(chǔ)到該內(nèi)存空間內(nèi)，然后為該變量賦值 undefined，函數(shù)就以字符串的形式存儲(chǔ)在內(nèi)存中。

小鹿注：在創(chuàng)建階段為變量聲明指定默認(rèn)值(undefined)的過(guò)程稱(chēng)為「變量提升」。

3.2 執(zhí)行階段(Execution)

全局執(zhí)行上下文創(chuàng)建完成之后，開(kāi)始由創(chuàng)建狀態(tài)(Creation)變?yōu)閳?zhí)行狀態(tài)( Execution)。JavaScript  引擎開(kāi)始逐行運(yùn)行和執(zhí)行代碼，并為在創(chuàng)建階段放入內(nèi)存的變量賦予值。

小鹿注：左 (1) 圖執(zhí)行的代碼，左 (2) 圖執(zhí)行階段完成后的執(zhí)行上下文內(nèi)存中狀態(tài)，右 (1) 執(zhí)行階段全局對(duì)象的狀態(tài)。

局部執(zhí)行上下文和全局執(zhí)行上下文的創(chuàng)建和執(zhí)行過(guò)程是一模一樣的。但是全局執(zhí)行上下文創(chuàng)建一次，而函數(shù)局部執(zhí)行上下文是隨著函數(shù)的每次調(diào)用都要?jiǎng)?chuàng)建一個(gè)局部執(zhí)行上下文。

還是上述例子，執(zhí)行結(jié)果如下：

var name = "小鹿"; var age = 23;  function getInfo(name){   console.log(name);   return {     name: name,     age: age   }; }  getInfo(name);

函數(shù)局部上下文執(zhí)行狀態(tài)如下：

小鹿注：由于函數(shù)中沒(méi)有定義新的變量，所以在這里沒(méi)有變量提升。

我們了解了什么是函數(shù)局部上下文，當(dāng)函數(shù)局部上下文執(zhí)行完畢之后，就會(huì)執(zhí)行出棧操作，將執(zhí)行權(quán)交給父級(jí)執(zhí)行上下文(可能是局部執(zhí)行上下文，也可能是全局執(zhí)行上下文)，上述  getInfo 函數(shù)執(zhí)行完畢的狀態(tài)如下圖所示。

此時(shí)的函數(shù)執(zhí)行完畢，局部執(zhí)行上下文出棧銷(xiāo)毀，執(zhí)行權(quán)交給全局執(zhí)行上下文繼續(xù)執(zhí)行其他代碼。

由于 JavaScript 是單線程的，一次只能執(zhí)行一個(gè)任務(wù)，為了方便大伙兒理解，左(3)圖  是執(zhí)行棧的調(diào)用情況。當(dāng)然，我們也可以發(fā)現(xiàn)，左(2)圖是以嵌套的方式來(lái)模擬執(zhí)行棧的操作，每一個(gè)嵌套選項(xiàng)都是堆棧中一個(gè)新的執(zhí)行上下文。

執(zhí)行上下文在 JavaScript 中是一個(gè)非常重要的概念，在接下幾期的進(jìn)階文章中，作用域、作用域、閉包、this等概念，都會(huì)與本期文章內(nèi)容掛鉤。

看完上述內(nèi)容，你們對(duì)JavaScript抽象概念是怎樣的有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

文章題目：JavaScript抽象概念是怎樣的
轉(zhuǎn)載來(lái)于：http://muchs.cn/article10/gpphgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、面包屑導(dǎo)航、全網(wǎng)營(yíng)銷(xiāo)推廣、移動(dòng)網(wǎng)站建設(shè)、App設(shè)計(jì)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)