js笔记16-闭包

一.概述

概述：闭包是一个可以访问其他作用域中的变量，它也可以叫做一个函数。

二.图形理解闭包

---

代码展示

<script> 
    var a=10;
    function fun(){
        var b=20;
        console.log(a+b);
    }
    fun();
</script>   

闭包的使用思路

①全局执行上下文，也就是调用函数。

②局部执行上下文，也就是打印a+b。

③局部作用域访问全局变量，并且去使用它，将结果打印出来。

---

三.闭包的使用

知识点：局部作用域可以访问全局作用域的变量。

<script> 
    var num=1;
    function fun(){
        num++;
        console.log(num);
    }
    fun();
    fun();
    fun();
</script>   

当第一次函数调用的时候，没有找到全局变量，就会沿着作用域向上寻找全局变量。

当第一次执行，全局变量num由1变到2。

当第二次执行，全局变量num由2变到3。

当第三次执行，全局变量num由3变到4。

---

四.闭包面试题

1.闭包面试题1

闭包面试题1：全局作用域、局部作用域里还会出现局部作用域，加入了函数嵌套的知识。

<script> 
    function outer(b){
        function inner(a){
            console.log(a+b);
        }
        inner(10);
    }
    outer(20);
</script>   

图形理解

总结：inner函数是闭包。

---

2.闭包面试题2

<script> 
    function outer(){
        var a=10;
        function inner(){
            a=a+10;
            console.log(a);
        }
        return inner;
    }
    var result=outer();
    result();//20
    result();//30
    var result1=outer();
    result1();//20
    result1();//30
</script>   

总结：inner函数是闭包。

---

第一个闭包执行流程：

①当outer函数第一次执行的时候，声明了一个局部变量a=10；以及声明了第一个inner函数声明部分，并且把函数声明部分返回。

②inner函数执行时，自身的局部作用域中没有变量a,会沿着作用域往上查询。并且，每一次的调用都是在10的基础上加10的。所以，第一次的闭包结果是20

---

第二次闭包执行流程：

①当outer函数执行第二次的时候，又执行了一次重复的操作。只是此时的全局变量变成了20，所以再次加10，结果为30

---

第三次闭包的执行流程：

①第三次的执行结果和第一次的执行结果一样，因为函数重新声明了，相当于回到了起点，也就是全局变量变成了10，所以结果为20

---

第四次闭包的执行流程：

①第四次的执行结果和第二次的执行结果是一样的，所以结果为30

---

五.闭包与栈的联系

闭包的思路和栈很像，有着后进先出的思想。

后进先出：我们看到的第一片薯片是最后放进去的薯片，所以，我们看最里面的薯片，就需要用后进先出的思路。

js是单线程语言，与图片中的薯片原理是一样的。例如我们要看最后一片薯片，就需要一片一片地拿出，才能看到最后一片。

单线程：一次只做一件事情。

---

闭包是栈的联系

<script> 
    function a(){
        function b(){
            function c(){           
                console.log("答案");  //答案
            } 
            c();
        }
        b();
    }
    a();
</script>   

①全局执行上下文

②函数a执行上下文

③函数b执行上下文

④函数c执行上下文，接着，控制台就打印了结果

⑤没有输出，拿走函数c

⑥没有输出，拿走函数b

⑦没有输出，拿走函数a

⑧回到了全局执行上下文，就可以继续往下执行了

---

以上就是js处理上下文的方式，这种薯片罐的存储方式被称为栈，英文单词为stack。

---

篇章

上一篇：js笔记15-类数组对象

下一篇：JavaScript面向对象教程1-编程中的两种思想