JavaScript的執(zhí)行環(huán)境及作用域

、執(zhí)行環(huán)境

執(zhí)行環(huán)境（execution context）是JavaScript中最為重要的一個(gè)概念。執(zhí)行環(huán)境定義了執(zhí)行環(huán)境有權(quán)訪問的變量和函數(shù)。每個(gè)執(zhí)行環(huán)境都有一個(gè)與之關(guān)聯(lián)的變量對(duì)象（varibale object），環(huán)境中定義的所有變量或函數(shù)都保存在這個(gè)對(duì)象中。雖然我們編寫的代碼無法訪問這個(gè)對(duì)象，但解析器在處理數(shù)據(jù)時(shí)會(huì)在后臺(tái)使用它。

全局執(zhí)行環(huán)境是最外圍的一個(gè)執(zhí)行環(huán)境。根據(jù)ECMAScript實(shí)現(xiàn)所在的宿主環(huán)境不同，表示執(zhí)行環(huán)境的對(duì)象也不一樣。在Web瀏覽器中，全局執(zhí)行環(huán)境被認(rèn)為是window對(duì)象，因此所有全局變量和函數(shù)都是作為window對(duì)象的屬性和方法創(chuàng)建的。某個(gè)執(zhí)行環(huán)境中的所有代碼執(zhí)行完畢后，該環(huán)境銷毀，保存在其中的所有變量和函數(shù)定義也隨之銷毀（全局執(zhí)行環(huán)境直到應(yīng)用程序退出—例如關(guān)閉網(wǎng)頁或?yàn)g覽器—時(shí)才會(huì)被銷毀）。

每個(gè)函數(shù)都有自己的執(zhí)行環(huán)境。但執(zhí)行流進(jìn)入一個(gè)函數(shù)時(shí)，函數(shù)的環(huán)境就會(huì)被推入一個(gè)環(huán)境棧中。而在函數(shù)執(zhí)行之后，棧將其環(huán)境彈出，把控制權(quán)返回給之前的執(zhí)行環(huán)境。ECMAScript程序中的執(zhí)行流正式由這個(gè)方便的機(jī)制控制著。

二、作用域鏈

當(dāng)代碼在一個(gè)環(huán)境中執(zhí)行時(shí)，會(huì)創(chuàng)建變量對(duì)象的一個(gè)作用域鏈。作用域鏈的用途，是保證對(duì)執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問。作用域鏈的前端，始終是當(dāng)前執(zhí)行的代碼所在環(huán)境的變量對(duì)象。

如果這個(gè)環(huán)境是函數(shù)，則將其活動(dòng)對(duì)象（activation object）作為變量對(duì)象。活動(dòng)對(duì)象在最開始時(shí)只包含一個(gè)變量，即arguments對(duì)象（這個(gè)對(duì)象在全局環(huán)境中是不存在的）。作用域鏈中的下一個(gè)變量對(duì)象來自包含（外部）環(huán)境，而再下一個(gè)變量對(duì)象則來自下一個(gè)包含環(huán)境。這樣，一直延續(xù)到全局執(zhí)行環(huán)境，全局執(zhí)行環(huán)境的變量對(duì)象始終都是作用域鏈中的最后一個(gè)對(duì)象。

標(biāo)識(shí)符解析是沿著作用域鏈一級(jí)一級(jí)地搜索標(biāo)識(shí)符的過程。搜索過程始終從作用域鏈的前端開始，然后逐漸地向后回溯，直到找到標(biāo)識(shí)符為止（如果找不到標(biāo)識(shí)符，通常會(huì)導(dǎo)致錯(cuò)誤發(fā)生）。

var color="blue";
function changeColor(){
 var anotherColor="red";
 
 function swapColors(){
 var tempColor=anotherColor;
 anotherColor=color;
 color=tempColor;
 //這里可以訪問color、anotherColor和tempColor
 }
 //這里可以訪問color和anotherColor，但不能訪問tempColor
 swapColors();
}
//這里只能訪問color
changeColor();

