美文网首页
闭包的理解

闭包的理解

作者: W北落师门W | 来源:发表于2017-08-30 20:43 被阅读0次

    接触过JS的同学们一定都知道闭包这个名词,在我刚开始学习JS的时候,闭包对于我是一个很高大上很难理解的存在,今天终于能鼓起勇气来谈一谈我眼中的闭包。
    首先,我们来看看闭包的概念
    在MDN中,闭包的概念描述为:

    闭包是一个函数和函数所声明的词法环境的结合。它由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。

    阮大对于闭包的解释为:

    闭包就是能够读取其他函数内部变量的函数。

    通过上面的两种解释,我们就能总结出闭包的一些特点:

    1. 闭包首先是一个函数
    2. 闭包能访问到本身函数之外的变量

    总结出上面两个概念就很好理解了,我们看一段代码是不是闭包,只要看它是不是包含上面两种特点就好了,下面我们来看一个示例:

    var a = 'beiluoshimen';
    function fn () {
       alert(a);
    }
    

    我们看上面的一段代码,首先fn是一个函数,其次变量a就是一个变量,但是它并不在fn之中,所以变量a和函数fn就构成了一个闭包。
    但是我们常看到的闭包都是这样的

    function makeFunc() {
      var name = "Mozilla";
      function displayName() {
        alert(name);
      }
      return displayName;
    }
    
    var fn1 = new makeFunc();
    fn1();  // "Mozilla"
    
    // displayName是一个函数,name是一个displayName之外的变量,他们就构成了一个闭包
    

    那么为什么要在这个闭包外面再套一个函数呢?而且还要把displayName return出去;
    这我们就要说到闭包的作用了:

    1. 减少全局变量/创造一个局部变量
    2. 读取函数内部的变量
    3. 让变量一直存在于内存中

    所以上面的代码中,makeFunc()的作用域中创造了一个局部变量name,这个变量在外部是访问不到的,但是通过我们return displayName,我们就能够在外部访问到这个变量了。

    所以,闭包的概念并不是很难理解,只要根据闭包的特点就可以认出它。

    只是我们经常看到的关于闭包的题目其实都是和其它的一些知识点结合在一起,导致了我们以为闭包的理解很困难。下面我们以几道题目作为示例:

    问题1

    上面的题目我们可以根据上文的闭包特点来分辨出两个闭包,但是导致最后两个输出结果不同的原因并不在于闭包,而是在于this的指向不同导致的。

    1. 第一段代码在最后调用方法时,this指向的是全局的window对象,此时window.name = "The Window;"所以输出的结果是"The Window"
    2. 第二段代码在运行var that = this;时,this指向的是object对象,此时object.name = "My Object;",而that保存了此时的this对象,所以最后输出的that.name = "My Object;"

    关于this的只是大家可以再仔细了解一下。

    下面我们再看一段代码

    function Foo() {
        var i = 0;
        return function() {
            console.log(i++);
        }
    }
     
    var f1 = Foo(),
        f2 = Foo();
    f1();
    f1();
    f2();
    

    大家可以思考下这段代码输出什么结果?
    没错,就是0 1 0
    原因就是,每个闭包都保存在不同的内存中,所以f1和f2并没有关系。

    关于闭包的理解和题目都还有很多,但是我觉得只要我们一直清楚地认识到闭包的特点:

    1. 闭包首先是一个函数
    2. 闭包能访问到本身函数之外的变量

    就能处变不惊,处理闭包相关的问题!

    相关文章

      网友评论

          本文标题:闭包的理解

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