小白自学:js中的闭包

前言

作为一名前端小白,我今天get到了js中的一个重要的知识点,那就是闭包,让我们从新梳理一下闭包的概念、作用和用法吧

什么是闭包?

闭包是 JavaScript 中的一个重要概念,它允许函数访问其外部作用域中的变量。换句话说,闭包可以捕获并存储其外部作用域的状态,即使在其外部函数执行完毕后仍然可以访问这些变量。

闭包的工作原理

要理解闭包的工作原理,我们首先需要知道 JavaScript 中的作用域链。当一个函数被创建时,它会创建一个作用域链,其中包含了它能够访问的所有变量和函数。当函数需要访问一个变量时,它首先会在自己的作用域中查找,如果没有找到,则会向上级作用域继续查找,直到找到该变量或者到达全局作用域为止。

闭包的实现就是通过维持对外部变量的引用来实现的。当内部函数(闭包)访问外部函数中的变量时,JavaScript 引擎会确保这些变量的引用不会被垃圾回收,即使外部函数已经执行完毕,这样就形成了闭包。

闭包的应用场景

闭包在 JavaScript 中有许多实际的应用场景,其中最常见的是在事件处理函数和回调函数中使用。通过闭包,我们可以轻松地将数据和行为封装起来,使得代码更加模块化和灵活。

示例:

让我们来看一个简单的示例,演示闭包在 JavaScript 中的应用:

function outerFunction() {
    var value = "abc"
}
console.log(value) // 外部无法访问内部变量

如果改成下面的样子:

function outerFunction() {
    var outerVar = 'I am from outer function';

    function innerFunction() {
        console.log(outerVar); // 内部函数可以访问外部函数的变量
    }

    return innerFunction;
}

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

在这个示例中,innerFunction 是一个闭包,它可以访问外部函数 outerFunction 中的变量 outerVar,即使 outerFunction 已经执行完毕。
这是因为当outerFunction函数执行完成之后,存放代码执行的调用栈会将它清除,但是由于innerFunction函数里面有outerFuncion中需要的变量outerVar,所以就会形成一个类似于包裹的东西,将outerFunction保存下来,当后续代码执行时,就可以调用函数体内存有的变量,

闭包的一些常见应用方法

封装变量和函数:

闭包可以帮助我们封装变量和函数,以防止其被外部访问和修改。这种封装使得变量和函数成为私有的,只能在内部函数中访问,从而提高了代码的安全性和可维护性。

function createCounter() {
    let count = 0;

    function increment() {
        count++;
        console.log(count);
    }

    return increment;
}

let counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2

在这个例子中,createCounter 函数返回了一个内部函数 incrementcount 变量被封装在 createCounter 的作用域内,并且只能通过返回的 increment 函数来访问和修改。这样可以防止外部直接修改 count 变量,从而确保了其安全性。

实现模块化和私有化:

闭包可以帮助我们实现模块化的代码结构,并且实现一些私有变量和函数,避免了全局命名空间的污染。

let module = (function() {
    let privateVar = 'I am a private variable';

    function privateFunction() {
        console.log('I am a private function');
    }

    return {
        publicVar: 'I am a public variable',
        publicFunction: function() {
            console.log('I am a public function');
            console.log(privateVar); // 内部函数可以访问私有变量
            privateFunction(); // 内部函数可以调用私有函数
        }
    };
})();

console.log(module.publicVar); // 输出 'I am a public variable'
module.publicFunction(); // 输出 'I am a public function' 和 'I am a private function'

在这个例子中,我们使用立即执行函数创建了一个模块,模块内部包含了一些私有变量和函数,以及一些公有的接口(publicVar 和 publicFunction)。只有公有接口可以被外部访问,而私有变量和函数则对外部是不可见的,从而实现了模块化和私有化的效果。

结语

希望通过本文的介绍,你对 JavaScript 中的闭包有了更清晰的理解。闭包是 JavaScript 中非常有用的功能之一,它可以帮助我们更好地组织和管理代码,同时也能够解决一些特定的问题。继续学习和实践,你会发现闭包的强大之处,并能够熟练地运用它们来编写更加优雅和高效的 JavaScript 代码。

原文链接:https://juejin.cn/post/7341340317659054089 作者:丁丶知了

(0)
上一篇 2024年3月3日 上午10:01
下一篇 2024年3月3日 上午10:12

相关推荐

发表评论

登录后才能评论