闭包

定义

子函数可以访问到其他函数作用域中的数据，称之为闭包

堆栈内存

1、ECStack: Execution Context Stack 执行环境栈（栈内存）

JS引擎想要执行代码，一定会创建一个执行环境栈，也叫栈内存（ECStack），栈内存的目的：执行代码，存储基本类型的值

2、EC：Execution Context 执行环境（执行上下文）

VO：Varibale Object 变量对象
AO：Activation Object 活动对象（函数的叫做AO，理解为VO的一个分支）
进站：把创建的上下文压缩到栈中执行
出站：执行完的上下文就没有用了
闭包：有的还有用，会把其压缩到栈底

3、Scope：作用域，创建函数的时候就赋予的

4、Scope Chain：作用域链

5、GO全局对象：global object，在浏览器端，会把全局对象赋值给window={}

6、a=1，变量赋值的三步骤

创建变量：声明 declare
创建值：基本值直接在栈中创建和存储
让变量和值关联起来（赋值）定义 defined

7、变量提升

当栈内存（作用域）形成，JS代码自上而下执行之前，浏览器首先会把所有带"VAR" / "FUNCTION"关键词的进行提前“声明”或者“定义”，这种预先处理机制称之为“变量提升”
=> 声明（declare）:var a (默认值是undefined）
=> 定义（defined）: a=12(定义其实就是赋值）
【变量提升阶段】
=>带“VAR”的是只声明，未定义
=>带“FUNCTION”的声明和赋值都完成了

=> 变量提升只发生在当前作用域，（例如：开始加载页面的时候，只对全局作用域下的变量进行提升，因为此时函数中储存的都是字符串而已）
=> 在全局作用域下声明的函数或者变量是“全局变量”，同理，在私有作用余下生命的变量是“私有变量”

=> 浏览器很懒，做过的事情不会重复执行第二遍，也就是，当代码执行遇到创建函数这部分代码后，直接跳过即可（因为在提升阶段就已经完成了函数赋值操作了）

=>私有作用域形成后，也不是立即执行代码行，而是先进行变量提升（变量提升前，先形参赋值）

=> 在ES3、ES5语法规范中，只有全局作用域和函数执行的私有作用域都是栈内存，其他大括号不会形成栈内存

8、堆内存：引用值对应的空间

1、存储引用类型值的（对象：键值对，函数：代码字符串）
=> 当前堆内存释放销毁，那么这个引用值彻底彻底没了
=> 堆内存释放：当堆内存没有被任何的变量或者其他的东西所占用，浏览器会在空闲的时候，自主的进行内存回收，把所有不被占用的堆内存销毁掉（谷歌浏览器WebKit的内存回收机制，每间隔一段时间就去查找一遍有没有不被占用的内存，IE：内存占用的计数器来完成内存回收的）

xxx = null ，通过空对象指针null可以让原始变量（或其他的东西）谁都不指向，name原有被占用的堆内存就没有被东西占用，浏览器会销毁他

作用域

栈内存：作用域

1、提供一个供JS代码自上而下执行的环境（代码都是在栈中执行的，也叫执行栈）
2、由于基本数据类型值比较简单，他们都是直接在栈内存中开辟一个位置，把值直接存储进去
=> 当栈内存被销毁，存储的那些基本值也跟着被销毁了
3、作用域链只向上查找，找到全局window即终止
4、函数被执行后其环境变量将从内存中删除。

function count() {
  let total = 0;
}
count();

5、函数每次调用都会创建一个新作用域，如果子函数被使用时父级环境将被保留

function hd() {
  let n = 1;
    return function() {
      console.log(++n);
  };
}
let a = hd();
a(); //2
a(); //3

6、构造函数也是很好的环境例子，子函数被外部使用父级环境将被保留

function User() {
  let a = 1;
  this.show = function() {
    console.log(a++);
  };
}
let a = new User();
a.show(); //1
a.show(); //2
let b = new User();
b.show(); //1

let-var

带var和不带var的区别

在全局作用下，声明一个变量，也相当于给WINDOW 全局对象设置了一个属性，变量的值就是属性值（私有作用域中声明的私有变量和WINDOW没啥关系）

var 没有块级作用域，定义的是全局变量i，1秒之后i的值为4，

for (var i = 0; i <= 3; i++) {
        setTimeout(() => {
            console.log(i)
        }, 1000)
    }
# 4 4 4 4
# 按照预期它应该依次输出0 1 2 3，而结果它输出了四次4，这是为什么呢？原来由于js是单线程的，所以在执行for循环的时候定时器setTimeout被安排到任务队列中排队等待执行，而在等待过程中for循环就已经在执行，等到setTimeout可以执行的时候，for循环已经结束，i的值也已经编程4，所以打印出来四个4

let有块级作用域，每次循环都会产生一个定时器，每次产生的定时器都是不同的，定时器产生后倒计时就开始了，for的依次执行时间是很短的，也就是说，定时器几乎是同时开始同时结束的

for (let i = 0; i <= 3; i++) {
        setTimeout(() => {
            console.log(i)
        }, 1000)
    }
# 0 1 2 3 

模拟出var的伪块级作用域

for (var i = 0; i <= 3; i++) {
        (function (i) {
            setTimeout(() => {
                console.log(i)
            }, 1000)
        })(i)
    }
# 0 1 2 3 

案例

使用闭包做区间筛选

let arr = [1, 2, 19, 20, 22, 7, 3, 8, 4, 0];
    let between = (a, b) => {
        return (v) => {
            return v>= a && v <= b;
        }
    }
    console.log(arr.filter(between(3, 10)))

# 每执行一次between函数，都会产生一个新的环境（a,b)，每个环境下的存储一个v的值,拿v和a,b进行比较，然后返回

移动动画的闭包使用

<button style="position:relative">点击移动</button> <button style="position:relative">点击移动</button>

let btns = document.querySelectorAll("button");
    btns.forEach((item) => {
        let left = 1;
        item.addEventListener("click", () => {
            if (left == 1) {
                setInterval(() => {
                    item.style.left = left++ + "px";
                }, 100)
            }
        })
    })

闭包的内存泄漏解决方案

<button type="text" id="email">mail</button>
    <button type="text" id="name">Name</button>
    <button type="text" id="age">Age</button>

    let btns = document.querySelectorAll("button")
    btns.forEach((item, index) => {
        let btn = item;
        item.addEventListener("click", function () {
            console.log(item)
            console.log(btn)
        })
        item = null
    });

this在闭包中的历史遗留问题

正常来说，闭包可以访问到上级的this，但是this指针比较特殊，它指向函数函数调用时的环境（window)

let obj = {
        user: "liu",
        get: function () {
            return function () {
                return this.user
            }
        }
    };
    console.log(obj.get()())

解决方案

使用箭头函数

let obj = {
        user: "liu",
        get: function () {
            return () => {
                return this.user
            }
        }
    };
    console.log(obj.get()())

保存this

let obj = {
        user: "liu",
        get: function () {
            let that = this;
            return function () {
                return that.user
            }
        }
    };
    console.log(obj.get()())