首页 > web前端 > js教程 > 正文

什么是闭包

一个新手
发布: 2017-09-08 13:12:50
原创
1537 人浏览过

什么是闭包:

闭包是指有权访问另一个函数作用域的变量的函数。
–《javascript高级程序设计》

在这个函数fun2中可以访问另一个函数中的变量a,所以fun2()就是一个闭包。
function fun1 () { 
      var  a = 0; 
      function fun2 () {  
          console.log(a);  
      } 
      fun2(); }
登录后复制

  1.在定义函数外调用闭包的方法,逃离方式:

    (1).将内部函数指定给一个全局变量;

var globalVar; function outer() { 
      console.log(‘outer’); 
      function inner(){ 
          console.log(‘inner’); 
      } 
      globalVar = inner;       
      } outer(); // outer 
      globalVar(); // inner;
登录后复制

在这个例子中inner()通过全局变量的引用成功逃离,现在可以在全局中调用,而且可以引用outer()的变量

    (2).通过返回值来’营救’内部函数的引用

function outer() { 
      console.log(‘outer’); 
      function inner(){ 
          console.log(‘inner’); 
      }    
      return inner;       
      } 
      var fn = outer(); // outer 
      fn(); // inner;
登录后复制

在这个例子中inner()通过返回值成功逃离,现在可以在全局中调用,而且可以引用outer()的变量

  2.在函数外调用闭包的影响:增加内存占用;

    本来正常的情况下是函数调用结束之后函数的执行环境离开环境栈,定义的变量废弃(废弃与垃圾收集机制有关),活动变量(变量对象)会被销毁,内存释放。但是现在因为闭包的作用域链包含了外部函数的变量对象,外部函数的变量有可能再被引用,垃圾收集机制不会将外部函数的变量废弃,在内存保留的外部函数的变量对象。这样就加大了对内存的占用。

  3.闭包与变量的关系:闭包中常见的误区及解决技巧

    闭包保存的是包含函数的整个变量对象,所取得的外部对象变量为闭包被调用时刻的对象变量,一般为外部函数变量的最后一个值。

例:

function createFun() { 
      var result = []; 
      for ( var i = 0; i < 10; i++) { 
          result[i] = function() { 
              return i; 
          }; 
      } 
      return result; } var result = createFun(); console.log(result5); // 10
登录后复制

  这里外部函数的返回值为一个数组,数组值为不同函数(闭包)的引用,我们会误认为每个闭包的调用的返回值不同,但实际上每个函数都会返回一样的值。因为当闭包调用时,调用闭包的外部函数已经执行完毕,此时外部函数的变量对象中的 i = 10,而我们闭包的返回值为i,闭包会获取调用时的外部变量对象,此时的i为10。

解决:

function createFun() { 
      var result = []; 
      for ( var i = 0; i < 10; i++) { 
          result[i] = function(num) { 
              return function() { 
                     return num; 
              }; 
           }(i); 
      } 
      return result; } var result = createFun(); console.log(result5); // 5
登录后复制

  在循环中,我们定义了一个匿名数组,并将立即执行该匿名函数的结果赋给数组,这里的匿名函数有一个参数num,每次将i作为参数传递给num,每次循环num都会得到不同的值,所以每次返回了不同的函数(区别在于num值不同),当在外部调用数组值时,会返回不同的值,与预期相符。 

  4. 注意闭包中this值

  首先,关于函数中this指向,我们应该知道this指向调用该函数的对象,若无明确调用对象则指向window对象。

  在闭包中容易弄错的this指向,例:

var name = “window”; 
      var o = { 
          name: “object”, 
          getName: function() { 
              return function() { 
                  return this.name; 
              }; 
          } 
      }; console.log(o.getName()()); // window
登录后复制

  可以看出闭包this指向了全局对象,分析,可以把o.getName()()写成(o.getName())(),这个表达式相当于第一步先执行了o.getName(),这个函数返回了一个匿名函数(闭包),然后在全局下执行了这个闭包,并不是通过对象o调用,所以this指向全局对象。

  5. 内存泄漏的问题,如何减少不必要的内存占用

function assignHandler() { 
          var ele = documnet.getElementById(“somenode”); 
          ele.onclick = function() { 
              console.log(ele.id); 
          }; 
          }
登录后复制

  在上面的例子中定义ele的方法与匿名函数有关,于是ele保存了对匿名函数的引用,而闭包会引用包含函数也引用了ele对象,这样就造成了对象的循环引用,ele元素(dom元素占用内存较大)就一直保存在了内存中无法释放,解决方法如下:

function assignHandler() { 
          var ele = documnet.getElementById(“somenode”); 
          var id = ele.id; 
          ele.onclick = function() { 
              console.log(id);    // 通过id值中介表面上解除了与ele的循环引用 
          }; 
          ele = null; // 手动解除引用 }
登录后复制

以上是什么是闭包的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板