以上代碼共涉及3個(gè)執(zhí)行環(huán)境：全局環(huán)境、changeColor()的局部環(huán)境和swapColors()的局部環(huán)境。對(duì)于例子中的swapColors()而言，其作用域鏈中包含3個(gè)對(duì)象：swapColors()的變量對(duì)象、changeColor()的變量對(duì)象和全局對(duì)象。

內(nèi)部環(huán)境可以通過作用域鏈訪問所有的外部環(huán)境，但外部環(huán)境不能訪問內(nèi)部環(huán)境中的任何變量和函數(shù)。這些環(huán)境之間的聯(lián)系是線性、有次序的。每個(gè)環(huán)境可以向上搜索作用域鏈，以查詢變量和函數(shù)名，但任何環(huán)境都不能通過向下搜索作用域鏈而進(jìn)入另一個(gè)執(zhí)行環(huán)境。

tml開發(fā)環(huán)境搭建

有一個(gè)好的編輯器我們可以方便地的開發(fā)項(xiàng)目，編寫代碼，配置和管理我們的項(xiàng)目。所以我們開始編寫html代碼之前需要搭建開發(fā)環(huán)境。

基于html項(xiàng)目的開發(fā)和代碼編寫現(xiàn)在網(wǎng)上有很多編輯器，也有免費(fèi)的，也有收費(fèi)的編輯器。基于在Windows系統(tǒng)環(huán)境下開發(fā)和編寫html代碼最簡單的編輯器就是Windows自帶的記事本，我們可以使用記事本編輯html代碼。

使用記事本編寫html的步驟是首先新建一個(gè)文本文檔，按照html的語法規(guī)則編寫相關(guān)的代碼和保存文件，然后把文件的后綴名改為.html，使用電腦上的瀏覽器打開就可以查看我們代碼的運(yùn)行結(jié)果。

雖然記事本也能編寫html代碼，但是效率不高也不方便，所以我們使用專業(yè)的編輯器來開發(fā)項(xiàng)目，編寫代碼和管理項(xiàng)目。

常用html代碼編寫的免費(fèi)軟件有HBuilderX，vs code，Sublime Text 等等。

HBuilderX官網(wǎng)下載地址：

https://www.dcloud.io/hbuilderx.html

vs code的官網(wǎng)下載地址：

https://code.visualstudio.com/

Sublime Text官網(wǎng)下載地址：

http://www.sublimetext.com/

我們以后的教程都使用HBuilderX，所以下面為了同學(xué)們的學(xué)習(xí)方便，對(duì)HBuilderX的下載和安裝做詳細(xì)的教程。

一，下載

首先訪問HBuilderX的官網(wǎng)網(wǎng)址：

https://www.dcloud.io/hbuilderx.html

打開上面的HBuilderX下載網(wǎng)址后點(diǎn)擊頁面上download，在彈出的對(duì)話框里選擇適合自己電腦的HBuilderX版本下載。

在Windows10環(huán)境下下載后的文件是一個(gè)壓縮的.zip文件。

二，安裝

鼠標(biāo)右擊下載下來的壓縮文件進(jìn)行解壓。

解壓完成后是一個(gè)名為HBuilderX的文件夾。

解壓完成后鼠標(biāo)雙擊HBuilderX文件夾：

雙擊運(yùn)行名為HBuilderX.exe的應(yīng)用程序文件即可啟動(dòng)HBuilderX編輯器：

因?yàn)镠BuilderX是一個(gè)綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動(dòng)程序，我們可以右擊HBuilderX.exe文件創(chuàng)建桌面快捷方式。

小百科：

