定义
子函数可以访问到其他函数作用域中的数据，称之为闭包
堆栈内存
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()())
