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 相关文章推荐
Javascript 强制类型转换函数
May 17 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
js序列化和反序列化的使用讲解
Jan 19 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
vue Element左侧无限级菜单实现
Jun 10 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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
Ajax PHP简单入门教程代码
2008/04/25 PHP
php split汉字
2009/06/05 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
javascript解析json实例详解
2014/11/05 Javascript
js对象的复制继承实例
2015/01/10 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
pandas数据拼接的实现示例
2020/04/16 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
python使用建议与技巧分享(二)
2020/08/17 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
新春寄语大全
2014/04/09 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android