在javascript中,闭包是一个很重要的概念,对于新手来说是一个不大不小的障碍,当然这个障碍也不大,通常情况下都能够冲过去,下面就结合代码实例介绍一下它的相关概念和基本用法,希望能够给需要的朋友带来帮助。

一.基本介绍:

闭包我们可以认为是函数运行完毕,但是相关变量仍然驻留内存没有释放的一种现象。

它的主要特征如下:

1.函数中嵌套函数。

2.函数的内部可以引用外部的参数和变量。

3.被引用的参数和变量不会被垃圾回收机制回收。

二.闭包的创建:

最为常见的一种方式,就是函数内部嵌套有一个函数,当外层函数执行完毕之后,内部的函数依然可以使用定义在外层函数的局部变量,代码如下:
   [ bootstrap ] 运行代码    下载代码
<script>
function func(){   
  var num = 1; 
  return function(){
    console.log(num++)
  }; 
}     
var count = func(); 
count();
count();
fun=null;
</script>
虽然函数func()执行完毕,但是它内部的局部变量num并没有被销毁,依然可以被内部函数使用,这就是一个闭包。

闭包的优点就是可以将局部变量驻留在内存中,而不用使用全局变量,当然这也是一个缺点,如果使用不当会造成内存的损耗。

js垃圾回收原理:

1.如果一个对象不再被引用的话,那么它会将被GC回收。

2.尽管两个对象相互引用,但是如果不再被第三个对象引用的话,那么相互引用的对象也会被GC回收。

三.闭包的优点:

当然使用好处是有很多的,下面做一下简单介绍:

实例一:
   [ bootstrap ] 运行代码    下载代码
<script>
function func(){ 
  var num = 1; 
  return function(){
    console.log(num++)
  }; 
}     
var count = func(); 
count();
count();
fun=null;
</script>
这个代码其实就是文章开始部分的代码,可以是局部变量驻留内存,避免使用全局变量。

实例二:
   [ bootstrap ] 运行代码    下载代码
<script>
var obj=(function(){
  var num=1;
  function oneFunc(){
    num++;
    console.log(num);
  }
  function twoFunc(){
    num++;
    console.log(num);
  }
  return{
    b:oneFunc,
    c:twoFunc
  }
})();
obj.b();
obj.c()
</script>
上面代码同样也是利用内存驻留的原理,只是使用的形式不同而已。

实例三:
   [ bootstrap ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript">
window.onload=function(){
  var oshow=document.getElementById("show");
  var lis=document.getElementsByTagName('li');
  for(var index=0;index<lis.length;index++){
    (function(index){
      lis[index].onclick=function(){
        oshow.innerHTML=index
      };
    })(index);
  }
}
</script>
</head>
<body>
<div id="show"></div>
<ul>
  <li>51前端一</li>
  <li>51前端二</li>
  <li>51前端三</li>
</ul>
</body>
</html>
上面是一个批量注册事件处理函数的代码,点击每一个li元素会获取当前li的索引,可能很多朋友认为上面的代码太过复杂了,使用如下代码即可实现:
   [ bootstrap ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript">
window.onload=function(){
  var oshow=document.getElementById("show");
  var lis=document.getElementsByTagName('li');
  for(var index=0;index<lis.length;index++){
    lis[index].onclick=function(){
      oshow.innerHTML=index
    };
  }
}
</script>
</head>
<body>
<div id="show"></div>
<ul>
  <li>51前端一</li>
  <li>51前端二</li>
  <li>51前端三</li>
</ul>
</body>
</html>

代码描述:js闭包用法。js闭包用法简单介绍



123 164



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到