自学内容网 自学内容网

JavaScript复习记录(6)— 对闭包的理解,闭包使用场景

闭包(Closure)指的是一个函数可以访问其外部作用域(即使这个函数是在外部作用域之外执行的)。换句话说,闭包是函数和声明该函数的词法环境的组合。

闭包的形成

闭包在以下情况下形成:当一个内部函数被保存到外部后,即使外部函数已经执行完毕,内部函数仍然可以访问外部函数中的变量。

function outerFunction() {
    var outerVar = "I'm outside!";

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

    return innerFunction;
}

var closureFunction = outerFunction();
closureFunction(); // "I'm outside!"

在这个例子中,innerFunctionouterFunction执行结束后仍然可以访问outerVar,这就是闭包的体现。

闭包的使用场景

1. 数据隐藏和封装

闭包可以用于创建私有变量,从而实现数据隐藏和封装。

function createCounter() {
    let count = 0;

    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.decrement(); // 1
console.log(counter.getCount()); // 1
2. 事件处理器和回调函数

在事件处理器和回调函数中使用闭包,可以访问外部函数的变量,从而在事件触发时使用这些变量。

function attachEventHandler(element, value) {
    element.onclick = function() {
        console.log(value);
    };
}

const button = document.createElement('button');
button.textContent = 'Click me';
document.body.appendChild(button);

attachEventHandler(button, 'Button clicked!');
3. 模块模式

闭包是实现模块模式的基础,使得模块内部的变量和函数对外部不可见,只暴露出公共接口。

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

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

    return {
        publicFunction: function() {
            privateFunction();
        }
    };
})();

myModule.publicFunction(); // "I am private"
4. 创建工厂函数

闭包可以用于创建工厂函数,根据不同的参数生成不同的功能实例。

function createGreeter(greeting) {
    return function(name) {
        console.log(greeting + ', ' + name);
    };
}

const sayHello = createGreeter('Hello');
sayHello('Alice'); // "Hello, Alice"
sayHello('Bob');   // "Hello, Bob"

const sayHi = createGreeter('Hi');
sayHi('Charlie'); // "Hi, Charlie"
5. 减少全局变量的使用

通过使用闭包,可以避免污染全局命名空间,减少全局变量的使用。

(function() {
    var localVar = "I'm local";
    console.log(localVar); // "I'm local"
})();

console.log(localVar); // Error: localVar is not defined

原文地址:https://blog.csdn.net/qq_52050536/article/details/140554476

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!