js 闭包深入理解与实例分析


Posted in Javascript onMarch 19, 2020

本文实例讲述了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截图 

js 闭包深入理解与实例分析

解决办法:立即执行匿名函数 参数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>

结果点击第一展示

js 闭包深入理解与实例分析

还有这样写也是可以的

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()里调用 标识符向上搜索沿着作用域链 这个环境里可以调用外层环境和全局环境的变量)

参考:

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
JS一次前端面试经历记录
Mar 19 #Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 #jQuery
浅析TypeScript 命名空间
Mar 19 #Javascript
JavaScript计算出两个数的差值
Mar 19 #Javascript
JavaScript利用键盘码控制div移动
Mar 19 #Javascript
js实现百度登录窗口拖拽效果
Mar 19 #Javascript
js实现随机抽奖
Mar 19 #Javascript
You might like
php递归函数中使用return的注意事项
2014/01/17 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
javascript使用activex控件的代码
2011/01/27 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
javascript实现固定侧边栏
2021/02/09 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
python批量替换页眉页脚实例代码
2018/01/22 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
企业门卫岗位职责
2013/12/12 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
年终晚会主持词
2014/03/25 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers