JS之闭包与回调

最新推荐文章于 2023-06-05 00:04:49 发布
最新推荐文章于 2023-06-05 00:04:49 发布
阅读量310 收藏 1
点赞数 1
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55047716/article/details/125605432
版权

文章目录

JS之闭包与回调

闭包与回调==》JS高级

一、前提

在学好前提下，再来学习闭包与回调

闭包的前提是预编译和作用域
回调的前提是作用域、函数与函数执行

二、闭包

1.什么是闭包？

闭包是面向对象私有化的
一个函数被系统创建出来就是一个闭包
一个函数与环境（作用域）的相互结合
闭包的好处是能给我们带来集成性和封装性

图片如下（示例）：
请添加图片描述

代码如下（示例）：

      function test(){//是一个闭包
         const a = 1;
         function fn(){// 是一个闭包  可以调用外部的局部变量
             console.log(a)
         }
         fn()
      }
      test()

判断这个是不是闭包

 
         function test(){
            var b = 222
            a(b)
         }
         function a(b){
           console.log(b);
         }
         test()
        // 不是
        // 因为 在a()里面只能读取test()里面b的值 ，再添加一个则读取不了,那想读取无数的值呢，这肯定是不行的
        // 列：
        function test(){
             var b = 222
             var c = 333
              a(b)
         }
        function a(b){
           console.log(b);
            console.log(c)
         }
         test()

出一个简单的小题 加减乘除


        // // 第一种方法
        // function computer(){
        //     function add(a,b)
        //     {
        //         return a + b
        //     }
        //     function sbt(a,b)
        //     {
        //         return Math.abs(a - b) 
        //     }
        //     function mlt(a,b)
        //     {
        //         return a * b
        //     }
        //     function dvs(a,b)
        //     {
        //         return a / b
        //     }
        //     // 方法
        //     // 1.
        //     // computer.do = function(type,a,b) 
        //     // {
        //     //     switch(type){
        //     //         case 'add':
        //     //             return add(a,b)
        //     //         case 'sbt':
        //     //             return sbt(a,b)
        //     //         case 'mlt':
        //     //             return mlt(a,b)
        //     //         case 'dvs':
        //     //             return dvs(a,b)
        //     //         default:
        //     //             break;
        //     //     }
        //     // }
        //     // 2,跟1效果是一样的
        //     return function(type,a,b) 
        //      {
        //         switch(type){
        //             case 'add':
        //                 return add(a,b)
        //             case 'sbt':
        //                 return sbt(a,b)
        //             case 'mlt':
        //                 return mlt(a,b)
        //             case 'dvs':
        //                 return dvs(a,b)
        //             default:
        //                 break;
        //         }
        //     }
        // }
        // //     1.
        // //     computer()
        // //    var ret =  computer.do('add', 100,200)
        // //    console.log(ret)
        // //     2,
        // // 注意需要大写
        // Do = computer()
        // const res = Do('add', 100,200)
        // console.log(res)
        
    //    第二种写法  比较简便 以对象的形式
    //  function computer(){
    //         computer.add = function(a,b)
    //         {
    //             return a + b
    //         }
    //         computer.sbt = function(a,b)
    //         {
    //             return Math.abs(a - b) 
    //         }
    //         computer.mlt = function(a,b)
    //         {
    //             return a * b
    //         }
    //         computer.dvs = function(a,b)
    //         {
    //             return a / b
    //         }
    //         return function(type,a,b){
    //             return  computer[type](a,b)
    //         }
    //     }
    //     Do = computer()
    //     const res = Do('sbt', 100,200)
    //     console.log(res)
        // 可以再简化一下
        function computer(type,c,d){
            computer.add = function(a,b)
            {
                return a + b
            }
            computer.sbt = function(a,b)
            {
                return Math.abs(a - b) 
            }
            computer.mlt = function(a,b)
            {
                return a * b
            }
            computer.dvs = function(a,b)
            {
                return a / b
            }
            return  computer[type](c,d)
        }
        const res = computer('add', 100,200)
        console.log(res)

2.关于闭包的相关问题

这个是一个点击事件

代码如下（示例）：

请添加图片描述

问题是缺少闭包，导致最后点击的小li结果都是3（即3 3 3）（他们的总长度是3）（想要的效果是每个小li对应每一个序号）
原因是点击事件并不是作用域，别把绑定事件当成作用域，绑定事件处理函数（这个函数会执行外部的变量）而不是绑定事件直接执行函数
所有在当for都循环完毕，i=3的时候，才能触发绑定事件，那怎么解决呢？
那就是添加立即执行函数（即闭包）

请添加图片描述

创建了函数时，当i=0时，执行立即执行函数（function(i）{}) 此时ii=0 以此类推 i= 1 ii =1; i=2 ii=2
函数里面的括号中的参数是充当临时局部变量（即ii会随着i的变化而变化而不是i循环到最后了ii再执行）
最后的结果是 0 1 2

三、回调

1.什么是回调？

