JS用闭包实现高级排他

最新推荐文章于 2023-12-15 12:08:40 发布
最新推荐文章于 2023-12-15 12:08:40 发布
阅读量368 收藏 2
点赞数 1
分类专栏： 大前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengxianglong123/article/details/84935655
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            background-color: #ccc;
            border: 1px solid #000;
            cursor: pointer;
        }

        .current {
            background-color: orangered;
        }
    </style>
</head>
<body>
<ul>
    <li class="current"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    /*var allLis = document.getElementsByTagName("li");
    for (var i = 0; i < allLis.length; i++) {
        allLis[i].onmouseover = function () {
            for(var j=0; j<allLis.length; j++){
                 allLis[j].className = "";
            }
            this.className = "current";
        }
    }*/

    var allLis = document.getElementsByTagName("li");
    var lastOne = 0;
    for (var i = 0; i < allLis.length; i++) {
        (function (index) {
            allLis[index].onmouseover = function () {
                // 清除
                allLis[lastOne].className = "";
                // 设置
                this.className = "current";
                // 赋值
                lastOne = index;
            }
        })(i);
    }
</script>
</body>
</html>

这个是闭包的应用场景之一，因为闭包的函数中的变量生命周期比较长，所以可以被用来排他，两个（），第一个写函数，第二个写要传递的参数，也就是i会传递给index，每执行一次循环，就会产生一个函数，每个函数都是独立的，这里就相当于产生了allLis.length个函数，每个函数都有自己的index，每次执行完，就把自己的index赋值给全局变量lastOne，这样再有新的事件产生的时候只需要清除lastOne所对应的那个就行，比for循环更加的高效！

