js 闭包深入理解与实例分析
本文实例讲述了js 闭包。分享给大家供大家参考，具体如下：
1.什么是闭包
定义：是指有权访问另一个函数作用域中的变量的函数
创建闭包：在一个函数内部创建另一个函数
基本特点 在返回的匿名函数中 可以调用外部函数的变量 如下例中所示 内部函数（匿名函数） 可以访问外部函数的变量num 形式如a[num] 原因是匿名函数作用域链中包括外部函数test1的作用域
闭包有权访问包含函数内部的所有变量 如下面的 外部函数定义变量d 在闭包中可以直接访问到d (var dd=d)
function test1(num){
var d;
return function(a,b){
var d1=a[num],d2=b[num];
var dd=d;
}
}
实例参考 此时点击产品1 到 产品4 结果都是5 点击匿名函数的作用域链中包括外部函数init的活动对象 都是引用的同一个变量i 都是5 。解决办法 返回的匿名函数 通过立即执行函数 把参数i传给匿名函数
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>闭包演示</title>
<style type="text/css">
p {background:gold;}
</style>
<script type="text/javascript">
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
</script>
</head>
<body onload="init();">
<p>产品 0</p>
<p>产品 1</p>
<p>产品 2</p>
<p>产品 3</p>
<p>产品 4</p>
</body>
</html>
弹出结果都是5截图
解决办法：立即执行匿名函数 参数i是循环i的值 传递给num形参 匿名函数里 在创建闭包 可以访问这个传递过来的值num
pAry[i].onclick = function(num){//......}(i)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>闭包演示</title>
<style type="text/css">
p {background:gold;}
</style>
<script type="text/javascript">
/*修改后*/
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function(num) {
return function(){
alert(num)
}
}(i)
}
}
</script>
</head>
<body onload="init();">
<p>产品 0</p>
<p>产品 1</p>
<p>产品 2</p>
<p>产品 3</p>
<p>产品 4</p>
</body>
</html>
结果点击第一展示
还有这样写也是可以的
function a(){
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function(num){
pAry[num].onclick = function() {
alert(num);
}
})(i)
}
}
1.1 闭包的原理
-1) 闭包的作用域链 包括 闭包自身的作用域（一般返回匿名函数的作用域），外部函数的作用域（包含的外部函数），全局作用域
-2）通常，函数的作用域和所有变量都会在函数执行结束后被销毁
-3）函数返回一个闭包，这个函数的作用域会一直保存在内存中直到闭包不存在为止
使用闭包可以模仿块级作用域
-1）创建闭包并立即执行这个函数 不会再内存中留下该函数的引用
-2 ）结果 函数内部的所有变量都会被立即销毁
2.什么是作用域链
执行环境：定义了变量或函数有权访问其他数据，决定它们各自的行为。
变量对象：每个执行环境都有一个与之关联的变量对象。
执行环境定义的所有变量和函数都保存在变量对象中。编写代码无法访问这个对象，解析器在处理数据时会在后台使用它。
-1）全局执行环境是最外围的一个执行环境
-2）web浏览器中，全局执行环境默认是window对象，因此所有全局变量和函数都是作为window对象的属性和方法创建的
-3）某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义都随之销毁 全局执行环境直到应用程序退出--例如关闭网页或浏览器时才会被销毁
-4）每个函数都有自己的执行环境
作用域链：当代码在一个执行环境中执行时，会创建变量对象 一个作用域链
作用域链用途：保证对执行环境有权访问的所有变量和函数的有序访问
标识符解析：沿着作用域链一级一级的向上搜索标识符的过程。
函数参数也被当做变量来看待，因此访问规则与执行环境中的其它变量相同。 例子：下面函数chageColor(num){} 在闭包里tempColor(a){}里可用a[num]访问
实例解析
<script type="text/javascript">
/*全局变量*/
var color = 'red' ;
function changeColor(num){
var otherColor = 'blue',
another =color,
chage = changeColor();
function tempColor(a){
var temp = otherColor,
temp2 = color,
temp3 = changeColor();/*这里可以访问上层执行环境otherColor another chage 和全局color*/
var u =a[num];
}
}
</script>
全局 window
|
|-------------color 全局变量
|------------changeColor()
|
|---------------otherColor(局部变量 还有两个就是调用的上层全局环境里的color变量和函数chageColor)
|---------------tempColor()
|-------------------h（变量h不能被上层执行环境调用 只能在tempColor()里调用 标识符向上搜索沿着作用域链 这个环境里可以调用外层环境和全局环境的变量）
参考：
https://www.jb51.net/article/183094.htm
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
下面小编就为大家带来一篇JS一个简单的注册页面实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸，rem单位】
这篇文章主要介绍了JavaScript实现多张图片放大镜效果,结合实例形式分析了javascript实现不限定图片尺寸,采用rem单位的多张图片缩放功能相关操作技巧,需要的朋友可以参考下2019-05-05
弹出框在网站页面中是必不可少的一部分，今天借助脚本之家平台给大家分享使用js实现简单的弹出框效果，感兴趣的朋友一起学习吧2016-02-02
这篇文章主要为大家详细介绍了js注册时输入合法性验证方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要为大家详细介绍了基于Bootstrap实现tab标签切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要介绍了js简单实现竖向tab选项卡的方法,涉及javascript实现tab切换效果的相关技巧,非常简单实用,需要的朋友可以参考下2015-05-05
Javascript实现一个简单的输入关键字添加标签效果实例
这篇文章主要给大家介绍了利用Javascript实现一个简单的输入关键字添加标签效果的相关资料，类似动态添加标签的效果，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友可以参考借鉴，下面来一起看看吧。2017-06-06
这篇文章主要介绍了JavaScript中setter和getter方法介绍的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
本文很简单，给大家分享了一段使用javascript实现简单的贪吃蛇游戏的代码，算是对自己学习javascript的一次小小的总结，代码参考了网友的部分内容，推荐给大家，希望对大家能够有所帮助。2015-03-03
IE6、IE7、IE8 JS控制显示隐藏兼容问题2010-04-04
最新评论