JavaScript 中的闭包和事件委托

闭包 (Closures)

闭包是 JavaScript 中一个非常强大的特性,它允许函数访问其外部作用域中的变量,即使在该函数被调用时,外部作用域已经执行完毕。闭包可以帮助我们实现数据的私有化、封装和模块化,使代码更简洁、易读和可维护。

闭包的定义

简单来说,闭包是指有权访问另一个函数作用域中变量的函数。

复制代码
复制代码
function outerFunction() {
    let outerVariable = "I am outside!";

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

    return innerFunction;
}

const closure = outerFunction();
closure(); // 输出: I am outside!
复制代码
复制代码

 

在上述例子中,innerFunction 就是一个闭包,它可以访问 outerFunction 中的 outerVariable,即使 outerFunction 已经执行完毕。

闭包的应用

  1. 数据私有化

复制代码
复制代码
function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2
console.log(counter()); // 输出: 3
复制代码
复制代码

 

 

在这个例子中,count 变量被封装在 createCounter 函数的作用域内,只能通过返回的闭包函数进行访问和修改。

  1. 模拟块级作用域

在 ES6 之前,JavaScript 没有块级作用域,我们可以使用闭包来模拟块级作用域。

复制代码
复制代码
for (var i = 1; i <= 3; i++) {
    (function(i) {
        setTimeout(function() {
            console.log(i);
        }, i * 1000);
    })(i);
}
// 输出: 1, 2, 3 (每隔一秒输出一个数字)
复制代码
复制代码

 

通过立即执行函数表达式 (IIFE),为每次循环创建了一个新的作用域,从而使 setTimeout 中的 i 保持正确的值。

事件委托 (Event Delegation)

事件委托是一种利用事件冒泡机制,将事件监听器添加到父元素上,从而管理多个子元素事件处理的一种技术。它可以减少内存占用,提高性能,特别是在需要处理大量动态生成的子元素事件时非常有用。

事件委托的定义

通过将事件监听器添加到父元素上,当子元素的事件被触发时,事件会冒泡到父元素,由父元素的事件监听器进行处理。

<ul id="parent">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
document.getElementById('parent').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log(event.target.innerText); // 输出点击的列表项的文本
    }
});

 

在这个例子中,我们只为 ul 元素添加了一个点击事件监听器,但可以处理所有 li 元素的点击事件。

事件委托的应用

  1. 动态内容

当页面上有大量动态生成的元素时,使用事件委托可以简化事件处理。

复制代码
复制代码
const list = document.getElementById('parent');
document.getElementById('addItem').addEventListener('click', function() {
    const newItem = document.createElement('li');
    newItem.innerText = `Item ${list.children.length + 1}`;
    list.appendChild(newItem);
});
复制代码
复制代码

 

  1. 提高性能

当需要为大量元素添加事件监听器时,事件委托可以显著提高性能,因为只需要为父元素添加一个事件监听器,而不是为每个子元素添加。

<button id="addItem">Add Item</button>
<ul id="parent">
    <!-- 动态生成的列表项 -->
</ul>

 

总结

闭包能够访问外部函数作用域中的变量,从而实现数据私有化和封装;

事件委托利用事件冒泡机制,通过将事件监听器添加到父元素上,简化了事件处理,提高了性能。

 

 

2024-08-03 13:31:23【出处】:https://www.cnblogs.com/zx618/p/18339486

=======================================================================================

posted on   jack_Meng  阅读(16)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
历史上的今天:
2023-08-03 DevChat VSCode 插件安装配置指南
2023-08-03 我用 GPT-4 生成了性能全网第一的 Golang Worker Pool,轻松打败 GitHub 万星项目
2023-08-03 .NET Core WebAPI中使用Swagger(完整教程)
2020-08-03 C# 中捕获C/C++抛出的异常
2020-08-03 结构化思考力
2020-08-03 对象序列化解析
2020-08-03 单元测试的规范

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示

喜欢请打赏

扫描二维码打赏

支付宝打赏

主题色彩