博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js闭包
阅读量:4608 次
发布时间:2019-06-09

本文共 1690 字,大约阅读时间需要 5 分钟。

借用一句话,在js中我理解的闭包就是函数嵌套函数(反正我也是这么理解的),听那些大神的吧。

像这样:

    
function func1(){
        
function func2(){
            
        }

    } 

 那么问题来了,闭包到底有什么用呢?

内部函数可以调用外部函数的参数和变量,参数和变量是不会被垃圾回收机制回收的,也就是说变量一直都在内存中

    
function func1(){
        
var b = 1;
        
function func2(){
            console.log(b);
        }
        
return func2;
    }
    
var fun = func1();

    fun();

看山的那边,海的那边就是结果

 

 不明白?预知后事如何,请接着往下看吧

    
var b = 1;
    
function func1(){
        b++;
        console.log(b);
    }
    func1();

    func1(); 

 

     function func1(){

        
var b = 1;
        b++;
        console.log(b);
    }
    func1();
    func1();

 

 这个我知道,应该一个是全局变量,一个是局部变量嘛,是答对了,不过没加分。

我们都知道全局变量是会影响到程序性能的,所心好多语言都不推荐这样使用,只有在必要的时候才这样用。那要是我就不想2,就想3怎么办呢,这时候你也就用到闭包了。

满足你:

    
function func1(){
        
var b = 1;
        
return 
function func2(){
            b++;
            console.log(b);
        }
    }
    
var fun = func1();
    fun();

    fun(); 

 

 就样就得到3了,不过这样fun = func1();是要怎样啊?不喜欢,没关系还有这个

    
var fun = (
function(){
        
var b = 1;
        
return 
function(){
            b++;
            console.log(b);
        }
    })(); 
    fun();
    fun();
 

 

偷偷告诉你,上面那个叫匿名函数。

 

我们来看看这段代码:

<body>
    <ul>
        <li>111111111111</li>
        <li>222222222222</li>
        <li>333333333333</li>
        <li>444444444444</li>
    </ul>
</body>
<script type="text/javascript">
    window.onload = 
function(){
        
var oLis = document.getElementsByTagName("li");
        
for(
var i=0;i<oLis.length;i++){
            oLis[i].onclick = 
function(){
                console.log(i);
            };
        }
    };

</script> 

 再看看这个结果:

 

 注意了,是4个4,为什么呢,好像和我们想的有一点不一样,为什么都是4?

因为onclick函数是当你点击的时候才触发的,但是当你点击的时候for循环早就执行完了,所以你每次点击的时候,都是最后一个值。

那怎么才能依次是0,1,2,3呢,bingo就是闭包

<body>
    <ul>
        <li>111111111111</li>
        <li>222222222222</li>
        <li>333333333333</li>
        <li>444444444444</li>
    </ul>
</body>
<script type="text/javascript">
    window.onload = 
function(){
        
var oLis = document.getElementsByTagName("li");
        
for(
var i=0;i<oLis.length;i++){
            (
function(i){
                oLis[i].onclick = 
function(){
                    console.log(i);
                };
            })(i);
        }
    };

</script> 

 

转载于:https://www.cnblogs.com/EvileOn/p/5515478.html

你可能感兴趣的文章
5.3QBXT模拟赛
查看>>
java数据库连接池
查看>>
sql 2005 数据库字段类型说明
查看>>
70-528试题2:仍然是有关xml的
查看>>
入门Leaflet之小Demo
查看>>
HTTP 协议详解
查看>>
Javase中多态polymorphic的简单介绍
查看>>
java内存模型-重排序
查看>>
2008的最后一天
查看>>
Linux命令:chmod命令
查看>>
LNMP环境下安装Redis,以及php的redis扩展
查看>>
web前端基础知识-(一)html基本操作
查看>>
div 显示滚动条的CSS代码
查看>>
#pta 实验
查看>>
SPRING IN ACTION 第4版笔记-第八章Advanced Spring MVC-003-Pizza例子的基本流程
查看>>
解决WPF两个图片控件显示相同图片因线程占用,其中一个显示不全的问题
查看>>
作为一个c#偏爱前端的程序员2017年我都该做点什么
查看>>
java - 内存泄漏
查看>>
Difference between .classpath and MANIFEST.MF
查看>>
C#使用RabbitMQ
查看>>