8個開發(fā)者必須知道的JavaScript深層概念(推薦)
用JavaScript編寫第一段代碼可能需要一天左右的時間,但深入了解其未知知識和背景知識可能讓你在整個職業(yè)生涯受益無窮!
1. 作用域(scope)
簡而言之,作用域就是“你可以在代碼中訪問聲明的地方”。
我們有兩種作用域:全局作用域和局部作用域,區(qū)別在于你可以在代碼的任何地方訪問全局作用域,但局部作用域在塊內(nèi)聲明,所以你只能在塊內(nèi)訪問它們。
注意,var關(guān)鍵字在變量提升部分中的表現(xiàn)可能略有不同。
{ // Local scope and correct const access_inside_block = 'test'; console.log(access_inside_block); } // Error, you can't access the variable here // You're not in the scope console.log(access_inside_block);
2. 變量let和const的區(qū)別
現(xiàn)在我們知道了什么是作用域,所以可以猜測這里最大的區(qū)別之一就是這些關(guān)鍵字的作用域。
圖1.圖中所示的表比較了這些關(guān)鍵字
3. 變量提升(hoisting)
你可能經(jīng)常聽到這個詞!但這到底是什么呢?簡而言之,變量提升是JavaScript中的一種機制,一些聲明在執(zhí)行之前執(zhí)行該機制;比如冒泡,JS引擎會把它們提升到首位,并聲明它們的位置在其他之前,比如用于變量聲明的var關(guān)鍵字;用var引入的變量可以在賦值之前被調(diào)用,你會得到undefined的結(jié)果,或者用function關(guān)鍵字聲明的函數(shù)可以在JavaScript中聲明之前被調(diào)用。
foo(); function foo() { // Your function code }
4. IIFE
這個短語代表“立即調(diào)用的函數(shù)表達(dá)式”,這意味著聲明一經(jīng)定義就運行的函數(shù),允許將變量和函數(shù)設(shè)為私有,并確保循環(huán)中的異步代碼被正確執(zhí)行。
(function () { // … })();
5. 柯里化(Curring)
這是一種處理JavaScript函數(shù)的高級技術(shù),它實際上轉(zhuǎn)換函數(shù),讓你可以在不同的步驟中向函數(shù)傳遞參數(shù),并使其在不同的步驟中可以調(diào)用。
function curry(f) { // curry(f) does the currying transform return function(a) { return function(b) { return f(a, b); }; }; } // usage function sum(a, b) { return a + b; } let curriedSum = curry(sum); alert(curriedSum(1)(2)); // 3
6. 異步
在討論事件循環(huán)和web worker方面的內(nèi)容之前,我們應(yīng)該弄清楚對JavaScript而言的異步是什么,以及當(dāng)JavaScript是單線程語言時,它是如何處理的!
JavaScript是一種單線程同步編程語言,它本身不支持多線程或異步模式,但是借助瀏覽器(瀏覽器API)和JavaScript底層的某種機制,我們可以擁有異步JavaScript!
上圖確切地說明了JavaScript引擎和我們從瀏覽器獲得的Web API所發(fā)生的事情,不妨解釋一下。
JavaScript有一個名為“調(diào)用堆棧”(Call Stack)的簡單列表,它逐一管理任務(wù)(堆棧算法),但是當(dāng)異步任務(wù)被傳遞時,JavaScript會把它彈出到web API,瀏覽器就會處理它;比如setTimeout API,當(dāng)異步對象的結(jié)果準(zhǔn)備好時,瀏覽器會通過底層的某種機制把它調(diào)回到堆棧中。
7. 事件循環(huán)
還記得上面我告訴過你,異步對象在后臺完成后會返回到調(diào)用堆棧中嗎?處理這一機制的部分被稱為“事件循環(huán)”。
事件循環(huán)會不斷檢查調(diào)用堆棧,如果里面沒有任務(wù)而且是空閑的,它會按優(yōu)先級把對象推送到調(diào)用堆棧中。
8. 回調(diào)和微任務(wù)隊列
想象一下,有兩個異步任務(wù)在同一秒內(nèi)完成,它們都剛剛從web API返回,那么哪一個會先被推送到回調(diào)?
JavaScript對此有一個機制,它將回調(diào)請求分為兩個部分:微任務(wù)和宏任務(wù)。
宏任務(wù)隊列在計時器到期后從setTimeout() API獲得普通的回調(diào)函數(shù)。
宏任務(wù)的優(yōu)先級低于用于將回調(diào)函數(shù)獲取到事件循環(huán)的微任務(wù)隊列。
微任務(wù)隊列通過承諾(Promises)和變異觀察者(Mutation Observer)獲取回調(diào)函數(shù)。
到此這篇關(guān)于8個開發(fā)者必須知道的JavaScript深層概念的文章就介紹到這了,更多相關(guān)JavaScript深層概念內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
window.print()打印html網(wǎng)頁的兩種方法實現(xiàn)
本文主要介紹了window.print()打印html網(wǎng)頁的兩種方法實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06js window.print實現(xiàn)打印特定控件或內(nèi)容
window.print可以打印網(wǎng)頁,但有時候我們只希望打印特定控件或內(nèi)容,怎么辦呢?可以把要打印的內(nèi)容放在div中,然后用下面的代碼進(jìn)行打印,希望對大家有所幫助2013-09-09手機端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實現(xiàn)
這篇文章主要介紹了手機端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實現(xiàn),感興趣的小伙伴們可以參考一下2016-08-08JS實現(xiàn)改變HTML上文字顏色和內(nèi)容的方法
這篇文章主要介紹了JS實現(xiàn)改變HTML上文字顏色和內(nèi)容的方法,涉及JS數(shù)學(xué)運算與頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12