綠色軟件指一類小型軟件，多數(shù)為免費(fèi)軟件，最大特點(diǎn)是軟件無需安裝便可使用，可存放于閃存中，移除后也不會(huì)將任何記錄留在本機(jī)計(jì)算機(jī)上。通俗點(diǎn)講綠色軟件就是指不用安裝，下載直接可以使用的軟件。綠色軟件不會(huì)在注冊(cè)表中留下注冊(cè)表鍵值，所以相對(duì)一般的軟件來說，綠色軟件對(duì)系統(tǒng)的影響幾乎沒有，所以是很好的一種軟件類型。

三，新建項(xiàng)目

HBuilderX編輯器初次啟動(dòng)時(shí)的默認(rèn)界面是下圖所示：

按照下圖所示可以創(chuàng)建一個(gè)新的名為demo1空白項(xiàng)目：

名為demo1的空白項(xiàng)目創(chuàng)建成功后的界面如下圖所示：

接下來在剛我們新建的demo1項(xiàng)目下創(chuàng)建名為helloworld的html文件

鼠標(biāo)右擊創(chuàng)建的demo1項(xiàng)目選擇新建在選擇.html文件：

在彈出的對(duì)話框里填入html文件的名稱：

編寫一段代碼：

運(yùn)行：

在瀏覽器上觀察效果：

好了，到這里html的開發(fā)環(huán)境搭建和HBuilderX的安裝教程結(jié)束了。

下面再給大家教一下怎樣修改HBuilderX的主題風(fēng)格，HBuilderX自身提供了修改軟件主題的功能，使用者可以自身需求和喜好修改HBuilderX的風(fēng)格。在喜歡自己喜歡的環(huán)境下做開發(fā)也是令人羨慕的一件事。

按照以下步驟可以修改HBuilderX的主題，默認(rèn)主題是綠柔，我們可以改成雅黑，雅藍(lán)或者自定義主題：

雅黑主題：

雅藍(lán)主題：

好了本節(jié)全部內(nèi)容全部結(jié)束了，希望我準(zhǔn)備的內(nèi)容對(duì)你有所幫助

你的支持是我的最大動(dòng)力，若覺得我的教程還可以或?qū)δ阌袔椭鸀槲尹c(diǎn)贊加關(guān)注！謝謝！

要：在IT行業(yè)中，后端開發(fā)者發(fā)揮著至關(guān)重要的作用。尤其是在技術(shù)變革日新月異的時(shí)代，更需要后端開發(fā)者不斷提升自我的技能，但是，無論技術(shù)迭代如何迅速，后端開發(fā)人員的“基本功”都不可以落下。本文展開討論成為JavaScript堆棧后端開發(fā)人員，必須經(jīng)歷的那些事……

原文鏈接：

https://billypentester.medium.com/ultimate-10-stages-to-master-backend-development-f6f65f22a327

聲明：本文為CSDN翻譯，轉(zhuǎn)載請(qǐng)注明來源。

作者 | Bilal Ahmad

譯者 | 朱珂欣責(zé)編 | 屠敏

出品 | CSDN（ID：CSDNnews）

隨著時(shí)代的發(fā)展，越來越多編程語言和開發(fā)工具的出現(xiàn)，讓開發(fā)者能夠方便且快捷地開發(fā)和部署應(yīng)用程序。其中，后端開發(fā)多是指服務(wù)器端編程，開發(fā)人員通過創(chuàng)建應(yīng)用程序體系結(jié)構(gòu)和業(yè)務(wù)邏輯，以此處理和存儲(chǔ)數(shù)據(jù)并輸出有用的信息。

毋庸置疑，成為后端開發(fā)人員必然有門檻，掌握Web和操作系統(tǒng)的基礎(chǔ)知識(shí)、了解數(shù)據(jù)庫、計(jì)算機(jī)網(wǎng)絡(luò)協(xié)議、數(shù)據(jù)結(jié)構(gòu)和算法、開發(fā)工具等，逐漸成為后端開發(fā)人員的入門技能。后端編程語言、框架和堆棧也很多，例如JavaScript、Python、PHP、Java、Ruby等。那么，成為JavaScript堆棧后端開發(fā)人員，需要面臨那幾個(gè)必須經(jīng)歷的階段呢？

