Js基础-闭包-Toy模板网

这篇具有很好参考价值的文章主要介绍了Js基础-闭包。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在介绍闭包之前，我们先看看是什么全局变量和局部变量

全局变量和局部变量

局部变量：定义在函数内部的变量（只能在内部被访问）形参也是一种局部变量

全局变量：不在函数内部定义的变量，就称为全局变量，全局变量在任何函数内都可以被访问和修改

假如我们在函数内部定义了一个和外部相同名字的变量，那么在函数内部是用的哪个变量呢？

<script>
    var ccc = 5;
    function inner() {
        var ccc = 4;
        console.log(ccc);
    }

    inner();

  </script>

以上结果会输出4 ，因为在执行过程中，会由内向外寻找变量的定义，所以局部变量在函数内部比全局变量更有优先被使用的权力

再看一个例子，假如我们打印外部的ccc变量会输出什么？

<script>
    var ccc = 5;
    function inner() {
        var ccc = 4;
    }

    inner();

    console.log(ccc);

</script>

上面的例子会输出 5，因为函数内部定义的变量无法被外部看到

我们再来看一个比较奇葩的例子

<script>
    var ccc = 5;
    function inner() {
        ccc += 1;
        var ccc = 4;
        console.log(ccc);
    }

    inner();

</script>

这个例子第一次打印会输出 NaN , 第二次打印会输出 4

第二次打印好理解，因为我们已经知道局部变量优先被使用。

第一次比较奇怪，按道理讲，在函数内部也应该能引用到外部的全局变量ccc，但是程序的运行结果和我们的推断相反，这是因为js语言有个比较坑的知识点；即在函数执行前，语法规定把变量的定义提升到函数的前面。

上面的例子在运行的时候浏览器是这么理解的

<script>
    var ccc = 5;
    function inner() {
				var ccc = undefined;
        ccc += 1;
        ccc = 4;
        console.log(ccc);
    }

    inner();

</script>

这种特性就叫做函数变量提升，把一个后面定义变量，提升到前面，因为前面有这个地方的引用。

局部函数

一个函数内部也可以定义另一个函数内部

<script>
        function outer() {

            function inner() {
                console.log("innser函数")
            }

            inner()

        }

        outer();
  </script>

上面的inner() 函数只能再 outer() 函数内部调用

特别注意

如果不加修饰词定义一个变量的话，此变量将被视为全局变量，即使它定义在了函数内部

<script>

        function fa() {
            quanju = 10;
        }
        fa();
        console.log(quanju);

    </script>

闭包

概念

从概念上讲，闭包就是一个函数以及捆绑在此函数周围环境状态的引用组合，每创建一个函数都会产生一个闭包

这个定义比较抽象，下面，我们举个栗子

<script>
      function outter(){
					
					var cons = '常量小常'
          
          return function() {
              return cons;
          } 
      }
			
			// 得到外部函数的内部函数
      var consFun= outter(1,2);
      // 执行内部函数
      consFun();
</script>

这个例子最终会输出 ‘常量小常’，虽然内部函数是在外部执行的，但它依然能够找到定义时候的一些常量值。这个就是一种闭包的表现形式

换句话说，就是函数在执行的时候，能够还原它定义时所处的环境，能够按照定义时候的样子去执行

模拟私有变量

很多语言都支持私有变量，就是将一个变量或者方法声明为私有，只能被内部使用，外部要想使用只能通过定义的一些公共方法访问

Js原生不支持这种语法，但可以通过闭包模拟这种私有变量的特性

下面就是一个闭包模拟私有变量的例子， privateCounter 变量不能直接被外部访问，只能通过特定的方法操作。这个例子来源于此：

用闭包模拟私有变量

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures#用闭包模拟私有方法文章来源地址https://www.toymoban.com/news/detail-709777.html

<script>
      var Counter = (function () {
      var privateCounter = 0;
      function changeBy(val) {
          privateCounter += val;
      }
      return {
          increment: function () {
          changeBy(1);
          },
          decrement: function () {
          changeBy(-1);
          },
          value: function () {
          return privateCounter;
          },
      };
      })();

      console.log(Counter.value()); /* logs 0 */
      Counter.increment();
      Counter.increment();
      console.log(Counter.value()); /* logs 2 */
      Counter.decrement();
      console.log(Counter.value()); /* logs 1 */

  </script>

到了这里，关于Js基础-闭包的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！