回调的大致意思是：主函数里面的参数是回调函数（即回调函数相当于主函数的参数），主函数执行完毕，再执行回调函数（主函数的事先干完，回头再调用传进来的那个函数。）
这个过程就是回调

代码如下（示例）：

//定义主函数，回调函数作为参数
function a(callback){
  callback()
  console.log('主函数')
}
//定义回调函数      定时器是异步函数
fuction b(){
  setTimeout("console.log('我是回调函数')", 3000);//模仿耗时操作  
}
//调用主函数，将函数B传进去
a(b)

//输出结果
主函数
我是回调函数


     //  主函数
         function count(count,callback){
             var count1 = count + 1
             var count2 = count + 100
             callback && callback(count2)
            //  console.log(count1)
            return count1
         }
            // 这个是回调函数
         var count3 = count(1,function(count2){
             console.log(count2)
         })
         console.log(count3)

2.举个栗子

        // 加减乘除
        function computer(callback){
            return function(a,b,type){//这个是一个闭包
                let result = null
                switch(type){
                    case '+':
                    result = a + b
                    break;
                    case '-':
                    result = a - b
                    break;
                    case '*':
                    result = a * b
                    break;
                    case '/':
                    result = a / b
                    break;
                    default:
                        break;
                }
               callback && callback(a,b,type,result)
            }
        }
        var test = computer(function(a,b,type,result){
             console.log(`${a} ${type} ${b} = ${result}`)
        })
        test(1,2, '+')
        test(100,20, '-')

3.验证回调函数

         function test(validator){
            return function(a,b,type){//这个是一个闭包
                
                var {isError, errorMsg } = validator(a,b)
                if(isError){
                    // throw new Error(error); 这个是创建错误，创造一个错误类型抛出；
                    throw new Error(errorMsg)
                }

                switch(type){
                    case '+':
                    return  a + b
                    case '-':
                    return  a - b
                    case '*':
                    return  a * b
                    case '/':
                    return  a / b
                    default:
                        break;
                }
            }
        }
        var comp = test(validator)
        console.log(comp(100,2,'+'))

        function validator(a,b){

            if(a > 50 || b > 30){
                return {
                    isError:true,
                    errorMsg:'a必须小于等于50，并且b小于等于30'
                }
            }
            return{
                isError:false,
                errorMsg:'ok'
            }
        }
m0_55047716
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
闭包和回调函数
Mr_115的博客
11-16 811
闭包和回调函数
Java中的闭包与回调
01-21
在Scheme、CommonLisp、Smalltalk、Groovy、JavaScript、Ruby和Python等语言中都能找到对闭包不同程度的支持。 　闭包的价值在于可以作为函数对象或者匿名函数，对于类型系统而言这意味着不仅要表示数据还要表示...
JavaScript中的闭包以及回调函数
qq_47455650的博客
05-21 612
JS中的闭包1、闭包1什么是闭包案例：2、闭包23、闭包的优缺点以及解决方法3.1优点3.2缺点3.3解决方法 1、闭包1 什么是闭包 闭包就是能够读取其他函数内部变量的函数，在本质上是函数内部和函数外部链接的桥梁 案例： function alipay() { var money=1000 function tool () { money-=20 } return tool } var re=alipay() re() //外部是无法访问函数alipay内部
JavaScript基础11.闭包与回调
qq_45929358的博客
03-29 139
11.1闭包 closure11.2 回调 callback
js回调函数与闭包
sxww_zyt的博客
09-07 249
闭包不是回调，回调也不是闭包函数B作为函数A的入参，且函数A执行了函数B，此时我们把函数A叫做回调函数(ajax、setTimeout、dom事件回调等都是回调函数)。可以理解为A是一个类，每次调用A，都是生成了独立的、相互隔离的、互不影响的一份新的数据，相当于new了多个实例。
javascript的闭包和回调
qq_44146665的博客
08-17 300
1.闭包 闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。 直观的说就是形成一个不销毁的栈环境。 js闭包典型的运用场景就是计算器困境： function add() { var counter = 0; return counter += 1; } console.log(add()) console.log(add()) console.log(add()) 如上面的代码本意是输出3,最终输出的确都是
JavaScript闭包和回调详解
12-11
 闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。 闭包有三个特性： 1.函数嵌套函数; 2.函数内部可以引用外部的参数和变量; 3.参数和变量不会被垃圾回收机制回收。  ...
