闭包小案例

最新推荐文章于 2023-04-18 14:12:24 发布
最新推荐文章于 2023-04-18 14:12:24 发布
阅读量107 收藏
点赞数
分类专栏： js 文章标签： javascript html 前端

案例一：点击li获取索引

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <ul class="nav">
        <li>留恋</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>草莓</li>
    </ul>
    <script>
        // 1. 动态添加属性
        var lis = document.querySelector('.nav').querySelectorAll('li')
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i
            lis[i].onclick = function() {
                console.log(this.index)
            }
        }
        // 2.闭包方式
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                lis[i].onclick = function() {
                    console.log(i)
                }
            })(i);
        }
    </script>
</body>

</html>

案例二，三秒后打印li所有的内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <ul class="nav">
        <li>留恋</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>草莓</li>
    </ul>
    <script>
        // 1.闭包方式 3s后打印所有的li元素的内容
        var lis = document.querySelector('.nav').querySelectorAll('li')
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                setInterval(() => {
                    console.log(lis[i].innerHTML)
                }, 3000);
            })(i);
        }
    </script>
</body>

</html>

案例3 车价格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <ul class="nav">
        <li>留恋</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>草莓</li>
    </ul>
    <script>
        var car = (function() {
            var start = 13; //起步价
            var total = 0; //总价
            return {
                //正常的总价
                price: function(n) {
                    if (n <= 3) {
                        total = start
                    } else {
                        total = start + (n - 3) * 5
                    }
                    return total
                },
                //拥堵后的费用
                yd: function(flag) {
                    return flag ? total + 10 : total
                }
            }
        })();
        console.log(car.price(1))
        console.log(car.yd(1))
    </script>
</body>

</html>

cc&
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
闭包 （举例）
m0_63476377的博客
12-10 2187
闭包 例： sum是函数作用域里面的变量，也称局部变量，外面没有办法直接访问这个局部变量，除非把sum最为返回值返回出去，外面才可以访问sum。 function add(){ var sum = 0; for ( var i = 0 ;i<arguments.length;i++){ sum = sum + arguments[i]; } return sum; } 既然是在函数中，可以把一个变量返回出去，那么自然也可以把一个函数返回出去。（3.
闭包案例
weixin_46536890的博客
03-20 199
前言 闭包是一个有权访问另一个函数作用域内变量的函数 闭包的作用：延伸变量的作用范围 一、利用闭包点击 li 输出当前 li 的索引号以及实现3秒后打印li元素的内容 <body> <ul> <li>西瓜</li> <li>草莓</li> <li>芒果</li> <li>香蕉</li> </ul> <script>
闭包简单例子
m0_62170162的博客
04-18 322
闭包：一个函数和它的周围状态的引用捆绑在一起的组合
闭包以及闭包的典型例子
weixin_46700025的博客
05-17 1008
1.闭包就是一个封闭的空间，存放会被使用的变量。 2.引用外部变量就会产生闭包。 3.可以自定义闭包，可以让外部环境访问到函数内部的变量，使得内部变量持续保存。解决了全局变量污染的问题。 典型例子： for(var i = 0;i<=3;i++){ setTimeout(function(){ console.log(i); },1000); }//由于访问外部变量形成闭包，访问的是相同变量i，i只有一个：4444 for(var i = 0;i<=3;
JS学习笔记之闭包小案例分析
12-02
本文实例讲述了JS学习笔记之闭包小案例。分享给大家供大家参考，具体如下： 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</...
Swift中闭包实战案例详解
08-31
Swift中的闭包是一种强大的编程工具，它允许我们将一段代码封装为一个独立的实体，可以在程序的各个地方被传递和调用。与Objective-C中的Block类似，闭包可以在函数内部或外部定义，可以捕获和存储其所在上下文的...
闭包与高阶函数案例解答
最新发布
06-03
什么是闭包 `当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。` 偏函数和柯里化的区别： 柯里化是把一个接受 n 个参数的函数，由原本的一次性传递所有参数并执行...
500套JavaScript小案例
05-11
这些JavaScript小案例旨在通过实践帮助学习者巩固基础知识，理解函数、变量、条件语句、循环、数组、对象等核心概念，并进一步探索高级特性，如闭包、原型链、Promise、async/await等。每个案例都是一个独立的学习...
闭包的两个经典例子
m_review的博客
04-22 9688
第一种 下面这段代码想要循环延时输出结果 0 1 2 3 4,请问输出结果是否正确,如果不正确,请说明为什么,并修改循环内的代码使其输出正确结果 for (var i = 0; i &lt; 5; ++i) { setTimeout(function() { console.log(i + " "); }, 100); } 输出结果为 5 5 5 5 5 答案：不能...
闭包案例解析
webDevelopSnail的博客
03-04 406
1.闭包概念分析 1.1概念 闭包函数：声明在一个函数中的函数，叫做闭包函数。 闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。 1.2特点 让外部访问函数内部变量成为可能； 局部变量会常驻在内存中； 可以避免使用全局变量，防止全局变量污染； 会造成内存泄漏（有一块内存空间被长期占用，而不被释放） 1.3 闭包的创建 闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，互不干扰。闭包会发生内存泄漏，每次外部函数执行的时 候，外部函数的引用
闭包点赞小案例
sunhaomei的博客
06-21 153
闭包经典案例
davr75714的博客
09-14 124
　　　　　　　　　　function fun(n, o) { console.log(o); return { fun: function (m) { re...
一个闭包的小例子
杜小白的博客
07-31 2884
首先先解释一下作用域的概念：     在JavaScript中，只有函数具有作用域。也就是说，在一个函数内部声明的变量在函数外部无法访问。 定义在一个函数中的变量在改函数的内嵌函数中是可以访问的。 下面先举一个作用域的例子： function foo(){ var a = 10; function bar(){ a *= 2; return...
闭包及闭包的简单示例
fangqi20170515的博客
07-08 896
可以理解为能够读取其它函数内部变量的函数。通过函数实现变量私有化，同时可以让外部访问内部的资料 本质：将函数内部和外部连接起来的一座桥梁目的：解决函数外部想获取到函数内部的局部变量缺点：1、需要手动释放资源；2、过多的闭包，会造成程序变慢（操作不当容易造成内存溢出）用途：1、实现变量私有化；2、读取函数内部的变量；3、让函数内部的变量始终保持在内存中 2、如何手动释放？ 原理：没有变量引用它，则会被当垃圾进行回收 4、闭包的实例 注意：函数内部返回的数组进行了深拷贝......
闭包的小案例
u013404537的博客
07-04 264
闭包最重用的一个作用是模块化。私有化变量或方法，通过暴露出一些变量或方法和外部做交流。 function foo(){ var a=0; var b=0; function add(){ b=a+10; console.log(b) } function bar(){ add(); ...
闭包的经典案例
MISS_zhang_0110的博客
12-28 681
闭包（未完成）一级目录二级目录三级目录 一级目录 二级目录 三级目录
JavaScript闭包之经典案例
qq_21987433的博客
10-30 1468
①函数作为返回值 【1】例子1 function a() { var name='dov'; return function(){ return name; } } var b=a(); console.log(b());//dov 在这段代码中，a()中的返回值是一个匿名函数，这个函数在a()作用域内部，所以它可以获取a()作用域下变量name的值，将这个值作为返回值赋给全局作用域下的变量b,实现了在全局变量下获取到局部变量中的变量的值
js 闭包内存泄露案例
05-10
以下是一个闭包内存泄露的案例： ``` function createClosure() { var arr = new Array(10000).fill('a'); // 创建一个占用大量内存的数组 return function() { console.log(arr.length); } } var closure = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值