第1階段：掌握Web基礎(chǔ)知識(shí)

在開發(fā)人員的初始階段，學(xué)習(xí)Web的基礎(chǔ)知識(shí)是至關(guān)重要的。因?yàn)閾碛蠾eb概念可以幫助開發(fā)人員更好地了解互聯(lián)網(wǎng)的工作原理，例如使用哪些協(xié)議、如何傳遞消息等。
首當(dāng)其沖的是了解Web中的一些基本概念，例如HTTP的概念、HTTP的基本方面、HTTP 請(qǐng)求的類型及作用、客戶端和服務(wù)器模型、OSI 模型、DNS 工作原理等。

第2階段：了解操作系統(tǒng)知識(shí)

操作系統(tǒng)，管理著計(jì)算機(jī)上的所有軟件和硬件。它執(zhí)行內(nèi)存和進(jìn)程管理，處理輸入和輸出等。通過運(yùn)行操作系統(tǒng)，進(jìn)一步運(yùn)行完整 Web 應(yīng)用的服務(wù)器。因此，開發(fā)人員有必要了解操作系統(tǒng)整體實(shí)現(xiàn)，以最大限度地提高性能并優(yōu)化內(nèi)存。

在此階段，開發(fā)者需要了解操作系統(tǒng)體系結(jié)構(gòu)、文件系統(tǒng)、基本CLI命令、內(nèi)存和進(jìn)程管理、操作系統(tǒng)線程等。

第3階段：學(xué)習(xí)后端框架和語言

在開發(fā)者學(xué)習(xí)要使用的后端框架和語言的過程中，第一步是學(xué)習(xí)JavaScript。學(xué)習(xí)JavaScript的基礎(chǔ)知識(shí)，例如數(shù)據(jù)類型、循環(huán)、選擇、函數(shù)、對(duì)象、類、數(shù)組、字符串、正則表達(dá)式等。

JavaScript 由ECMAScript、文檔對(duì)象模型（DOM）和瀏覽器對(duì)象模型（BOM）三個(gè)部分組成。ECMAScript是JavaScript所基于的腳本語言規(guī)范。它引入了新的JavaScript功能，如箭頭函數(shù)，異步等待，模板文本等，這些功能可以對(duì)有效的編碼很有幫助。

Node.js是一個(gè)開源的、跨平臺(tái)的、后端的JavaScript運(yùn)行時(shí)環(huán)境，它在JavaScript引擎上運(yùn)行并執(zhí)行JavaScript代碼。開發(fā)人員可以學(xué)習(xí)基本的節(jié)點(diǎn)JavaScript模塊，例如fs、path、os等。

第4階段：使用服務(wù)器框架和API開發(fā)

首先，服務(wù)器端框架作為后端開發(fā)中的主要角色，它是前端和后端（節(jié)點(diǎn)應(yīng)用）之間的通信網(wǎng)關(guān)，使編寫、維護(hù)和擴(kuò)展Web應(yīng)用更加容易。

服務(wù)器端框架提供工具和庫來實(shí)現(xiàn)簡單、常見的開發(fā)任務(wù)，包括路由處理，數(shù)據(jù)庫交互，會(huì)話支持和用戶驗(yàn)證，格式化輸出，提高安全性應(yīng)對(duì)網(wǎng)絡(luò)攻擊，也能使開發(fā)人員完全控制傳入和傳出的請(qǐng)求/響應(yīng)，提供端點(diǎn)，執(zhí)行中間件功能等。

其次，API開發(fā)作為一種實(shí)踐階段，開發(fā)人員將學(xué)習(xí)如何使用Express JS和節(jié)點(diǎn)JS創(chuàng)建簡單的REST API并執(zhí)行CRUD操作。使用快速中間件驗(yàn)證傳入請(qǐng)求，使用路由器處理端點(diǎn)等。

