Js内嵌函数与闭包

43 阅读 0 评论 29 点赞

我是靠谱客的博主开放香水，最近开发中收集的这篇文章主要介绍Js内嵌函数与闭包，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

引用：

在C或者其它的主流语言中，当一个函数返回后，所有的局部变量将不可访问，因为它们所在的栈已经被消毁。但在Javascript里，如果你声明了一个内嵌函数，局部变量将在函数返回后依然可访问。这就闭包

<!DOCTYPE html>
      <html>
            <head>
                  <meta charset="utf-8">
                  <title></title>
            </head>
            <body>

                  <p>局部变量计数。</p>
                  <button type="button" onclick="myFunction()">计数!</button>
                  <p id="demo">0</p>
            <script>
                  function add() {
                        var counter = 0;
                  return function () {return counter += 1;}
                  }
                  //这里就相当于var a= function () {return counter += 1;}
                  var a=add();
                  function myFunction(){
                  document.getElementById("demo").innerHTML = a();
                  }

                  /*
                    变量 add 指定了函数自我调用的返回字值。
                  自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
                  add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
                  这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
                  计数器受匿名函数的作用域保护，只能通过 add 方法修改。
                  */

                  //也可以使用下面的函数自调用方式，如果不是闭包自调用，函数需要调用才会执行

                    //这里使用了自调用方式，直接把内嵌函数的地址传给add，所以下面的直接执行add（）
                  var add=(function(){
                        var counter = 0;
                        return function () {return counter += 1;}
                  })();
                  add();
                  add();
                  add();

            </script>

            </body>
      </html>

原理分析：
var add = function () {
    var counter = 0;
   return function () {return counter += 1;}
}
var a=add(); //这里代表执行了一个add，并返回一个内嵌函数对象给a
function myFunction(){
    document.getElementById("demo").innerHTML = a(); //执行a
}

如果不先执行add就写进html会发生什么事呢？
var add = function () {
    var counter = 0;
   return function () {return counter += 1;}
}
function myFunction(){

               //这个一执行，就会返回字符串function () {return counter += 1;}
               
    document.getElementById("demo").innerHTML = add();

}