深入理解JavaScript核心机制：从作用域到异步执行

掌握JavaScript的基础语法或许只需一天，但深入探究其底层原理与背景知识，将为你的整个职业生涯带来深远影响。

1. 作用域（scope）

简单来说，作用域定义了变量在代码中可被访问的有效范围。

JavaScript主要包含两种作用域：全局作用域和局部作用域。全局作用域中的变量可以在代码的任何位置被访问，而局部作用域通常在代码块内部声明，其访问权限仅限于该代码块内部。

需要注意的是，使用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);

2. 变量let和const的区别

明确了作用域的概念后，我们可以推测，let和const这两个关键字之间最显著的区别之一就在于它们的作用域规则。

图1展示了上述关键字之间的对比表格。

3. 变量提升（hoisting）

你可能经常听到这个术语，但它究竟指什么？简而言之，变量提升是JavaScript的一种机制，某些声明会在代码执行前被处理。类似于冒泡过程，JavaScript引擎会将这些声明提升到作用域的顶部，使其位置优先于其他代码。例如，使用var关键字声明的变量，即使在赋值之前被调用，也不会报错，而是返回undefined；同样，使用function关键字声明的函数，可以在定义之前被调用。

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

4. IIFE

IIFE是“立即调用函数表达式”（Immediately Invoked Function Expression）的缩写。它指的是在定义后立即执行的函数，这种模式允许将变量和函数设置为私有状态，并确保循环中的异步代码能够正确执行。

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

5. 柯里化（Currying）

这是一种处理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

6. 异步

在讨论事件循环和Web Worker之前，我们需要明确JavaScript中的异步概念，以及作为单线程语言的JavaScript是如何处理异步操作的。

JavaScript是一种单线程同步编程语言，其本身并不直接支持多线程或异步模式。然而，借助浏览器提供的API以及JavaScript底层的某些机制，我们可以实现异步JavaScript编程。

上图详细展示了JavaScript引擎与浏览器Web API之间的交互过程，下面进行具体解释。

JavaScript维护一个名为“调用堆栈”（Call Stack）的列表，用于按顺序管理任务（遵循栈算法）。当遇到异步任务时，JavaScript会将其从调用堆栈弹出并交给Web API处理；例如setTimeout API。当异步任务的结果准备就绪时，浏览器会通过底层机制将其重新推回调用堆栈。

7. 事件循环

还记得前面提到的异步任务完成后会返回调用堆栈吗？负责处理这一机制的部分被称为“事件循环”。

事件循环会持续检查调用堆栈。如果堆栈中没有任务且处于空闲状态，它会按照优先级将对象推送到调用堆栈中执行。

8. 回调和微任务队列

假设有两个异步任务在同一秒内完成，它们都刚从Web API返回，那么哪一个会先被推送到回调队列中？

JavaScript为此提供了一种机制，将回调请求分为两类：微任务（Microtask）和宏任务（Macrotask）。

宏任务队列包含从setTimeout() API获取的普通回调函数，这些函数在计时器到期后进入队列。

宏任务的优先级低于微任务队列，后者负责将回调函数获取到事件循环中。

微任务队列通过Promise（承诺）和Mutation Observer（变异观察者）获取回调函数。

到此这篇关于8个开发者必须知道的JavaScript深层概念的文章就介绍到这了,更多相关JavaScript深层概念内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！