整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
avaScript 變量松散類(lèi)型的本質(zhì)，決定了它只是在特定時(shí)間用于保存特定值的一個(gè)名字而已。由于不存在定義某個(gè)變量必須要保存何種數(shù)據(jù)類(lèi)型值的規(guī)則，變量的值及其數(shù)據(jù)類(lèi)型可以在腳本的生命周期內(nèi)改變。
JavaScript變量分為基本數(shù)據(jù)類(lèi)型和引用類(lèi)型。
基本數(shù)據(jù)類(lèi)型包括：Undefined、Null、Boolean、Number和String
引用數(shù)據(jù)類(lèi)型的值是保存在內(nèi)存中的對(duì)象
定義一個(gè)基本數(shù)據(jù)類(lèi)型與引用類(lèi)型的值是類(lèi)似的：創(chuàng)建一個(gè)變量并為該變量賦值。對(duì)于引用類(lèi)型的值，我們可以動(dòng)態(tài)為其添加屬性和方法，也可以改變和刪除其屬性和方法。
var person=new Object();
person.name="Nicholas";
alert(person.name); //"Nicholas"
復(fù)制代碼對(duì)于基本數(shù)據(jù)類(lèi)型，不可添加或刪除屬性、方法，盡管這不會(huì)導(dǎo)致任何錯(cuò)誤。
var name="Nicholas";
name.age=27;
alert(name.age); //undefined
復(fù)制代碼除了保存方式不同外，在從一個(gè)變量向另一個(gè)變量復(fù)制基本數(shù)據(jù)類(lèi)型和引用類(lèi)型值時(shí)，也存在不同。
如果從一個(gè)變量向另一個(gè)變量復(fù)制基本數(shù)據(jù)類(lèi)型的值，會(huì)在變量對(duì)象上創(chuàng)建一個(gè)新值，然后把該值復(fù)制到新變量分配的位置上。
當(dāng)從一個(gè)變量向另一個(gè)變量復(fù)制引用類(lèi)型的值時(shí)，同樣也會(huì)將存儲(chǔ)在變量對(duì)象中的值復(fù)制一份放到為新變量分配的空間中。不同的是，這個(gè)值的副本實(shí)際上是一個(gè)指針，而這個(gè)指針指向存儲(chǔ)在堆中的一個(gè)對(duì)象。復(fù)制操作結(jié)束后，兩個(gè)變量實(shí)際上將引用同一個(gè)對(duì)象。因此，改變其中一個(gè)變量，就會(huì)影響另一個(gè)變量。
ECMAScript中所有函數(shù)的參數(shù)都是按值傳遞的。也就是說(shuō)，把函數(shù)外部的值復(fù)制給函數(shù)內(nèi)部的參數(shù)，就和把值從一個(gè)變量復(fù)制到另一個(gè)變量一樣。而引用類(lèi)型值的傳遞，則如同引用類(lèi)型變量的復(fù)制一樣。
總之，訪(fǎng)問(wèn)變量有按值訪(fǎng)問(wèn)與按引用訪(fǎng)問(wèn)兩種方式，而參數(shù)只能按值傳遞。
在向參數(shù)傳遞基本類(lèi)型的值時(shí)，被傳遞的值會(huì)被復(fù)制給一個(gè)局部變量（即命名參數(shù)，就是arguments對(duì)象中的一個(gè)元素）。在向參數(shù)傳遞引用類(lèi)型的值時(shí)，會(huì)把這個(gè)值在內(nèi)存中的地址復(fù)制給一個(gè)局部變量，因此這個(gè)局部變量的變化會(huì)反映在函數(shù)的外部。
function addTen(num) {
num +=10;
return num;
}
var count=20;
var result=addTen(count);
alert(count); //20，沒(méi)有變化
alert(result); //30
復(fù)制代碼對(duì)于基本數(shù)據(jù)類(lèi)型的檢測(cè)，可用typeof操作符，可確定一個(gè)變量是字符串、數(shù)值、布爾值，還是undefined。
var s="Nicholas";
var b=true;
var i=22;
var u;
var n=null;
var o=new Object();
alert(typeof s); //string
alert(typeof i); //number
alert(typeof b); //boolean
alert(typeof u); //undefined
alert(typeof n); //object
alert(typeof o); //object
復(fù)制代碼對(duì)于引用類(lèi)型的檢測(cè)，可用instanceof操作符。如果變量是給定引用類(lèi)型（根據(jù)它的原型鏈來(lái)識(shí)別鏈）的實(shí)例，那么instanceof操作符就會(huì)返回true。
alert(person instanceof Object); // 變量 person 是 Object 嗎？
alert(colors instanceof Array); // 變量 colors 是 Array 嗎？
alert(pattern instanceof RegExp); // 變量 pattern 是 RegExp 嗎？
復(fù)制代碼根據(jù)規(guī)定，所有引用類(lèi)型的值都是 Object 的實(shí)例。因此，在檢測(cè)一個(gè)引用類(lèi)型值和 Object 構(gòu)造函數(shù)時(shí)，instanceof 操作符始終會(huì)返回 true。當(dāng)然，如果使用 instanceof 操作符檢測(cè)基本類(lèi)型的值，則該操作符始終會(huì)返回false，因?yàn)榛绢?lèi)型不是對(duì)象。
在之前的一篇文章《前端開(kāi)發(fā)過(guò)程中的HTML規(guī)范，來(lái)學(xué)習(xí)一下吧》中，我們有講過(guò)前端開(kāi)發(fā)過(guò)程中需要注意到的HTML規(guī)范問(wèn)題，今天這篇文章我們繼續(xù)來(lái)看下關(guān)于Javascript的規(guī)范問(wèn)題。
Javascript
我們總是會(huì)在Javascript文件中定義變量，但是一不留神就會(huì)將其定義成全局變量，如果引用的外部JS文件較多，很容易出現(xiàn)全局變量污染的情況。
我們不推薦總是在全局空間定義變量的行為，因?yàn)樗性谌挚臻g定義的變量都是掛在window對(duì)象上，很容易出現(xiàn)變量污染，如下所示。
不推薦-全局變量
IIFE就可以防止出現(xiàn)全局變量污染的情況，IIFE是立即執(zhí)行的函數(shù)表達(dá)式，在IIFE內(nèi)部會(huì)創(chuàng)建一個(gè)封閉的作用域，內(nèi)部定義的變量不會(huì)影響外部的執(zhí)行環(huán)境，而且可以通過(guò)參數(shù)傳遞的形式引用外部變量，最重要的一點(diǎn)是在函數(shù)執(zhí)行完后會(huì)立即釋放占用的內(nèi)存。
我們推薦使用下面這種寫(xiě)法。
推薦寫(xiě)法-IIFE
為了避免全局變量的干擾，我們建議所有腳本文件都從IIFE開(kāi)始。
我們都知道之所以叫立即執(zhí)行的函數(shù)表達(dá)式，是因?yàn)樵诤瘮?shù)表達(dá)式后面會(huì)多一個(gè)執(zhí)行的括號(hào)。這個(gè)執(zhí)行的括號(hào)可以出現(xiàn)在兩個(gè)地方，不管是在內(nèi)部還是外部，都是有效的。但是為了讓整個(gè)函數(shù)表達(dá)式看起來(lái)像一個(gè)整體，我們推薦將括號(hào)寫(xiě)在里面。
因此我們不推薦以下寫(xiě)法。
不推薦寫(xiě)法
而推薦以下寫(xiě)法。
推薦寫(xiě)法
同樣，我們可以通過(guò)參數(shù)傳遞的形式引用外部變量。
引用外部變量
我們都知道在ES5中是沒(méi)有塊級(jí)作用域概念的，只有函數(shù)級(jí)作用域，而且由于變量提升的存在，在函數(shù)內(nèi)部聲明的變量都會(huì)提升至函數(shù)頂部，這就會(huì)造成一些難以預(yù)料的問(wèn)題。
首先我們來(lái)看看變量提升是什么樣的情況？看看下面一段代碼。
變量提升
上面這段代碼返回的結(jié)果是undefined，并不是'Hello Shenzhen'，這是因?yàn)樽兞縱會(huì)在函數(shù)內(nèi)部被提升至函數(shù)頂部，實(shí)際執(zhí)行的其實(shí)是下面這段代碼。
實(shí)際執(zhí)行
為了降低變量提升所帶來(lái)的編碼風(fēng)險(xiǎn)，我們應(yīng)該手動(dòng)聲明定義的變量和方法，并把其放在函數(shù)頂部。
我們不推薦以下寫(xiě)法。
不推薦寫(xiě)法
我們推薦以下寫(xiě)法。
推薦寫(xiě)法
在編寫(xiě)判斷相等類(lèi)型的條件語(yǔ)句時(shí)，總是使用嚴(yán)格相等(===)，這樣可以避免Javascript在執(zhí)行類(lèi)型轉(zhuǎn)換時(shí)帶來(lái)的問(wèn)題。
我們看下面一個(gè)例子，定義一個(gè)函數(shù)，傳入一個(gè)數(shù)字，如果等于5，則將這個(gè)數(shù)加5返回。如果不使用嚴(yán)格等于，在傳入一個(gè)字符串'5'后，會(huì)返回'55'。
沒(méi)有使用嚴(yán)格相等
因此，我們推薦在使用相等判斷時(shí)都采用嚴(yán)格相等(===)。
強(qiáng)烈建議在所有結(jié)束語(yǔ)句后面加上分號(hào)，如果不加上分號(hào)會(huì)引起一些很難發(fā)現(xiàn)的問(wèn)題。我們看看下面一段代碼。
代碼
在上面這段代碼執(zhí)行后，我們發(fā)現(xiàn)即使resultOperation()函數(shù)返回-1，與-1相等，后面的method方法仍然被調(diào)用。
這是因?yàn)樵谏厦娑x的數(shù)組末尾沒(méi)有加上分號(hào)，這個(gè)數(shù)組會(huì)與下面一行的-1當(dāng)做表達(dá)式執(zhí)行，任何非空數(shù)組-1都會(huì)返回NaN，NaN與resultOperation的返回結(jié)果-1不相等，因此后面的method方法會(huì)被執(zhí)行。
省略分號(hào)不寫(xiě)，不只是會(huì)出現(xiàn)上述的問(wèn)題，還有很多，這里不一一列舉。
因此，建議在每個(gè)結(jié)尾的語(yǔ)句后加上分號(hào)，養(yǎng)成一個(gè)好的習(xí)慣。
閉包作為前端面試題中必不可少的知識(shí)點(diǎn)是應(yīng)該要掌握的，而且在前端開(kāi)發(fā)中經(jīng)常會(huì)涉及到，關(guān)于閉包的問(wèn)題，在我寫(xiě)的一篇文章《前端面試中不可逃避的閉包問(wèn)題，你真的了解嗎？》中有詳細(xì)介紹，大家可以好好看下。
今天這篇文章詳細(xì)的介紹了在前端開(kāi)發(fā)過(guò)程中涉及到的Javascript規(guī)范問(wèn)題，可能還不夠全面，大家可以自行補(bǔ)充。
管理服務(wù)專(zhuān)家新鈦云服 林泓輝
與許多同類(lèi)語(yǔ)言相比，JavaScript 是一種易于學(xué)習(xí)的編程語(yǔ)言。但是，如果您想理解、調(diào)試和編寫(xiě)更好的代碼，則需要多加注意一些基本概念。
在本文中，我們將了解兩個(gè)這樣的概念：
作為一個(gè)初學(xué)者的JavaScript，了解這些概念將有助于您了解this關(guān)鍵字，作用域和閉包。
一般來(lái)說(shuō)，一個(gè) JavaScript 源文件會(huì)有多行代碼。作為開(kāi)發(fā)人員，我們將代碼組織成變量、函數(shù)、數(shù)據(jù)結(jié)構(gòu)（如對(duì)象和數(shù)組）等等。
語(yǔ)法環(huán)境決定了我們?nèi)绾我约霸诤翁幘帉?xiě)代碼。看看下面的代碼：
function doSomething() {
var age=7;
// Some more code
}在上面的代碼中，變量age在語(yǔ)法上位于函數(shù)內(nèi)部doSomething。
請(qǐng)注意，我們的代碼不會(huì)按原樣運(yùn)行。它必須由編譯器翻譯成計(jì)算機(jī)可理解的字節(jié)碼。通常，語(yǔ)法環(huán)境在您的代碼中會(huì)有多個(gè)。然而，并不是所有的環(huán)境都會(huì)同時(shí)執(zhí)行。
幫助代碼執(zhí)行的環(huán)境稱(chēng)為執(zhí)行上下文。它是當(dāng)前正在運(yùn)行的代碼，以及有助于運(yùn)行它的一切。可以有很多語(yǔ)法環(huán)境，但當(dāng)前運(yùn)行的代碼只能有一個(gè)執(zhí)行上下文。
查看下圖以了解語(yǔ)法環(huán)境和執(zhí)行上下文之間的區(qū)別：
語(yǔ)法環(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)畫(huà)圖片顯示了源代碼到可執(zhí)行字節(jié)碼的轉(zhuǎn)換。
可執(zhí)行字節(jié)碼的源代碼
所有這些事情都發(fā)生在一個(gè)執(zhí)行上下文中。所以執(zhí)行上下文是代碼的特定部分的執(zhí)行環(huán)境。
有兩種類(lèi)型的執(zhí)行上下文：
每個(gè)執(zhí)行上下文都有兩個(gè)階段：
讓我們?cè)敿?xì)看看它們中的每一個(gè)，并更好地理解它們。
每當(dāng)我們執(zhí)行 JavaScript碼時(shí)，它都會(huì)創(chuàng)建一個(gè)全局執(zhí)行上下文（也稱(chēng)為基本執(zhí)行上下文）。全局執(zhí)行上下文有兩個(gè)階段。
在創(chuàng)建階段，創(chuàng)建了兩個(gè)獨(dú)特的東西：
如果代碼中聲明了任何變量，則會(huì)為該變量分配內(nèi)存。該變量使用唯一key進(jìn)行初始化，并賦值為undefined。
如果代碼中有function ，它會(huì)被直接放入內(nèi)存中。我們將在Hoisting后面的部分中詳細(xì)了解這部分。
代碼執(zhí)行在這個(gè)階段開(kāi)始。在這里進(jìn)行全局變量的賦值。請(qǐng)注意，這里沒(méi)有調(diào)用函數(shù)，因?yàn)樗l(fā)生在函數(shù)執(zhí)行上下文中。我們將在后面討論這個(gè)問(wèn)題。
讓我們通過(guò)幾個(gè)例子來(lái)理解這兩個(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 文件并打開(kāi) Chrome DevTools（快捷鍵通常為F12）或其他瀏覽器也是可以的。選擇console選項(xiàng)卡，鍵入window并按回車(chē)鍵。您可以看到瀏覽器的Window對(duì)象。
windows對(duì)象
現(xiàn)在，輸入this并按回車(chē)鍵。您可以看到和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í)行階段可以訪(fǎng)問(wèn)一個(gè)名為arguments的特殊值。它是傳遞給函數(shù)的參數(shù)。但在我們的示例中，沒(méi)有傳遞任何參數(shù)。
請(qǐng)注意，在全局執(zhí)行上下文中創(chuàng)建的window對(duì)象和this變量仍然可以在此上下文中訪(fǎng)問(wèn)。
當(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)我第一次聽(tīng)說(shuō)Hoisting時(shí)，花了一些時(shí)間才理解這個(gè)意思。
在英語(yǔ)中，hoisting 的意思是使用繩索和滑輪提升某物。這可能會(huì)誤導(dǎo)您認(rèn)為 JavaScript 引擎會(huì)在特定代碼執(zhí)行階段拉取變量和函數(shù)。接下來(lái)，讓我們理解Hoisting的意思。
請(qǐng)看下面的例子并猜測(cè)輸出：
console.log(name);
var name; // undefined然而，為什么是undefined？如果我們?cè)谄渌幊陶Z(yǔ)言中使用類(lèi)似的代碼。在這種情況下，我們將在控制臺(tái)得到報(bào)錯(cuò)，指出該變量name未聲明，而我們正試圖在此之前訪(fǎng)問(wèn)它。但是在JavaScript的執(zhí)行上下文里：
在創(chuàng)建階段，
在執(zhí)行階段，
這種為變量分配內(nèi)存并賦值為undefined在執(zhí)行上下文的創(chuàng)建階段使用值進(jìn)行初始化的機(jī)制稱(chēng)為Variable Hoisting（變量提升）。
特殊值undefined意味著聲明了一個(gè)變量但沒(méi)有賦值。
如果我們?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)存稱(chēng)為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è)我們嘗試在聲明之前訪(fǎng)問(wèn)一個(gè)變量，然后使用letandconst關(guān)鍵字來(lái)聲明它。在這種情況下，它們將被提升但不會(huì)被分配默認(rèn)值undefined。訪(fǎng)問(wèn)此類(lèi)變量將導(dǎo)致ReferenceError. 下面是一個(gè)例子：
console.log(name);
let name;它會(huì)拋出錯(cuò)誤：
使用 let 和 const 關(guān)鍵字聲明的提升變量時(shí)出錯(cuò)
如果我們使用var代替let和，相同的代碼將毫無(wú)問(wèn)題地運(yùn)行const。這個(gè)錯(cuò)誤是因?yàn)樾碌腏avaScript 語(yǔ)言的保護(hù)機(jī)制，防止意外提升可能會(huì)導(dǎo)致不必要的麻煩。
感謝您能看到最后，我希望這篇文章能幫助您更好的理解JavaScript中的執(zhí)行上下文與變量提升的機(jī)制。
原文：https://www.freecodecamp.org/news/javascript-execution-context-and-hoisting/
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