落花雨时
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript利用闭包实现模块化
10-20
总的来说，JavaScript的闭包是实现模块化的核心工具。通过创建私有作用域和返回内部函数，我们可以构建出具有封装性和复用性的模块，这对于大型的JavaScript项目尤其重要。理解并熟练掌握闭包和模块化原理，能够帮助...
JS实现闭包中的沙箱模式示例
10-19
本示例通过创建一个自执行函数（Immediately Invoked Function Expression, IIFE）来演示如何在JS中实现闭包中的沙箱模式。 首先，沙箱模式的核心思想是封装，确保模块内部的变量和函数不直接暴露给全局作用域。在...
用闭包实现高级排他
Chaney__Chen的博客
12-20 488
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> li{ background-color: #ccc; border: 1px solid #000; } .current{
Javascript：利用闭包实现高级排他
KaiSarH
02-18 364
高级排他
闭包js
weixin_40878286的博客
08-11 82
闭包 概念：是指有权访问另一个函数作用域中的变量的函数。 1.它的本质是什么 实际上就是一种函数，该函数描述了：函数访问变量时其作用域的问题。 怎么判断他是不是一个闭包呢？ 闭包的表现形式（满足以下形式就是闭包）： 使函数外部能够调用函数内部定义的变量。就形成了一个闭包。说复杂点就是当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行...
闭包的几种使用场景总结
LTT1995的博客
11-10 1万+
1、什么是闭包？ 闭包实际上是一种函数，闭包就是也是函数技术的一种；闭包能做的事情函数几乎都能做。 闭包技术花式比较多，用法也比较灵活，因为闭包技术的分界线并不明显，几乎无法用一个特点去区分。 // 当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包 function test1(){ var age=19; } console.log(age);//Uncaught Reference: age is not defined function test1(){ var age=19;
闭包
qq_35209064的博客
12-31 415
闭包 概念：是指有权访问另一个函数作用域中的变量的函数。 1.它的本质是什么 实际上就是一种函数，该函数描述了：函数访问变量时其作用域的问题。 怎么判断他是不是一个闭包呢？ 闭包的表现形式（满足以下形式就是闭包）： 使函数外部能够调用函数内部定义的变量。就形成了一个闭包。说复杂点就是当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行...
Javascript：闭包、面向对象、构造函数
KaiSarH
01-10 597
文章目录一、闭包技术详解1.1 什么是闭包1.2 封闭作用域JavaScript的GC机制封闭作用域1.3 作用域链1.4 保存作用域1.5 保存全局变量1.6 高级排他1.7 参数传递1.8 函数节流二、面向对象面向对象的特征三、构造函数3.1 关键词new3.2 构造器(constructor) 和 原型属性 (prototype) 一、闭包技术详解 1.1 什么是闭包 闭包实际上是一种函...
js高级
qq_40181206的博客
10-20 1324
js高级 面向对象 三大特性：封装性、继承性、多态性 类：泛指一类 对象：类中的具体某个实例【属性和方法的集合】 属性：特征 对象.属性 方法：行为 对象.方法 ES6 创建类 类名首字母大写 语法： class Star{ } 实例化对象 语法： var n=new Star(); //对象 instanceof 构造函数 //判断对象是否属于该类 console.log(n in...
Javascript中闭包的作用
qq_16546829的博客
10-13 815
闭包是什么干啥的 我就不细讲了  随便搜很多，我就一句话说下： 一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。 目录 闭包的参数传递 函数节流中使用 作用域 作用域链 高级排他中使用   具体的表现形式  就是一个函数尾部有return  输出一个函数，利用这个输出函数把当前函数的局部变量带出来， 如下所示： function test1() ...
闭包及垃圾回收机制
m0_61698324的博客
12-15 125
嵌套之间的函数会形成作用域链，每次对变量的访问实际上都是对整条作用域链的遍历查找，先查找最近的作用域，最后再查找全局作用域，如果在某个作用域找到了对量就会结束本次查找过程。GC机制 : 在JavaScript中，如果一个对象不再被引用，那么这个对象就会被GC回收，否则这个对象一直会保存在内存中。基本数据类型：string，number、boolean、undefined、null。复杂数据类型（引用数据类型）：Object、Array、Date等。栈：函数参数值、局部变量的值等、基本数据类型放到栈里面。
javascript闭包的高级使用方法实例
10-27
在高级使用中，闭包可以用于实现模块化、数据封装、方法扩展和重载、以及创建私有变量。下面将详细解释这些概念，并结合给出的实例进行解析。 1. **模块化**： 通过闭包，我们可以创建一个独立的命名空间，避免...
js闭包实现按秒计数
12-10
这里给大家分享一个小技巧，使用javascript闭包实现按秒计数，代码如下： var i =1; for(i; i<10; i++){ (function(num){ setTimeout(function(){ console.log(num); }, num*1000); })(i); } 重点在闭包的...
Vue 使用Vue-CLI4 创建Vue项目
热门推荐
mengxianglong123的博客
11-07 3万+
安装vue-cli npm install -g @vue/cli-service-global 创建项目 vue create 项目名称 选择手动配置（如果喜欢使用eslint可以选择默认） 键盘上下键即可切换，刚开始其实有两个选项，我之前曾经自定义过，所以有三个。 取消eslint（Linter） 下一步默认 是否保存模板（预设） 创建完成 启动 npm run ...
Vue 在VueCLI4中使用路由（仅适用于Vue2.x）
mengxianglong123的博客
11-08 7751
安装vue-router npm install vue-router 新建一个router文件夹创建一个js文件 index.js // 配置路由相关的信息 import VueRouter from 'vue-router' import Vue from 'vue' import Home from '../components/Home' import About from ...
JS实现移动端可滑动轮播图
mengxianglong123的博客
05-11 6291
HTML： <!--轮播图--> <div class="jd_banner"> <ul class="clearFix"> <li><a href="#"><img src="images/l8.jpg" alt=""></a></li> ...
关于body的默认尺寸
mengxianglong123的博客
12-18 5596
body默认应该是占满全屏的（忽略默认边距的情况下），但是究竟是怎样的一个沾满全屏呢 如果给body设置如下属性 body{ background-color: red; } 效果： 满屏的红色，那么是不是说明body是宽度和高度都是满屏的呢？ 答案是：不是的，我们可以验证一下： 给body设置如下属性： body{ ...
React Native安卓环境搭建（以官网教程为基础进行改进）
mengxianglong123的博客
01-22 3800
本文以官网的教程为基础，进行了一定程度的详细描述，并以Android Studio作为重点进行描述，由于安装环境的具体操作变化很快，故本文也仅供参考，文中所涉及的组件及软件版本为ReactNative-v0.67，Android Studio-2020.3.1，阅读时请注意版本对应 必须安装的依赖有：Node、JDK 和 Android Studio。 虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环.
JS使用闭包实现点赞加1
最新发布
05-09
使用闭包实现点赞加1，可以在HTML页面上添加一个按钮，然后通过JS代码来实现点赞加1的功能。具体实现如下： HTML代码： ```html <button id="btn-like">点赞</button> <p>点赞数：<span id="like-num">0</span></p> ``` JS代码： ```javascript // 点赞数 let likeNum = 0; // 获取点赞按钮和点赞数的元素 const btnLike = document.getElementById('btn-like'); const likeNumEle = document.getElementById('like-num'); // 给点赞按钮绑定点击事件 btnLike.addEventListener('click', function () { // 调用闭包函数，返回一个闭包 const addOne = (function () { // 定义一个私有变量 count，并返回一个匿名函数 let count = 0; return function () { count += 1; return count; } })(); // 调用闭包返回的匿名函数，将点赞数加1 likeNum = addOne(); // 更新点赞数的显示 likeNumEle.innerText = likeNum; }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值