当前位置：首页 > article >正文

js进阶-作用域是什么

article 2024/11/14 14:00:41

经过前面80多篇文章对js相关内容的讲解，相信大家对js这门语言已经有了一定的知识储备，也掌握了这门语言的相关特性，领会到这门语言的魅力所在，所以从今天开始，会定期更新js进阶相关知识，大家可以持续关注，避免迷路🌼🌼🌼🌼

1. JavaScript的编译原理

尽管JavaScript是一种动态语言，但它仍然遵循编译的过程。在现代JavaScript引擎（如V8）中，代码会经历几个步骤来转换成可执行的机器代码。

编译过程的几个阶段：

解析（Parsing）：
这一阶段包括词法分析和语法分析。词法分析（Lexical Analysis）会将源码拆分成标记（tokens），比如关键字、变量名、操作符等。语法分析（Syntax Analysis）会将这些标记组织成一个抽象语法树（AST，Abstract Syntax Tree），该树描述代码的结构和逻辑。
预编译（Hoisting/Scope Resolution）：
在这一步中，JavaScript引擎会确定变量和函数声明的作用域。JavaScript的“提升（hoisting）”发生在此阶段，即所有变量和函数的声明会被提升到作用域的顶部，但赋值操作仍保持在原始代码位置。提升只影响声明，而不影响初始化。
字节码生成（Bytecode Generation）：
JavaScript并不会立即被编译成机器代码，而是首先被转换成字节码。字节码是一种更抽象的中间表示，它比AST更接近于最终的机器指令。字节码的生成速度较快，且可以被解释器快速执行。
即时编译（JIT Compilation）：
在字节码执行的过程中，JavaScript引擎会通过即时编译器（Just-In-Time Compiler）对热代码（frequently executed code）进行优化，将字节码编译为高效的机器码。JIT使得动态语言的性能大大提升。

2. 理解作用域（Scope）

作用域决定了变量和函数的可访问性以及生命周期。JavaScript中有两种主要的作用域：

全局作用域：
在程序的最外层，所有不在函数或块级作用域中的变量都在全局作用域中。全局变量可以在程序的任何地方访问。
函数作用域：
函数内部的变量只在函数内部可访问。函数作用域的典型特征是封闭性，即局部变量不会泄漏到函数外部。
块级作用域（Block Scope）：
ES6引入了let和const，它们定义的变量有块级作用域。块级作用域限制变量在代码块内的可见性，这与函数作用域不同。例如，if语句、for循环等创建了块级作用域。

function example() {
    var a = 1;  // 函数作用域
    let b = 2;  // 块级作用域
    if (true) {
        let b = 3;  // 这个`b`只在`if`块内有效
        console.log(b);  // 输出3
    }
    console.log(b);  // 输出2
}
example();

3. 作用域嵌套（Scope Nesting）

作用域嵌套是指作用域可以在另一个作用域内。内层作用域可以访问外层作用域的变量，但外层作用域无法访问内层作用域的变量。

JavaScript通过词法作用域（Lexical Scope）规则来决定嵌套作用域的访问权限。词法作用域意味着作用域是在代码编写时就确定的，而不是在代码运行时动态决定的。嵌套作用域允许变量在其定义的作用域及所有内层作用域中使用。

function outer() {
    var a = 10;
    function inner() {
        var b = 20;
        console.log(a);  // 内层作用域可以访问外层的变量
        console.log(b);  // 内层作用域可以访问自身的变量
    }
    inner();
    console.log(b);  // 外层作用域无法访问内层的变量，报错
}
outer();

闭包（Closure）

闭包是指一个函数可以“记住”并继续访问其词法作用域中的变量，尽管这个函数的作用域已经销毁。闭包是作用域嵌套的一个重要应用。

function outer() {
    var a = 10;
    return function inner() {
        console.log(a);  // 虽然`outer`函数已经执行完，但`inner`依然记住了变量`a`
    }
}
const fn = outer();
fn();  // 输出10

4. 异常处理（Exception Handling）

异常是程序执行过程中遇到的意外情况，如试图访问不存在的对象属性或除以零等。JavaScript提供了try...catch机制来处理异常，从而防止程序崩溃。

异常处理的基本语法：

try {
    // 可能会抛出异常的代码
    let result = riskyOperation();
} catch (error) {
    // 当出现异常时执行的代码
    console.error(error);  // 打印错误信息
} finally {
    // 无论是否发生异常都会执行的代码
    cleanup();
}

try块： 包含可能抛出异常的代码。
catch块： 捕获异常并提供处理异常的机制。error对象包含有关错误的信息。
finally块： 无论是否发生异常，finally中的代码都会执行，用于释放资源或执行清理操作。

自定义抛出异常：

JavaScript允许使用throw语句手动抛出异常，异常可以是任何类型的对象。

function validateNumber(num) {
    if (typeof num !== 'number') {
        throw new Error('Expected a number');
    }
    return true;
}

try {
    validateNumber('abc');  // 手动抛出异常
} catch (error) {
    console.error(error.message);  // 输出 "Expected a number"
}

5. 异常的传播

当try块内的代码抛出异常时，如果没有在当前作用域内捕获到异常，它会向上一级作用域传播，直到找到合适的catch块进行处理。如果在全局范围内都没有捕获该异常，程序会终止。

function riskyOperation() {
    throw new Error('Something went wrong');
}

function anotherFunction() {
    riskyOperation();  // 这里抛出的异常会向上传播
}

try {
    anotherFunction();
} catch (error) {
    console.error(error.message);  // 捕获并处理异常
}