黑马程序员技术交流社区

标题: 【上海校区】JavaScript闭包函数及其作用 [打印本页]

---

作者: 不二晨    时间: 2019-3-29 16:42
标题: 【上海校区】JavaScript闭包函数及其作用
一、认识闭包

案例：

页面有5个li标签，标签显示0~4五个数字，点击不同的标签在控制台中打印标签的索引。

主要代码：

         <ul>
                <li>0</li>
                 <li>1</li>
                 <li>2</li>
                 <li>3</li>
                 <li>4</li>
         </ul>
         <script>
                 var liList=document.getElementsByTagName("li");
                 for(var i=0;i<liList.length;i++){
                         liList.onclick=function(){
                                         console.log(i);
                                 }
                 }
         </script>
主要说明：

如果是你会不会这样写？

如果这样写，一旦运行就会发现不管点击那个标签打印的都是数字"5"。因为在执行点击操作时，for循环已经进行完毕且i值为"5"。那怎么做才能使每次循环时i值得以保存不被系统回收？闭包！

代码修改：

         <ul>
                 <li>0</li>
                 <li>1</li>
                 <li>2</li>
                 <li>3</li>
                 <li>4</li>
         </ul>
         <script>
                 var liList=document.getElementsByTagName("li");
                 for(var i=0;i<liList.length;i++){
                         liList.onclick=(function(j){
                                 return function(){
                                         console.log(j);
                                 }
                         })(i);
                 }
         </script>
代码说明：

当两个函数发生嵌套，内部函数使用外部函数的变量或者参数就会形成闭包。形成闭包之后，内部函数的变量将会被保存在对应的函数内存中，不会像上面代码中内部函数变量被及时清除。

二、闭包的定义

1.函数嵌套函数

2.内层函数访问调用外层函数变量或参数(将参数或者变量长期保存在内存中)

三、闭包的作用

1.实现公有变量（函数累加器）  

function add(){
                var num = 0;
                function a(){
                        console.log( ++ num);
                }
                return a;
        }
        var myadd = add();
        myadd();//结果为1
        myadd();//结果为2
        myadd();//结果为3

2.可以做缓存（存储结构）   
3.可以实现封装，属性私有化（私有化变量）   

function Deng(name,wife){
        var prepareWife = "xiaozhang";
        this.name = name;
        this.wife = wife;
        this.divorce = function(){
                this.wife = prepareWife;
        }
        this.changePrepareWife = function(target){
                prepareWife = target;
        }
        this.sayPrepareWife = function(){
                console.log(prepareWife);
        }
}
        var deng = new Deng('deng','xiaoliu');

---------------------
【转载，仅作分享，侵删】
作者：Ryan Ji
原文：https://blog.csdn.net/qq_42451979/article/details/81068919
版权声明：本文为博主原创文章，转载请附上博文链接！

---

作者: 不二晨    时间: 2019-4-10 14:31
奈斯，感谢分享！

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2