白骑士的JavaScript教学语法基础篇之函数 2.4.4 函数作用域与闭包

最新推荐文章于 2025-12-22 21:38:10 发布

原创最新推荐文章于 2025-12-22 21:38:10 发布 · 767 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

教学同时被 2 个专栏收录

339 篇文章

订阅专栏

JavaScript

65 篇文章

订阅专栏

在JavaScript中，函数作用域与闭包是理解代码行为和执行顺序的关键概念。它们决定了变量的可访问性和生命周期，以及函数如何记住并访问外部变量。理解这些概念不仅能帮助你避免常见的编程错误，还能让你编写出更高效、灵活的代码。

函数作用域

作用域指的是代码中变量和函数的可访问范围。在JavaScript中，作用域有两种主要类型：全局作用域和局部作用域。函数作用域则是局部作用域的一种特殊形式，指的是在函数内部声明的变量只在该函数内部可见。

全局作用域

全局作用域中的变量可以在代码的任何地方访问。如果变量在函数外部声明，它就是全局变量。

示例

let globalVar = "I am global";

function showGlobalVar() {
    console.log(globalVar); // 输出 "I am global"
}

showGlobalVar();
console.log(globalVar); // 输出 "I am global"

在这个示例中，‘globalVar‘ 是全局变量，可以在 ‘showGlobalVar‘ 函数内部和外部访问。

局部作用域

局部作用域指的是在函数内部声明的变量，这些变量只能在该函数内部访问，函数外部无法访问。

示例

function showLocalVar() {
    let localVar = "I am local";
    console.log(localVar); // 输出 "I am local"
}

showLocalVar();
console.log(localVar); // 报错：localVar 未定义

在这个示例中，‘localVar‘ 是一个局部变量，只能在 ‘showLocalVar‘ 函数内部访问，函数外部无法访问该变量。

块级作用域（ES6引入）

在ES6之前，JavaScript只有全局作用域和函数作用域。然而，随着 ‘let‘ 和 ‘const‘ 关键字的引入，JavaScript中新增了块级作用域。块级作用域指的是由 ‘{}‘ 包围的代码块内部的作用域，通常出现在 ‘if‘、‘for‘ 等语句中。

示例

if (true) {
    let blockVar = "I am block scoped";
    console.log(blockVar); // 输出 "I am block scoped"
}

console.log(blockVar); // 报错：blockVar 未定义

在这个示例中，‘blockVar‘ 是块级作用域变量，只能在 ‘if‘ 语句块内访问，块外无法访问。

闭包

闭包是JavaScript中一个强大且复杂的概念。简而言之，闭包是指一个函数能够访问其外部（即创建它的上下文）函数的变量。即使外部函数已经执行完毕并返回，闭包仍然可以记住并访问这些变量。

闭包的概念

当一个函数在其定义的作用域外被调用时，它仍然“记得”定义时的作用域，并可以访问其中的变量。这种现象就是闭包。

示例

function outerFunction() {
    let outerVar = "I am from outer function";

    function innerFunction() {
        console.log(outerVar); // 可以访问 outerVar
    }

    return innerFunction;
}

const closure = outerFunction();
closure(); // 输出 "I am from outer function"

在这个示例中，‘innerFunction‘ 是一个闭包。即使 ‘outerFunction‘ 已经执行完毕，‘innerFunction‘ 依然能够访问 ‘outerVar‘。

闭包的实际应用

闭包在JavaScript中有许多实际应用，以下是几个常见的应用场景：

数据隐藏和封装

闭包可以用于创建私有变量，从而隐藏数据的实现细节。

示例

function createCounter() {
    let count = 0;

    return function() {
        count += 1;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 输出 1
console.log(counter()); // 输出 2
console.log(counter()); // 输出 3

在这个示例中，‘count‘ 变量是私有的，只有通过返回的匿名函数才能访问和修改它。这是一种封装数据的常见方式。

回调函数

闭包常用于回调函数中，确保在异步操作中仍能访问所需的变量。

示例

function fetchData(url) {
    let data = "Initial data";

    setTimeout(function() {
        console.log("Fetched data from " + url + ": " + data);
    }, 1000);
}

fetchData("https://example.com");

在这个示例中，匿名函数作为回调函数，通过闭包访问了外部函数中的 ‘data‘ 变量。

模块模式

闭包是JavaScript模块模式的基础，用于创建有私有状态和方法的对象。

示例

const myModule = (function() {
    let privateVar = "I am private";

    function privateMethod() {
        console.log(privateVar);
    }

    return {
        publicMethod: function() {
            privateMethod();
        }
    };
})();

myModule.publicMethod(); // 输出 "I am private"

在这个示例中，‘myModule‘ 使用闭包创建了一个模块，私有变量和方法无法从外部访问，只有通过公开的 ‘publicMethod‘ 方法才能间接访问。

闭包的注意事项

尽管闭包在很多场景中非常有用，但也需要注意一些可能带来的问题。

内存泄漏

由于闭包会保持对外部变量的引用，如果不适当地使用，可能会导致内存泄漏。例如，长期存在的闭包可能会占用内存空间，导致性能问题。

变量捕获

闭包捕获的变量是引用，而非值。这意味着如果外部变量的值发生改变，闭包内的引用也会随之改变。

示例

function createFunctions() {
    const functions = [];

    for (var i = 0; i < 3; i++) {
        functions.push(function() {
            console.log(i);
        });
    }

    return functions;
}

const funcs = createFunctions();
funcs[0](); // 输出 3
funcs[1](); // 输出 3
funcs[2](); // 输出 3

在这个示例中，由于 ‘i‘ 是 ‘var‘ 声明的全局变量，最终输出的都是 ‘3‘。为了解决这个问题，可以使用 ‘let‘ 声明局部变量，或使用立即执行函数（IIFE）创建独立的作用域。

总结

函数作用域和闭包是JavaScript中的核心概念，它们决定了变量的可访问性和函数的行为。通过理解和掌握这些概念，你可以编写出更灵活、高效的代码，尤其在处理复杂的异步操作、数据封装和模块化编程时，闭包提供了强大的支持。在实际开发中，合理运用作用域和闭包将帮助你避免常见错误，并提升代码的可维护性和可读性。