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#用闭包模拟私有方法

<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>