Rumah >hujung hadapan web >tutorial js >JS闭包用法的示例代码分享

JS闭包用法的示例代码分享

黄舟asal: 2017-03-27 14:37:311678semak imbas

这篇文章主要介绍了JS闭包用法,结合具体实例形式分析了javascript闭包的原理、执行步骤与相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS闭包用法。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
//      第一，函数作为返回值
      function fn(){
        var max = 10;
        return function bar(x){
          if(x > max) {
            console.log(x);
          }
        };
      }
      var f1 = fn();
      f1(15);
    </script>
    <script type="text/javascript">
//      第二，函数作为参数被传递
      var max = 10;
      fn = function(x){
        if(x > max){
          console.log(x);//15
        }
      };
      (function(f){
        var max = 100;
        f(15);
      })(fn);
    </script>
    <script>
      function fn(){
        var max = 10;
        return function bar(x){
          if(if > max){
            console.log(x);
          }
        };
      }
      var f1 = fn();
        max = 100;
      f1(15);
    </script>
  </body>
</html>

第一步，代码执行前生成全局上下文环境，并在执行时对其中的变量进行赋值。此时全局上下文环境是活动状态。

全局上下文环境:max是undefined

第二步，执行var f1 = fn();代码时，调用fn()，产生fn()执行上下文环境，压栈，并设置为活动状态。

fn()上下文环境：max是10

第三步，执行完var f1 = fn();，fn()调用完成。按理说应该销毁掉fn()的执行上下文环境，但是这里不能这么做。

注意，重点来了：因为执行fn()时，返回的是一个函数。函数的特别之处在于可以创建一个独立的作用域。

而正巧合的是，返回的这个函数体中，还有一个自由变量max要引用fn作用域下的fn()上下文环境中的max。

因此，这个max不能被销毁，销毁了之后bar函数中的max就找不到值了。因此，这里的fn()上下文环境不能被销毁，还依然存在与执行上下文栈中。

执行到max = 100;时，全局上下文环境将变为活动状态，但是fn()上下文环境依然会在执行上下文栈中。

另外，执行完max = 100;，全局上下文环境中的max被赋值为100。

全局上下文环境:max是100 fn()上下文环境：max是10

第四步，执行到f1(15);，执行f1(15)，即执行bar(15)，创建bar(15)上下文环境，并将其设置为活动状态。

执行bar(15)时，max是自由变量，需要向创建bar函数的作用域中查找，找到了max的值为10。

这里的重点就在于，创建bar函数是在执行fn()时创建的。fn()早就执行结束了，但是fn()执行上下文环境还存在与栈中，因此bar(15)时，max可以查找到。如果fn()上下文环境销毁了，那么max就找不到了。

使用闭包会增加内容开销，现在很明显了吧！

第五步，执行完f1(15);就是上下文环境的销毁过程，这里就不再赘述了。

闭包和作用域、上下文环境有着密不可分的关系，真的是“想说爱你不容易”！

另外，闭包在jQuery中的应用非常多，无论你是想了解一个经典的框架/类库，还是想自己开发一个插件或者类库，像闭包、原型这些基本的理论，是一定要知道的。否则，到时候出了BUG你都不知道为什么，因为这些BUG可能完全在你的知识范围之外。

Atas ialah kandungan terperinci JS闭包用法的示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能的代码案例Artikel seterusnya：JS数组搜索之折半搜索的实现方法详解

Artikel berkaitan

Lihat lagi