首页 > 编程语言 >JavaScript 中的闭包和事件委托

JavaScript 中的闭包和事件委托

时间:2024-08-02 19:38:44浏览次数:15  
标签:闭包 function 元素 委托 作用域 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>

 

总结

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

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

 

标签:闭包,function,元素,委托,作用域,JavaScript,事件,监听器
From: https://www.cnblogs.com/zx618/p/18339486

相关文章

  • JavaScript (八)——JavaScript 作用域和事件
    目录JavaScript 作用域JavaScript局部作用域JavaScript全局变量JavaScript变量生命周期HTML中的全局变量JavaScript 事件HTML事件常见的HTML事件JavaScript可以做什么?JavaScript 作用域作用域是可访问变量的集合。在JavaScript中,作用域为可访问变......
  • JavaScript(十二)——JavaScript for 循环和while循环
    目录JavaScript for循环不同类型的循环For循环For/In循环JavaScript while循环while循环语法实例do/while循环语法实例比较for和whileJavaScript for循环循环可以规定代码块执行指定的次数。不同类型的循环JavaScript支持不同类型的循环:for......
  • javascript学习 - 函数介绍
    函数简介编程时,可能会定义许多相同或者功能相似的代码,此时我们每需要使用一次,就需要重写编写一次。虽然利用循环结构也能够实现一些简单的重复操作,但是功能较为局限。此时,我们就需要使用到JavaScript中的函数。所谓函数,就是通过将一段可以重复调用的代码块进行封装,从而......
  • javascript学习 - 面向对象
    什么是对象之前学习的数据类型在存储一些复杂的信息时,十分不方便,而且也难以区分。为此,为了更加详细方便的描述某一个事物,因而提出面向对象的概念。那什么是对象呢?所谓对象,也是JavaScript中的一种数据类型,可以看做是一系列无序数据的集合。有了对象,就可以用来描述某一......
  • javascript学习 - 数组应用
    什么是数组之前的学习中,如果我们要存储一个值,一般都是通过变量来存储。但如果我们现在想要存储一系列的值,又该如何存储呢,你可能会说可以用多个变量来进行存储。这种方法也可以,但如果你想,一旦值过多,那岂不是就要多个变量,到时候管理就很混乱了。这时候就想,有没有一个可以存储......
  • javascript学习 - 流程控制
    一个程序中,各个代码之间的执行顺序对于程序结果是会造成影响的。就拿下面简单的例子来说,假如我们拿先使用num这个变量然后再定义和先定义变量再使用相比。先使用再定义会报错undefined,而定义再使用就没有问题。也就是说,代码的先后顺序会对我们的程序结果造成直接影响。c......
  • javascript: vue create project in WebStorm
     route/index.js import{createRouter,createWebHistory,createWebHashHistory}from'vue-router'importHomeViewfrom'../views/HomeView.vue'importAboutViewfrom"../views/AboutView.vue";constrouter=createRouter(......
  • JavaScript中的this指向问题
    <!DOCTYPEhtml><html> <head>  <metacharset="UTF-8"/>  <title>Document</title> </head> <body>  <!--this问题  1.当函数作为普通函数调用时,this在非严格模式下指向全局对象(浏览器中是window,Node.js中是global),......
  • JavaScript入门须知
    一、JavaScript概念1.javascript是一门跨平台,面向对象的脚本语言,用来控制网页行为,可使网页交互2.java和js完全不一样,无论是概念还是设计都是完全不一样的,但是它们的基础语法相似。3.在1995年由BrendanErich发明,于1997年成为ECMA的标准4.ECMA欧洲协会标准,ECMAScript(ES6)是......
  • JavaScript(四)——JavaScript 语法
    目录JavaScript语法JavaScript字面量JavaScript变量JavaScript操作符JavaScript语句JavaScript关键字JavaScript注释JavaScript数据类型JavaScript函数JavaScript字母大小写JavaScript字符集驼峰命名法小驼峰命名法大驼峰命名法(帕斯卡命名法)JavaS......