Postman 在測試 API 端點(diǎn)方面很有幫助。添加更多內(nèi)容并了解 swagger 和 Open API。

第5階段：使用模板引擎

通常，前端（React應(yīng)用程序）和后端（快速應(yīng)用程序）之間的通信是使用MERN堆棧中的API調(diào)用完成的。客戶端從服務(wù)器請(qǐng)求數(shù)據(jù)，服務(wù)器將請(qǐng)求的數(shù)據(jù)發(fā)送回客戶端。

但是，如果開發(fā)人員的項(xiàng)目很小，并且對(duì) React 或其他前端框架不了解，可以使用模板引擎。

模板引擎可幫助開發(fā)人員創(chuàng)建靜態(tài)HTML模板文件，并在運(yùn)行時(shí)將模板文件中的變量替換為實(shí)際值，這使其成為動(dòng)態(tài)網(wǎng)站。模板引擎與Express JS的集成一起工作。它從數(shù)據(jù)庫獲取數(shù)據(jù)值，并可以通過HTML 模板文件呈現(xiàn)這些值。

第6階段：了解數(shù)據(jù)庫

數(shù)據(jù)庫在后端開發(fā)中發(fā)揮著巨大的作用。數(shù)據(jù)庫用于以結(jié)構(gòu)化方式存儲(chǔ)數(shù)據(jù)以及訪問和維護(hù)數(shù)據(jù)。

后端應(yīng)用程序可以通過使用MongoDB，MySQL等第三方npm包查詢數(shù)據(jù)庫來直接與數(shù)據(jù)庫交互。如果開發(fā)人員不了解SQL或數(shù)據(jù)庫語言，則需要學(xué)習(xí)任何ORM/ODM作為中間件，將對(duì)象方法轉(zhuǎn)換為復(fù)雜的數(shù)據(jù)庫查詢，這些中間件為開發(fā)人員提供了一個(gè)名為模型的完整結(jié)構(gòu)，用于在將數(shù)據(jù)輸入數(shù)據(jù)庫之前驗(yàn)證數(shù)據(jù)。此外，它在對(duì)象模型之上提供了一個(gè)額外的安全層。

第7階段：關(guān)注安全性

安全性是企業(yè)級(jí) Web 應(yīng)用程序的一大關(guān)注點(diǎn)。單個(gè)漏洞會(huì)導(dǎo)致數(shù)據(jù)泄露或應(yīng)用程序故障。Web 應(yīng)用中應(yīng)有適當(dāng)?shù)尿?yàn)證、身份驗(yàn)證和授權(quán)。

因此，開發(fā)人員在該階段可能會(huì)涉及促進(jìn)應(yīng)用更安全的一些技術(shù)，例如:

JWT：使用令牌防止對(duì)受保護(hù)資源的意外訪問；
Cookie：用于存儲(chǔ)有關(guān)訪問網(wǎng)頁的信息；
會(huì)話：用于維護(hù)與服務(wù)器的安全連接；
CORS：使用CORS從一個(gè)網(wǎng)站向另一個(gè)網(wǎng)站發(fā)出請(qǐng)求；
哈希：使用中間件通過salt對(duì)密碼進(jìn)行哈希處理；
加密/解密：使用中間件加密和解密重要數(shù)據(jù)；
SSL：使用SSL認(rèn)證來保護(hù)事務(wù)；
限制：使用中間件應(yīng)用請(qǐng)求限制，防止DDOS攻擊。

第8階段：使用消息代理

現(xiàn)代應(yīng)用程序非常復(fù)雜，由于時(shí)間復(fù)雜度大，CPU密集型操作、大量數(shù)據(jù)處理以及多個(gè)服務(wù)之間的API通信存在耗時(shí)的問題，會(huì)帶來糟糕的用戶體驗(yàn)。