node.js实现回调的方法示例
10-20
在Node.js中，回调函数是一种处理异步操作的重要机制，因为JavaScript是单线程的，不能同时执行多个任务。回调函数使得程序能够非阻塞地处理I/O操作和其他耗时任务。 首先，我们来看如何向回调函数传递额外的参数。...
javascript闭包的使用之按钮切换功能
10-18
总的来说，理解和熟练运用闭包是提升JavaScript编程能力的关键步骤之一。通过闭包，我们可以编写更高效、更安全的代码，避免全局变量带来的问题，同时实现更复杂的逻辑控制。在实际开发中，尤其是在大型项目中，合理...
javascript分析闭包和回调函数
且听真言
12-29 466
<div id="box1">First Box</div> <div id="box2">Second Box</div> <script> function animateIt(elementId) { var elem = document.getElementById(elementId);
js闭包和回调
weixin_34357928的博客
05-24 106
1、闭包 闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。闭包有三个特性： 1.函数嵌套函数; 2.函数内部可以引用外部的参数和变量; 3.参数和变量不会被垃圾回收机制回收。 闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数...
JS面向对象--你真的理解闭包了吗？
weixin_34306676的博客
06-22 145
JS中的闭包，可能在实际开发中我们用的很少，但是面试的时候是必问的。所以今儿个总结一下什么是闭包。 首先，我们定义一个变量。会分为两种情况，1是定义在全局中，我们关闭程序的时候变量会从内存中释放。2是定义在局部中，在函数中定义一个变量，当我函数调用结束后，会从内存中释放。 闭包的存在，就是为了当我调用了声明局部变量的函数后，我的局部变量还能存在在全局之中。延长了我局部变量的生命周期。 接下来...
闭包与回调
CmdSmith的博客
03-08 819
闭包是一个可调用对象，它记录了一些信息，这些信息来自于创建它的作用域。 通过这个定义，可以看出来内部类是面向对象的闭包，因为它不仅包含外围类对象（创建内部类的作用域）的信息，还自动拥有一个指向此外围类对象的引用，在此作用域内，内部类有权操作所有的成员，包括private成员。 Java 最引人争议的问题之一就是，人们认为Java应该包含某种类似指针的机制，以允许回调（callback）。通过回调，...
JS - 闭包，回调，立即执行函数表达式简单实现
指尖铜绿的博客
12-13 276
概念回顾 闭包(Closures) : 任何一个内部函数始终能使用其外部函数定义的参数和变量，即便这个外部函数已经成功返回结束。 回调(Callback) : 回调函数就是一个参数（函数指针），将这个函数指针作为参数传到另一个函数里面，而只有当这个函数执行时才会执行传进去的这个函数。这个过程就叫做回调。如同一个异步过程，而这个Callback可以理解为Call it later。
JS中的回调函数和闭包
weixin_43846130的博客
07-22 1219
一、 回调函数 1. 一般在异步操作中，当异步操作结束，需要回到主线程做点事情，需要用到回调函数 2. 经常应用在书写类或者矿建等公用性比较高的模块 3. 回调函数就是将函数作为参数使用，作为函数参数的函数就是回调函数 二、闭包 1. 变量的作用域：全局变量和局部变量 1）全局变量在当前全局可以到处调用，但是局部变量只能在局部调用 2）函数能够分离出一个独立的作用域 3）函数内部声明的变量...
js 闭包传参_[js]利用闭包向post回调函数传参数
weixin_42493060的博客
12-23 213
最近在闲逛校园XX站的时候，打算搞个破坏，试试有多少人还是用初始密码登陆。比较懒，所以直接打开控制台来写。所以问题可以描述为：向后端不断的post数据，id从1~5000自增，后端会根据情况来返回值res，需要把res=100的id输出。最简单的想法是：for循环内部调用post数据//错误示范 一for(var i = 92000;i<92500;i++){//直接借用一下网站内引用的jq...
js调试闭包的一个小技巧
最新发布
易水的专栏
06-05 159
在开发过程中，直接查看instance.Internal就能查看instance的内部数据，大大简化调试过程，在需要发布的时候用sed -i '/For DEBUG/d' jsfile去掉调试代码就行了。闭包在js中是一个很有用的功能，不过因为内部数据只能内部访问，所以调试略微麻烦，在闭包外部要想查看内部数据很麻烦。closure. "For DEBUG"引号内的内容不能删，用于发布时自动删除调试代码。最近在写某代码的时候想到了一个简单的办法，可以在任意时刻查看内部数据。
JS编程建议——62：在循环体和异步回调中慎重使用闭包
weixin_34273481的博客
12-17 89
建议62：在循环体和异步回调中慎重使用闭包闭包在开发中具有重要的应用价值，由于闭包具有持久性，生成的闭包不会立即被销毁，因此它会持续占用系统资源。如果大量使用闭包，将会造成系统资源紧张，甚至导致内存溢出等错误。另外，闭包在回调函数中会带来负面影响，因此在使用时应该慎重。下面的示例利用闭包来存储变量所有变化的值。function f( x ){ var a...
JavaScript 在回调函数中闭包保存循环index
weixin_30362083的博客
01-02 131
var elems = document.getElementsByTagName('a'); for (var i = 0; i < elems.length; i++) { (function (lockedInIndex) { elems[i].addEventListener('click', function (e) { ...
JavaScript之函数
09-19
"JavaScript函数详解，包括其作用、创建方式、本质、内部属性、作用域、回调函数和闭包的概念" 在JavaScript中，函数扮演着至关重要的角色，它们是代码组织的基本单元，允许我们将一系列相关操作封装起来，以便在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值