理解js闭包原理

闭包

• 闭包是我们函数的一种高级使用方式
• 在聊闭包之前我们要先回顾一下 函数

函数的两个阶段

我们一直说函数有两个阶段

1. 定义阶段
2. 调用阶段

函数定义阶段

1. 开辟一个存储空间
2. 把函数体内的代码一模一样的放在这个空间内(不解析变量)
3. 把 存储空间 的地址给函数名

函数调用阶段

1. 按照函数名的地址找到函数的 存储空间
2. 形参赋值
3. 预解析
4. 将函数 存储空间 中的代码拿出来执行 （这里解析变量）

重新定义函数调用阶段

1. 按照函数名的地址找到函数的 存储空间

2. 形参赋值

3. 预解析

4. 在内存中开辟一个 执行空间

5. 将函数 存储空间 中的代码拿出来在刚刚开辟的 执行空间 中执行

   执行完毕后，内存中开辟的 执行空间 销毁

6. function fn() {
     console.log('我是 fn 函数')
   }
   
   fn()
   

   • 函数执行的时候会开辟一个 执行空间 （我们暂且叫他 xxff00）
   • console.log('我是 fn 函数') 这个代码就是在 xxff00 这个空间中执行
   • 代码执行完毕以后，这个 xxff00 空间就销毁了

函数执行空间

• 每个函数都会有一个 存储空间

• 但是每一次调用都会生成一个完全不一样的 执行空间

• 并且 执行空间 会在函数执行完毕后就销毁了，但是 存储空间 不会

• 那么这个函数空间执行完毕就销毁了，还有什么意义呢？

  ​ 我们可以有一些办法让这个空间 不销毁

  ​ 闭包，就是要利用这个 不销毁的执行空间

函数执行空间不销毁

• 函数的 执行空间 会在函数执行完毕之后就销毁
• 但是，一旦函数内部返回了一个引用数据类型，并且 在函数外部有变量接收 的情况下
• 那么这个函数 执行空间 就不会销毁了

function fn() {
  let obj = {
      name: 'Jack',
      age: 18,
      gender: '男'
  }  
  return obj
}

let o = fn()

• 函数执行的时候，会生成一个函数 执行空间 （我们暂且叫他 xxff00）
• 代码在 xxff00 空间中执行
• 在 xxff00 这个空间中声名了一个 对象空间（xxff11）
• 在 xxff00 这个执行空间把 xxff11 这个对象地址返回了
• 函数外部 o 接受的是一个对象的地址没错
  • 但是是一个在 xxff00 函数执行空间中的 xxff11 对象地址
  • 因为 o 变量一直在和这个对象地址关联着，所以 xxff00 这个空间一直不会销毁
• 等到什么时候，执行一句代码 o = null
  • 此时， o 变量不在关联 xxff00 函数执行空间中的 xxff11 对象地址
  • 那么，这个时候函数执行空间 xxff00 就销毁了

闭包

• 闭包就是利用了这个函数执行空间不销毁的逻辑
• 有几个条件组成闭包

如何产生闭包

• 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包

不销毁的空间

• 闭包的第一个条件就是利用了不销毁空间的逻辑

• 只不过不是返回一个 对象数据类型

• 而是返回一个 函数数据类型

function fn() {
    
  return function () {}
}

const f = fn()

f 变量接受的就是一个 fn的执行空间 中的 函数

产生闭包的条件

• 函数嵌套

• 内部函数引用了外部函数的数据(变量/函数)

function fn() {
  const num = 100  
  // 这个函数给一个名字，方便写笔记
  return function a() {
    console.log(num)
  }
}

const f = fn()

• fn() 的时候会生成一个 xxff00 的执行空间
• 再 xxff00 这个执行空间内部，定义了一个 a 函数的 存储空间 xxff11
• 全局 f 变量接受的就是 xxff00 里面的 xxff11
• 所以 xxff00 就是不会销毁的空间
• 因为 xxff00 不会销毁，所以，定义再里面的变量 num 也不会销毁
• 将来 f() 的时候，就能访问到 num 变量

常见的闭包使用形式

1. 将函数作为另一个函数的返回值

function fn(){
    var num = 10;
    function fn2(){
        num+=5;
        console.log(num);
    }
    return fn2;
}
// 直接调用, 没有意义
// fn1();

// 通过全局变量引用, 保住了内部函数fn2的命
var f = fn1();
f(); // 15  

2. 将函数的形参作为实参传递给另一个函数调用

function fn(m){
    function fn2(m){
        console.log(m);
    }
    return fn2;
}
var f=fn(3);

闭包的应用

//test.js
function total() {
    // 1.私有数据
    var num =  1000;
    // 2. 操作数据的函数
    function add() {
        num++;
        console.log("加1："+num);
    }
    function sub() {
        money--;
        console.log("减1："+num);
    }
   //向外暴露对象
    return {
        add: add,
        sub: sub
    }
  

<script type="text/javascript" src="js/test.js"></script>
<script>
	  var t = total();
    	t.add();
    	t.sub();
    <!--
        将所有的数据和功能都封装在一个函数内部
        只向外暴露一个包含多个方法的对象或函数
        使用的时候，只需要通过模块暴露的对象调用方法来实现对应的功能
        -->
</script>

闭包的特点

• 为什么要叫做特点，就是因为他的每一个点都是优点同时也是缺点
  1. 作用域空间不销毁
     • 优点： 因为不销毁，变量也不会销毁，增加了变量的生命周期
     • 缺点： 因为不销毁，会一直占用内存，多了以后就会导致内存溢出,因此每次使用后需要手动销毁
  2. 可以利用闭包访问：再一个函数外部访问函数内部的变量
     • 优点： 可以再函数外部访问内部数据
     • 缺点： 必须要时刻保持引用，导致函数执行栈不被销毁
  3. 保护私有变量
     • 优点： 可以把一些变量放在函数里面，不会污染全局
     • 缺点： 要利用闭包函数才能访问，不是很方便

闭包概念

• 有一个 A 函数，再 A 函数内部返回一个 B 函数
• 再 A 函数外部有变量引用这个 B 函数
• B 函数内部访问着 A 函数内部的私有变量
• 以上三个条件缺一不可