• js中的闭包(以及运用案例) 一般情况下不建议使用闭包 因为它会延展变量的生命周期 不能使用后立马释放


    首先引用参考  https://www.jb51.net/article/158651.htm (脚本之家)

    闭包的三大特点为:

    1、函数嵌套函数

    2、内部函数可以访问外部函数的变量

    3、参数和变量不会被回收。

    需求:运行每次点击li时会输入对应li的索引

    实例:错误代码 1

    输出结果会为最后一个li的index  因为浏览器一开始就会加载所有的元素 而onclick只有再点击时会加载 此时的i 就会不正确

              var hs = document.getElementById("html标签ID");
                 
                var lists = hs.children;
                for(var i = 0; i <lists.length; i++){
                    var li = lists[i];
    
                    //此时打印出来的对应li的i肯定是不正确的 i会为最后的值
                   
                    li.onclick = function(){
                        console.log(i);   //此时打印的i时 运行的最后一次的数字
                    }
                }    

    实例:解决方式

       var hs = document.getElementById("html标签ID");
                 
                var lists = hs.children;
                for(var i = 0; i <lists.length; i++){
                    var li = lists[i];
                    
                    li.index = i;    //为每个li绑定i
       
                   
                    li.onclick = function(){
                        console.log(this.i);    //输出this.li 
                    }
                }    

    实例: 闭包解决方式

                var hs = document.getElementById("html标签ID");
                 
                var lists = hs.children;
                for(var i = 0; i <lists.length; i++){
                    var li = lists[i];
    
                   (function(i){  //使用闭包的特性 参数不会立即使用完就会消失
                        li.onclick = function(){
                        console.log(i);   
                    }
                   })(i);
                }                

    二、为什么要闭包

    说明:变量分为全局变量的局部变量,全局变量的作用域为全局作用域,局部变量作用域为局部作用域。之前一篇文章关于作用域链给了介绍,可以在函数内部访问全局变量,但是无法在全局环境中访问函数内部的变量。
    那如果想在全局环境中访问函数内部变量呢?这时候就可以使用闭包。
    闭包有两个最大的用处,一个是可以在全局作用域中读取内部函数的的变量,另一个就是可以让闭包中引用的变量始终保存在内存中。

    坚持
  • 相关阅读:
    Altium Designer 出现错误提示(警告)adding items to hidden net GND/VCC
    proteus 查找 仿真元件 中英文对照 [持续更新]
    proteus 运行出错,用户名不可使用中文!
    proteus汉化
    proteus怎么仿真?
    keil 怎样新建工程,编写代码?
    raspberry pi2 智能小车源码及测试视频
    项目优化
    PHP composer
    腾讯云通信接入
  • 原文地址:https://www.cnblogs.com/gaoSJ/p/12725854.html
Copyright © 2020-2023  润新知