快捷导航
蚂蚁部落 网站首页 前端教程 JS教程 查看内容

栏目导航

≡基础知识≡

≡操作符≡

≡语句≡

≡函数≡

≡面向对象≡

≡对象≡

≡事件≡

≡事件对象≡

≡操作DOM方法≡

≡操作DOM属性≡

≡操作table表格≡

≡操作select控件≡

≡操作cookie≡

≡浏览器对象模型≡

≡进阶≡

JavaScript 闭包

2017-8-7 19:54| 发布者: antzone| 查看: 945| 评论: 0|来自: 蚂蚁部落

JavaScript中,闭包(closure)是一个非常重要的概念。

闭包是指一个函数可以访问另一个函数作用域中的变量,创建闭包最常见的方式就是在一个函数中嵌套另一个函数,然后可以通过另一个函数访问外层函数作用域中的变量。

一.闭包的特点:

(1).函数中嵌套函数。

(2).嵌套的函数可以使用外层函数作用中的变量和参数。

(3).参数和变量不会被垃圾回收机制回收。

通常情况下,函数中声明的局部变量,会在函数执行完毕后被销毁,看如下代码:

[JavaScript] 纯文本查看 复制代码运行代码
function a(){
  var webName="蚂蚁部落";
  console.log(webName);
}
a()

当函数执行完毕之后,函数内部声明的变量就不会再占用内存。

但是闭包就可以使局部变量驻留在内存中,这样就不用使用全局变量,避免出现全局污染情况。

看如下代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
function func() { 
  var num = 1; 
  return function(){
    console.log(num++)
  }; 
}     
var foo=func(); 
foo();//1
foo();//2  
fun = null;//垃圾回收

num变量在fun执行完毕之后并没有被销毁,这是因为全局变量(全局变量会在程序执行完毕销毁)foo存储func返回的匿名函数,而此返回的匿名函数会用到变量num。

二.使用闭包的优点:

(1).局部变量长期驻扎在内存中(其实所有的特点都是由长期驻扎实现的)。

(2).避免全局变量的污染。

(3).私有成员的存在。

下面分别通过代码实例做一下介绍。

三.代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
var num=1;
function func(){
  num++;
  console.log(num);
}
func();//2
func();//3

由于是全局变量自然就会实现累加效果。

[JavaScript] 纯文本查看 复制代码运行代码
function func(){
  var num=1;
  num++;
  console.log(num);
}
func();//2
func();//2

由于是局部变量,执行一次就会销毁一次,所以不会有累加效果。

下面用闭包实现局部变量累加效果,代码如下:

[JavaScript] 纯文本查看 复制代码运行代码
function func(){
  var num=1;
  return function(){
    num++;
    console.log(num)
  }
}
var foo=func();
foo();//2
foo();//3

代码实现了局部变量累加。又由于num是局部变量,所以不会对函数作用域外的同名变量产生污染。

再来看一个闭包的实际应用代码:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  width:300px;
  list-style-type:none;
  font-size:12px;
  line-height:30px;
  height:30px;
  cursor:pointer;
}
ul li span{
  float:right
}
</style>
<script>
window.onload=function(){
  var obox=document.getElementById("box");
  var lis=obox.getElementsByTagName("li");
  var odiv=document.getElementById("show");
  for(var index=0;index<lis.length;index++){
    lis[index].onclick=(function(index){
      return function(){
        odiv.innerHTML=index;
      } 
    })(index)
  }
}
</script>
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落欢迎您,只有努力奋斗才会有美好的未来。</li>
  <li>本站的地址是softwhy.com欢迎访问,提供有益的建议和意见</li>
  <li>没有人一开始就是高手,必须要努力奋斗才行。</li>
  <li>本站创建于2012年,目的是为用户提供免费的详实的教程</li>
  <li>每一天都是新的,所以必须要好好珍惜,不能够浪费。</li>
</ul>
<div id="show"></div>
</body> 
</html>

点击li元素可以获取它在集合中的位置。

没必要将闭包理解的过于复杂,它描述了函数执行完毕内存释放后,依然内存驻留的一个现象,只要把握这个核心概念,闭包就不难理解了。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-8-21 12:41 , Processed in 0.066086 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部