美文网首页前端
JavaScript闭包

JavaScript闭包

作者: 前白 | 来源:发表于2019-07-25 09:42 被阅读8次

基本概念

函数和声明该函数的词法环境的组合。闭包包含了函数也包含了声明该函数的词法环境(作用域)。

闭包实际上是将函数与其所操作的某些数据(环境)关联起来,这些数据或者是环境可以理解为它的一个作用域。因此我们可以达到一个能够访问另一个函数作用域的变量的函数的目的。

    //定义局部变量
    function count() {
        let count = 0;
        return function() {
            count = count + 1;
            console.log(count);
        }
    }
    
    var getCount = count();
    
    getCount();
    getCount();
    // 1
    // 2

特点

闭包一定return一个function,只有function才会有一个封闭的命名空间。

  • 函数嵌套函数
  • 函数内部可以引用外部的参数和变量
  • 参数和变量不会被垃圾回收机制回收

用途

  • 匿名自执行函数 - 只需要执行一次,其内部变量无需维护
      (function(){
      //
      })();
  • 封装回调保存作用域(缓存结果)
      for(var i = 1; i < 5; i++) {
          setTimeout((function(i) {
              return function() {
                  console.log(i);        
              } 
          })(i), i * 1000)
      }
  • 模拟私有方法
      var myNameSpace = (function () {
          // 私有计数器变量 
          var myPrivateVar = 0;
      
          /* 记录所有参数的私有函数 */
          var myPrivateMethod = function (foo) {
              console.log(foo + myPrivateVar);
          };
      
          return {
              // 公有变量 
              myPublicVar: 'foo',
              // 调用私有变量和方法的公用函数 *
              myPublicFunction: function (bar) {
                  // 增加私有计数器值 
                  myPrivateVal ++;
      
                  myPrivateMethod(bar);
              }
          };
      })();

常见误区

  • 在循环中创建闭包
      for (var i = 1; i <= 5; i++) {
          setTimeout(function() {
              console.log(i)
          }, i * 1000)
      }
  • 添加监听事件
      function func() {
          var element = document.getElementById("app");
          element.onclick = function() {
              alert(element.id);
          }
      }

相关文章

  • JavaScript----闭包

    javascript之闭包 闭包的概念     闭包(closure)是 JavaScript 的一种语法特性。 ...

  • 学习JavaScript闭包和作用域笔记

    JS JavaScript闭包和作用域 闭包 JavaScript高级程序设计中对闭包的定义:闭包是指有权访问另外...

  • javascript中闭包是什么

    javascript中闭包是什么 JavaScript 变量可以是局部变量或全局变量。私有变量可以用到闭包。闭包就...

  • Javascript 闭包

    闭包 (注:所以案例以 javascript 实现) 初识闭包 什么是闭包 MDNClosures are fun...

  • 作用域闭包

    概览 背景知识:JavaScript内存管理、JavaScript作用域。 内容 1 闭包定义 闭包:当函数可以记...

  • JavaScript 作用域

    概览 背景知识:JavaScript内存管理、JavaScript作用域。 内容 1 闭包定义 闭包:当函数可以记...

  • 20170815 前端开发日报

    JavaScript闭包,只学这篇就够了 闭包不是魔法 这篇文章使用一些简单的代码例子来解释JavaScript闭...

  • JavaScript深入理解-闭包(Closure)

    推荐文章:学习Javascript闭包(Closure)- 阮一峰javascript深入理解-从作用域链理解闭包...

  • 闭包

    学习Javascript闭包(Closure)

  • JS之闭包与IIFE

    本篇文章主要讨论了: JavaScript引擎 全局对象 闭包 循环 + 闭包 IIFE + 闭包 1.JavaS...

网友评论

    本文标题:JavaScript闭包

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