js闭包问题

柔情只为你懂 2022-03-21 04:57 197阅读 0赞

> 闭包可以说是js的一个疑难问题，之所以难，是因为连概念都很复杂，在百度上搜了搜，解释一大堆，愣是没看懂，依照我的理解，如果你是初学者，就将它理解成一种跨越局部和全局的桥梁吧，如果你是大佬，跪求通俗且合理的解释，留言谢谢。

这里，我总结了一些题，大体思路以备注，由于是习题，所以我觉得每个人要有自己的理解和方法，表示曾今也被所谓的参考答案“害”的不能自己独立思考，所以只写出了最终答案，没有写自己的想法，也希望大家都能真正的理解。

<!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>闭包</title>
    </head>
    
    <body>
            <button class="btn">按钮</button>
            <button class="btn">按钮</button>
            <button class="btn">按钮</button>
            <button class="btn">按钮</button>
            <button class="btn">按钮</button>
            <button class="btn">按钮</button>
            <button class="btn">按钮</button>
        <script>
            /* showname();
             function showname(){
             var num=10;
             return num;
             }
             showstu();
             function showstu(){
             console.log(showname());
             }//输出结果为 10
             //变量的全局与否都是1相对的，在showtu 中，num相当于全局变量*/
    
    
            // 没有关键字的变量为全局变量
            // function f1(){
            //  n = 999;
            //  console.log(n);
            //  }
            //  f1();
            //  console.log(n);　　//999
    
    
    
            // f1();
            // function f1() {
            //     n = 999;
            //     function f2() {
            //         console.log(n); //999
            //         return n;
            //     }
            // }
            // 重点
            //          function f1(){
            //  var num=10;
            //  function f2(){
            //  return num;
            //  }
            //  return f2;
            //  }
            //  var res=f1()();//res=f2;
            //  console.log(res);//第一种写法
            // //  var res=f1();//第二种写法  //res=f2;
            // //  res();
            // // console.log(res());//两种方法含义一样，第一种借助第一种理解
    
    
    
    
            // var nAdd = null;
    
            // function f1() {
            //     var n = 999;
            //     nAdd = function () {
    
            //         n += 1;
    
            //     }
    
            //     function f2() {
            //         console.log(n);
    
            //     }
            //     return f2;
            // }
    
    
    //闭包的应用    值会存在内存中
            // var result = f1(); //n
            // result(); //999
            // nAdd(); //999
            // result = f1();
            // result(); //999
            // nAdd();
            // result = f1();
            // result(); //999
            // nAdd();
    
            // result(); //999
            // nAdd();
    
            // result(); //999
            // nAdd();
    
    
    
    
            // function foo(x) {
            //  var tmp = 3;
            //  return function f2(y) {
            //  alert(x + y + (++tmp));
            //  };
            //  }
            //  var bar = foo(2); // bar 现在是一个闭包    bar=f2
            //  bar(10);//表示 f2 的执行
            // //  var bar=foo(2)(10);    等同于上两行
    
    
    //重点
            //  function fun(n,o) {
            //  console.log(o)
            //  return {
            //  fun:function(m){
            //  return fun(m,n);
            //  }
            //  };
            //  }
            //  var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);//undefined 0   0   0  
            //  var b = fun(0).fun(1).fun(2).fun(3);//undefined   0   1    2
            //  var c = fun(0).fun(1);  c.fun(2);  c.fun(3);//undefined  0  1   1
    
    
    
    
            //   function f1(a,b,c,d){
            //  /*!*arguments 是当前函数的参数列表  类似于数组的集合  使用索引值来取*!*/
            //  console.log(arguments.length);
            //  }
            //  f1(1,2,3,4);
            // var sum = function () {
            //     var cache;
            //     if (arguments.length === 1) {
            //         cache = arguments[0];//如果arguments对象的长度为1，也就是参数只有1个时，将这个参数赋值给cache，暂存
            //         return function (number) {//返回一个函数，函数里的参数（也就是第二个括号里的参数）与之前第一个括号里的参数相加
            //             return cache + number
            //         }
            //     } else {
            //         return arguments[0] + arguments[1]//如果arguments对象的长度不为1，那么两个参数相加
            //     }
            // }
            // console.log(sum(2, 3));//5
            // console.log(sum(2)(3));//5
            // sum(2)= function (number) sum(2)(3)=function (number)()  大体理解，原理上是错的
    
         /*   function f1() {
                function f2() {
                    console.log(1);
                }
    
                return f2;
            }
            var res = f1();//f2
            res();
            var res = f1()();*/
            // 还是一样的原理
            var btn = document.getElementsByClassName("btn");
        for (var i = 0; i < btn.length; i++) {
            //参数的传递   桥梁
            /* btn[i].index=i;
             btn[i].onclick=function (){
             alert(this.index);
             }*/
            /*自执行函数的闭包*/
            (function (x) {
                btn[i].onclick = function () {
                    alert(x);
                }
            })(i);
        }
        </script>
    </body>
    
    </html>