美文网首页
关于闭包的理解

关于闭包的理解

作者: bin_lifecycle | 来源:发表于2019-10-16 13:10 被阅读0次
    1.对于闭包,个人理解:

    有权访问另一个函数作用域中的变量的函数

    示例:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    
    <body>
      <script>
        var outerValue = '我是外部变量';
        var later;
        function outerFunction() {
          var innerValue = '我是内部变量';
          var innerFunction = function () {
            console.log(outerValue);
            console.log(innerValue);
          };
          later = innerFunction;
        }
        outerFunction();
        later();
      </script>
    </body>
    
    </html>
    
    
    打印结果

    闭包是一种特殊的对象。
    它由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。

    理解闭包的关键在于:外部函数调用之后其变量对象本应该被销毁,但闭包的存在使我们仍然可以访问外部函数的变量对象,这就是闭包的重要概念。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <script>
        let outer;
        function father(){
          let inner = '我是函数的内部变量';
          function child(){
            console.log(inner);
          }
        }
        father();
      </script>
    </body>
    </html>
    
    打印结果,并没有打印出inner

    分析:此时js脚本中,调用了father函数,该函数含有一个内部变量inner,同时在该函数中创建了另一个child函数,child函数可以访问father函数的内部变量,但是child函数在father函数的内部,外部没法直接调用,所以控制台没有打印任何结果

    换一下写法:

    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <script>
        let outer;
        function father(){
          let inner = '我是father函数的内部变量';
          outer = function child(){
            console.log(inner);
          }
        }
        father();
        outer();
      </script>
    </body>
    </html>
    
    有打印结果

    此时有打印结果,因为child函数的引用赋给了一个外部的变量

    产生一个闭包
       创建闭包最常见方式,就是在一个函数内部创建另一个函数。下面例子中的 child 就是一个闭包:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <script>
        function father(){
          let a =1 ,b=2;
          function child(){ //闭包函数,访问外部函数的
            return a+b; //返回father函数内部变量a+b的合
          }
          return child; //返回闭包函数
        }
        console.log(father());
      </script>
    </body>
    </html>
    
    打印出闭包函数
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <script>
        function father(){
          let a =1 ,b=2;
          function child(){ //闭包函数,访问外部函数的
            return a+b; //返回father函数内部变量a+b的合
          }
          return child(); //返回闭包函数的执行结果
        }
        console.log(father());
      </script>
    </body>
    </html>
    
    打印出闭包函数的执行结果

    闭包的作用域链包含着它自己的作用域,以及包含它的函数的作用域和全局作用域。

    闭包的注意事项

    .通常,函数的作用域及其所有变量都会在函数执行结束后被销毁。但是,在创建了一个闭包以后,这个函数的作用域就会一直保存到闭包不存在为止。

    相关文章

      网友评论

          本文标题:关于闭包的理解

          本文链接:https://www.haomeiwen.com/subject/akpymctx.html