js闭包深入理解与分析_F11 - 专业站长和开发者的学习网站

分享到

js闭包深入理解与分析

JavaScript 来源：互联网搜集作者：秩名发布时间：2020-03-19 18:41:18 人浏览

摘要

1.什么是闭包定义：是指有权访问另一个函数作用域中的变量的函数创建闭包：在一个函数内部创建另一个函数基本特点在返回的匿名函数中可以调用外部函数的变量如下例中所示内部函数（匿名函数）可以访问外部函数的变量num 形式如a[num] 原因是匿名函数

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.cnblogs.com/xxx91hx/p/4604024.html

Tag : JS(252)闭包(6)

vue el-switch初始值(默认值)不能正确显示状态问题

el-switch 初始值（默认值）不能正确显示状态先去检查一下接口返回格式如果是字符串不需要加冒号 1 active-value=1 inactive-value=2 如果是数字
微信小程序跳转外部链接的实现方法

微信小程序跳转外部链接在开发小程序过程中，我们可能会有这样的需求，在小程序中打开H5或者外部链接实现方法如下： 1、配置业务域
自己写一个uniapp全局弹窗(APP端)

效果图： uniapp自带的提示框不符合我们的要求，需要自己写一个提示框，且全局通用。解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听
JavaScript console对象与控制台使用介绍

1. console对象 console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数 1 console.log(console); 2.
JavaScript错误处理机制全面分析介绍

1. Error 实例 JavaScript在运行错误时会抛出一个错误,JS提供了Error构造函数,所有抛出的错误都是这个构造函数的实例 1 2 const err = new Error(代码出
JavaScript Object.defineProperty与proxy代理模式的使用详

1. Object.defineProperty 1 2 const obj = {}; Object.defineProperty(obj,prop,descript); 参数 obj 要定义属性的对象 prop 要定义的属性 descript 属性描述符返回值
Javascript Object对象类型使用介绍

1. 生成方法对象是javaScript中的一种数据类型,它是key-value的合集，是无序的 1 2 3 4 const obj = { name: ian,age: 21}; //key使用变量 const gender = gender
JavaScript代码不能被阻断的稳定性建设

背景稳定性建设之JavaScript代码不能被阻断 js代码可能会因为某些原因，导致出错，进而整个后续代码有可能都被阻断。直接影响线上的稳定
JavaScript前端学算法题解LeetCode最大重复子字符串

最大重复子字符串给你一个字符串sequence，如果字符串word连续重复k次形成的字符串是sequence的一个子字符串，那么单词word的重复值为k。单
uni-app小程序沉浸式导航实现的全过程

项目要在多个页面上加自定义导航栏，还要有渐变效果，就是随着页面上滑，导航栏透明度由0逐渐变为1。这里面有几个基本点需要注意下。