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 相关文章推荐
基于jQuery的前端数据通用验证库
Aug 08 Javascript
Js sort排序使用方法
Oct 17 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
Node 自动化部署的方法
Oct 17 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
前端性能优化建议
Sep 17 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 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个人网站架设连环讲(四)
2006/10/09 PHP
一周学会PHP(视频)Http下载
2006/12/12 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
化学专业毕业生自荐信
2013/11/15 职场文书
公关关系专员的自我评价分享
2013/11/20 职场文书
电子商务专业求职信
2014/03/08 职场文书
军训口号
2014/06/13 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
事业单位考察材料范文
2014/12/25 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
java多态注意项小结
2021/10/16 Java/Android