8個開發(fā)者必須知道的JavaScript深層概念

譯文

作者：布加迪 2022-10-25 18:46:36

開發(fā)

深入了解你可能不知道的JavaScript概念

　　作者丨Alexander Hafemann

　　譯者 | 布加迪

　　用JavaScript編寫第一段代碼可能需要一天左右的時間，但深入了解其未知知識和背景知識可能讓你在整個職業(yè)生涯受益無窮！

作用域（scope）

　　簡而言之，作用域就是“你可以在代碼中訪問聲明的地方”。

　　我們有兩種作用域：全局作用域和局部作用域，區(qū)別在于你可以在代碼的任何地方訪問全局作用域，但局部作用域在塊內聲明，所以你只能在塊內訪問它們。

　　注意，var關鍵字在變量提升部分中的表現可能略有不同。

{
// 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);

變量let和const的區(qū)別

　　現在我們知道了什么是作用域，所以可以猜測這里最大的區(qū)別之一就是這些關鍵字的作用域。

圖1.圖中所示的表比較了這些關鍵字

變量提升（hoisting）

　　你可能經常聽到這個詞！但這到底是什么呢？簡而言之，變量提升是JavaScript中的一種機制，一些聲明在執(zhí)行之前執(zhí)行該機制；比如冒泡，JS引擎會把它們提升到首位，并聲明它們的位置在其他之前，比如用于變量聲明的var關鍵字；用var引入的變量可以在賦值之前被調用，你會得到undefined的結果，或者用function關鍵字聲明的函數可以在JavaScript中聲明之前被調用。

foo();
function foo() {
// Your function code
}

IIFE

　　這個短語代表“立即調用的函數表達式”，這意味著聲明一經定義就運行的函數，允許將變量和函數設為私有，并確保循環(huán)中的異步代碼被正確執(zhí)行。

(function () {
// …
})();

柯里化（Curring）

　　這是一種處理JavaScript函數的高級技術，它實際上轉換函數，讓你可以在不同的步驟中向函數傳遞參數，并使其在不同的步驟中可以調用。

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

異步

　　在討論事件循環(huán)和web worker方面的內容之前，我們應該弄清楚對JavaScript而言的異步是什么，以及當JavaScript是單線程語言時，它是如何處理的!

　　JavaScript是一種單線程同步編程語言，它本身不支持多線程或異步模式，但是借助瀏覽器（瀏覽器API）和JavaScript底層的某種機制，我們可以擁有異步JavaScript!

圖2

　　上圖確切地說明了JavaScript引擎和我們從瀏覽器獲得的Web API所發(fā)生的事情，不妨解釋一下。

　　JavaScript有一個名為“調用堆?！保–all Stack）的簡單列表，它逐一管理任務（堆棧算法），但是當異步任務被傳遞時，JavaScript會把它彈出到web API，瀏覽器就會處理它；比如setTimeout API，當異步對象的結果準備好時，瀏覽器會通過底層的某種機制把它調回到堆棧中。