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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
jquery队列函数用法实例
Dec 16 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
js 函数性能比较方法
Aug 24 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
DC动漫人物排行
2020/03/03 欧美动漫
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
vue组件与复用详解
2018/04/08 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
python中反射用法实例
2015/03/27 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
django数据库自动重连的方法实例
2019/07/21 Python
python加载自定义词典实例
2019/12/06 Python
python关于倒排列的知识点总结
2020/10/13 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
课程改革实施方案
2014/03/16 职场文书
社区食品安全实施方案
2014/03/28 职场文书
酒店节能降耗方案
2014/05/08 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
2014年民政工作总结
2014/11/26 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python