整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
知玩家們對(duì)FC游戲《忍者龍劍傳3》是否還有印象，在這個(gè)游戲的第二個(gè)關(guān)卡中隼龍通過沙漠時(shí)需要經(jīng)過一個(gè)巖漿地帶，巖漿一直不斷往上升，必須在巖漿淹沒之前到達(dá)頂部，否則將會(huì)被巖漿吞沒，在逃離的過程中存在著各種阻礙，這個(gè)部分有點(diǎn)類似跑酷游戲。在近期有一款名為《直排輪大冒險(xiǎn)》（Adventure Roller Skates）就是在類似的場(chǎng)景中進(jìn)行的，游戲即將在今年秋季發(fā)布，先來看一下游戲的視頻吧~
視頻：http://v.youku.com/v_show/id_XMTI5NzY4NDY2NA==.html
在游戲中玩家操縱著一名穿著直排滑輪的冒險(xiǎn)家，需要逃離充滿危險(xiǎn)機(jī)關(guān)的古代遺跡，在逃離的過程中會(huì)遇到巖漿的追逐，各種方向的飛箭以及方塊的擠壓等等。游戲整體給人的感覺也比較懷舊，游戲場(chǎng)景中出現(xiàn)的圖騰不經(jīng)讓人想起祖瑪這個(gè)詞，再加上整體的整體畫風(fēng)，滿滿的懷舊情感。游戲的操作方式是屬于比較簡(jiǎn)單，由于人物是自動(dòng)奔跑的，所以玩家只需要控制人物奔跑的方向，不過面對(duì)那么對(duì)陷阱，想要玩好也是有點(diǎn)難的。
官方表示游戲?qū)⒃诮衲昵锛旧霞埽F(xiàn)在夏日也快結(jié)束了，玩家們很快就可以玩上這款有趣的跑酷游戲了。
構(gòu)建網(wǎng)頁和網(wǎng)站的過程中，存在一種神奇的協(xié)作，那就是HTML、CSS和JavaScript這"三劍客"的組合。這三種語言是前端開發(fā)的核心，對(duì)于任何希望成為前端開發(fā)者的人來說，掌握這三種語言是基礎(chǔ)中的基礎(chǔ)。本文將會(huì)詳細(xì)解析這三種語言的功能和它們?cè)谇岸碎_發(fā)中的作用。
首先，HTML，或超文本標(biāo)記語言，是構(gòu)建網(wǎng)頁結(jié)構(gòu)的基礎(chǔ)。它允許我們創(chuàng)建和格式化網(wǎng)頁內(nèi)容。HTML用于定義網(wǎng)頁的內(nèi)容，例如段落、標(biāo)題、列表或者圖片等等。HTML元素被定義為帶有尖括號(hào)的標(biāo)簽，如<body>、<head>、<title>等。
其次，CSS，即層疊樣式表，負(fù)責(zé)網(wǎng)頁的表現(xiàn)和布局。如果說HTML是房子的骨架，那么CSS就是房子的外觀設(shè)計(jì)和裝潢。它可以定義字體、顏色、間距、大小甚至動(dòng)畫等等，使得網(wǎng)頁看起來更加美觀。
最后，JavaScript，它是實(shí)現(xiàn)網(wǎng)頁交互的關(guān)鍵。JavaScript可以用來編寫函數(shù)，響應(yīng)用戶的行為，如點(diǎn)擊按鈕、滑動(dòng)滾輪、填寫表單等等。JavaScript也可以用來動(dòng)態(tài)修改HTML和CSS，創(chuàng)建動(dòng)態(tài)和交互性的網(wǎng)頁。
當(dāng)然，HTML、CSS和JavaScript并不是各自獨(dú)立存在的，它們需要緊密地配合工作。例如，我們可以在HTML中插入CSS，以改變內(nèi)容的外觀。我們也可以用JavaScript來修改HTML內(nèi)容，或者改變CSS樣式。這種緊密的配合，使得我們的網(wǎng)頁既有結(jié)構(gòu)，又有美觀的設(shè)計(jì)，還有豐富的交互性。
在掌握這三種語言之后，你就已經(jīng)具備了成為一名前端開發(fā)者的基礎(chǔ)技能。當(dāng)然，前端開發(fā)還有許多其他的知識(shí)和技術(shù)，如React、Vue等前端框架，以及ES6、TypeScript等現(xiàn)代JavaScript的新特性。但是無論如何，HTML、CSS和JavaScript都是你成為前端開發(fā)者的基石。
管理服務(wù)專家新鈦云服 林泓輝
與許多同類語言相比，JavaScript 是一種易于學(xué)習(xí)的編程語言。但是，如果您想理解、調(diào)試和編寫更好的代碼，則需要多加注意一些基本概念。
在本文中，我們將了解兩個(gè)這樣的概念：
作為一個(gè)初學(xué)者的JavaScript，了解這些概念將有助于您了解this關(guān)鍵字，作用域和閉包。
一般來說，一個(gè) JavaScript 源文件會(huì)有多行代碼。作為開發(fā)人員，我們將代碼組織成變量、函數(shù)、數(shù)據(jù)結(jié)構(gòu)（如對(duì)象和數(shù)組）等等。
語法環(huán)境決定了我們?nèi)绾我约霸诤翁幘帉懘a。看看下面的代碼：
function doSomething() {
var age= 7;
// Some more code
}在上面的代碼中，變量age在語法上位于函數(shù)內(nèi)部doSomething。
請(qǐng)注意，我們的代碼不會(huì)按原樣運(yùn)行。它必須由編譯器翻譯成計(jì)算機(jī)可理解的字節(jié)碼。通常，語法環(huán)境在您的代碼中會(huì)有多個(gè)。然而，并不是所有的環(huán)境都會(huì)同時(shí)執(zhí)行。
幫助代碼執(zhí)行的環(huán)境稱為執(zhí)行上下文。它是當(dāng)前正在運(yùn)行的代碼，以及有助于運(yùn)行它的一切。可以有很多語法環(huán)境，但當(dāng)前運(yùn)行的代碼只能有一個(gè)執(zhí)行上下文。
查看下圖以了解語法環(huán)境和執(zhí)行上下文之間的區(qū)別：
語法環(huán)境與執(zhí)行上下文
那么在執(zhí)行上下文中到底發(fā)生了什么？代碼被逐行解析，生成可執(zhí)行的字節(jié)碼，分配內(nèi)存并執(zhí)行。
讓我們采用我們?cè)谏厦婵吹降南嗤瘮?shù)。您認(rèn)為執(zhí)行以下行時(shí)可能會(huì)發(fā)生什么？
var age = 7;這段源代碼在最終執(zhí)行之前經(jīng)歷了以下階段：
下面的動(dòng)畫圖片顯示了源代碼到可執(zhí)行字節(jié)碼的轉(zhuǎn)換。
可執(zhí)行字節(jié)碼的源代碼
所有這些事情都發(fā)生在一個(gè)執(zhí)行上下文中。所以執(zhí)行上下文是代碼的特定部分的執(zhí)行環(huán)境。
有兩種類型的執(zhí)行上下文：
每個(gè)執(zhí)行上下文都有兩個(gè)階段：
讓我們?cè)敿?xì)看看它們中的每一個(gè)，并更好地理解它們。
每當(dāng)我們執(zhí)行 JavaScript碼時(shí)，它都會(huì)創(chuàng)建一個(gè)全局執(zhí)行上下文（也稱為基本執(zhí)行上下文）。全局執(zhí)行上下文有兩個(gè)階段。
在創(chuàng)建階段，創(chuàng)建了兩個(gè)獨(dú)特的東西：
如果代碼中聲明了任何變量，則會(huì)為該變量分配內(nèi)存。該變量使用唯一key進(jìn)行初始化，并賦值為undefined。
如果代碼中有function ，它會(huì)被直接放入內(nèi)存中。我們將在Hoisting后面的部分中詳細(xì)了解這部分。
代碼執(zhí)行在這個(gè)階段開始。在這里進(jìn)行全局變量的賦值。請(qǐng)注意，這里沒有調(diào)用函數(shù)，因?yàn)樗l(fā)生在函數(shù)執(zhí)行上下文中。我們將在后面討論這個(gè)問題。
讓我們通過幾個(gè)例子來理解這兩個(gè)階段。
創(chuàng)建一個(gè)名為index.js的空 JavaScript 文件及一個(gè)包含以下內(nèi)容的 HTML 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='./index.js'></script>
</head>
<body>
I'm loading an empty script
</body>
</html>我們使用<script>標(biāo)簽將空腳本文件導(dǎo)入到 HTML 文件中。
在瀏覽器中加載 HTML 文件并打開 Chrome DevTools（快捷鍵通常為F12）或其他瀏覽器也是可以的。選擇console選項(xiàng)卡，鍵入window并按回車鍵。您可以看到瀏覽器的Window對(duì)象。
windows對(duì)象
現(xiàn)在，輸入this并按回車鍵。您可以看到和Window對(duì)象一樣的this對(duì)象。
'this' 的值
如果您輸入window === this則會(huì)得到返回值true
好的，那么我們學(xué)到了什么？
現(xiàn)在讓我們看一個(gè)在 JavaScript 文件中包含一些代碼的示例。我們將添加一個(gè)變量blog，并為其分配一個(gè)值。我們還將定義一個(gè)名為logBlog的函數(shù)。
var blog = 'freeCodeCamp';
function logBlog() {
console.log(this.blog);
}在創(chuàng)建階段：
在執(zhí)行階段：
當(dāng)我們調(diào)用一個(gè)函數(shù)時(shí)，會(huì)創(chuàng)建一個(gè)函數(shù)執(zhí)行上下文。讓我們擴(kuò)展上面使用的相同示例，但這次我們將調(diào)用該函數(shù)。
var blog = 'freeCodeCamp';
function logBlog() {
console.log(this.blog);
}
// Let us call the function
logBlog();函數(shù)執(zhí)行上下文經(jīng)歷相同的階段，即創(chuàng)建和執(zhí)行。
函數(shù)執(zhí)行階段可以訪問一個(gè)名為arguments的特殊值。它是傳遞給函數(shù)的參數(shù)。但在我們的示例中，沒有傳遞任何參數(shù)。
請(qǐng)注意，在全局執(zhí)行上下文中創(chuàng)建的window對(duì)象和this變量仍然可以在此上下文中訪問。
當(dāng)一個(gè)函數(shù)調(diào)用另一個(gè)函數(shù)時(shí)，會(huì)為新的函數(shù)調(diào)用創(chuàng)建一個(gè)新的函數(shù)執(zhí)行上下文。每個(gè)函數(shù)中相應(yīng)的變量只能在對(duì)應(yīng)的執(zhí)行上下文中使用。
讓我們轉(zhuǎn)到另一個(gè)基本概念Hoisting。當(dāng)我第一次聽說Hoisting時(shí)，花了一些時(shí)間才理解這個(gè)意思。
在英語中，hoisting 的意思是使用繩索和滑輪提升某物。這可能會(huì)誤導(dǎo)您認(rèn)為 JavaScript 引擎會(huì)在特定代碼執(zhí)行階段拉取變量和函數(shù)。接下來，讓我們理解Hoisting的意思。
請(qǐng)看下面的例子并猜測(cè)輸出：
console.log(name);
var name; // undefined然而，為什么是undefined？如果我們?cè)谄渌幊陶Z言中使用類似的代碼。在這種情況下，我們將在控制臺(tái)得到報(bào)錯(cuò)，指出該變量name未聲明，而我們正試圖在此之前訪問它。但是在JavaScript的執(zhí)行上下文里：
在創(chuàng)建階段，
在執(zhí)行階段，
這種為變量分配內(nèi)存并賦值為undefined在執(zhí)行上下文的創(chuàng)建階段使用值進(jìn)行初始化的機(jī)制稱為Variable Hoisting（變量提升）。
特殊值undefined意味著聲明了一個(gè)變量但沒有賦值。
如果我們?yōu)樽兞糠峙湟粋€(gè)這樣的值：
name = 'freeCodeCamp';執(zhí)行階段會(huì)將這個(gè)值賦給變量。
現(xiàn)在讓我們談?wù)?/span>Function Hoisting（函數(shù)提升）。它與Variable Hoisting的模式相同。
執(zhí)行上下文的創(chuàng)建階段將函數(shù)聲明放入內(nèi)存，并在執(zhí)行階段執(zhí)行。請(qǐng)看下面的例子：
// Invoke the function functionA
functionA();
// Declare the function functionA
function functionA() {
console.log('Function A');
// Invoke the function FunctionB
functionB();
}
// Declare the function FunctionB
function functionB() {
console.log('Function B');
}輸出如下：
Function A
Function B在創(chuàng)建階段將整個(gè)函數(shù)聲明提前放入內(nèi)存稱為Function Hoisting。
既然我們了解了變量提升的概念，那么讓我們了解一些基本規(guī)則：
logMe();
var logMe = function() {
console.log('Logging...');
}代碼執(zhí)行將中斷，因?yàn)樵诤瘮?shù)初始化時(shí)，變量logMe將作為變量而不是函數(shù)被提升。因此，對(duì)于變量提升，內(nèi)存分配將在初始化時(shí)發(fā)生undefined。這就是我們會(huì)得到錯(cuò)誤的原因：
函數(shù)初始化時(shí)出錯(cuò)
假設(shè)我們嘗試在聲明之前訪問一個(gè)變量，然后使用letandconst關(guān)鍵字來聲明它。在這種情況下，它們將被提升但不會(huì)被分配默認(rèn)值undefined。訪問此類變量將導(dǎo)致ReferenceError. 下面是一個(gè)例子：
console.log(name);
let name;它會(huì)拋出錯(cuò)誤：
使用 let 和 const 關(guān)鍵字聲明的提升變量時(shí)出錯(cuò)
如果我們使用var代替let和，相同的代碼將毫無問題地運(yùn)行const。這個(gè)錯(cuò)誤是因?yàn)樾碌腏avaScript 語言的保護(hù)機(jī)制，防止意外提升可能會(huì)導(dǎo)致不必要的麻煩。
感謝您能看到最后，我希望這篇文章能幫助您更好的理解JavaScript中的執(zhí)行上下文與變量提升的機(jī)制。
原文：https://www.freecodecamp.org/news/javascript-execution-context-and-hoisting/
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