消息代理成為幫助克服其中一些困難的解決方案之一。消息代理由 3 個(gè)組件組成：

制作人：生產(chǎn)者發(fā)送有關(guān)主題的消息。一個(gè)或多個(gè)發(fā)布者可以針對(duì)同一主題發(fā)布內(nèi)容；
消費(fèi)者：訂閱者訂閱主題，發(fā)布到該主題的所有消息都將由該主題的所有訂閱者接收；
隊(duì)列/主題：隊(duì)列保存由生產(chǎn)者發(fā)布并由消費(fèi)者訪問的消息。

第9階段：測試完整的API

在實(shí)時(shí)服務(wù)器上部署Web應(yīng)用程序之前，為了減少單個(gè)錯(cuò)誤的輸入或缺少數(shù)據(jù)導(dǎo)致正在運(yùn)行的服務(wù)器出現(xiàn)故障，需要進(jìn)行測試。

測試可以根據(jù)多個(gè)標(biāo)準(zhǔn)在多個(gè)級(jí)別上進(jìn)行，開發(fā)人員可以檢查Web應(yīng)用是否返回了正確的狀態(tài)代碼、錯(cuò)誤消息、數(shù)據(jù)等。

在這個(gè)階段，開發(fā)人員的主要任務(wù)是使用Jest測試完整的API。Jest是一個(gè)著名的單元測試框架，用于測試Web應(yīng)用程序和API。它提供了多種方法來自動(dòng)化測試過程，檢查對(duì)錯(cuò)誤或缺失數(shù)據(jù)的響應(yīng)等。

第10階段：實(shí)時(shí)服務(wù)器/云上部署Web應(yīng)用程序

在部署Web應(yīng)用之前，開發(fā)人員需要學(xué)習(xí)Git、GitHub的操作以及版本控制工具的使用，以使部署靈活且可擴(kuò)展。

Git可以用于版本控制，通過創(chuàng)建多個(gè)分支，跟蹤源代碼中的更改，并使多個(gè)開發(fā)人員能夠協(xié)同工作。GitHub是一個(gè)用于版本控制和協(xié)作的代碼托管平臺(tái)，可以允許開發(fā)人員和其他人共同處理項(xiàng)目。GitHub操作可幫助您自動(dòng)執(zhí)行軟件開發(fā)工作流。單個(gè)操作是可重用的代碼段，可用于在 GitHub上生成、測試、打包或部署項(xiàng)目。它還可用于自動(dòng)執(zhí)行工作流程的任何步驟。部署完整的Web應(yīng)用非常復(fù)雜。開發(fā)者還需要一個(gè)專用服務(wù)器來響應(yīng)HTTP請(qǐng)求，并使用在線數(shù)據(jù)庫。

總的來說，從應(yīng)用程序開發(fā)最初階段的掌握Web基礎(chǔ)知識(shí)，到最后階段在實(shí)時(shí)服務(wù)器/云上部署Web應(yīng)用程序。JavaScript堆棧后端開發(fā)者在點(diǎn)滴的積累中，學(xué)習(xí)和掌握了與應(yīng)用開發(fā)相關(guān)的實(shí)踐經(jīng)驗(yàn)。然而，無論是對(duì)于后端開發(fā)的初學(xué)者還是對(duì)有經(jīng)驗(yàn)工程師，無論邁過多少個(gè)階段，學(xué)習(xí)之路都不會(huì)中斷。

在線咨詢

上一篇：WAP與H5的區(qū)別介紹
下一篇：「虛幻4」初學(xué)者系列教程-《基礎(chǔ)入門》#1

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JavaScript的執(zhí)行環(huán)境及作用域

tml開發(fā)環(huán)境搭建

第9階段：測試完整的API

第10階段：實(shí)時(shí)服務(wù)器/云上部署Web應(yīng)用程序

您的項(xiàng)目需求