闭包之前的内容写在这里
环境、作用域、回收
首先还是数据的回收问题，全局变量一般都是通过关闭页面回收的；而局部变量的值不用了，会被自动回收掉
像这种写在全局里的就不会被主动回收捏：
let title = '荷叶饭'
function fn() {
alert(title)
}
document.querySelector('button').addEventListener('click', fn)求后盾人老师别举他那听不懂的栗子了。。。
在计算机里环境可以理解为一块内存的数据，就是块空间
let title='荷叶饭'
function show(){
let url='#'
}
show()
console.log(url)外面用不了里面的变量
里面用得了外面的变量：
let title = '荷叶饭'
function show() {
let url = '#孩子们我是个链接'
function hd() {
console.log(url)//里面可以访问外面
}
hd()
}
show()函数环境生命周期
函数在调用之前的声明相对于建造城市的计划，调用函数相当于城市动工了，调用多次函数相当于建造多个一样的城市（开辟多块空间），但是不是同一个城市，彼此独立
function buildCity() {
let city = {};
return city;
}
let city1 = buildCity(); // 创建第一个城市
let city2 = buildCity(); // 创建第二个城市
console.log(city1 === city2); // false，两个不同的城市只有在显式修改共享状态时，才可能出现覆盖的情况。
let sharedCity = null;
function buildCity() {
sharedCity = {}; // 覆盖之前的 sharedCity
return sharedCity;
}
let city1 = buildCity(); // 创建并覆盖 sharedCity
let city2 = buildCity(); // 再次覆盖 sharedCity
console.log(city1 === city2); // true，因为 sharedCity 被覆盖了如果一个函数不return，相当于没有被外部引用，每次调用都是单独创建新的一块：
function hd() {
let n = 1;
return function sum() {
// console.log(++n);
let m = 1;
function show() {
console.log("m:" + ++m);
console.log("n:" + ++n);
};
show()
};
}
let a = hd();
a();
a();
a();n被return了，所以n++，但是m是独立的没有被外部调用，所以不++
输入被return，相当于被外部引用，所以多次调用m会在原来的基础上++：
function hd() {
let n = 1;
return function sum() {
// console.log(++n);
let m = 1;
return function show() {
console.log("m:" + ++m);
console.log("n:" + ++n);
};
};
}
let a = hd()();
a();
a();
a();延长了函数的生命周期
构造函数里的环境是什么
每执行一次构造函数就会创造出一个新的对象：
function Hd() {
let n = 1;
this.sum = function () {
console.log(++n);
};
}
let a = new Hd();
a.sum();
a.sum();
let b = new Hd();
b.sum();
b.sum();这方面和普通函数没什么区别：
块级作用域
没报错，这就说明这是两个块
{
let a = 1
}
{
let a = 1
}var没有块作用域的原因居然是块作用域出的比var晚，推出let和const可以适用块作用域
let-const-var在for循环
var没有块的特性：
for (var i = 1; i <= 3; i++) {
console.log(i);
}
console.log(i)//可以访问在for里写个定时器
如果是var的话：
for (var i = 1; i <= 3; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}
console.log(i);当 setTimeout 的回调函数执行时，for 循环已经执行完毕，此时 i 的值已经变成了 4，所以所有回调函数都会输出 4
换成let结果就不一样了：
let是有块级作用域的概念，for里的定时器函数在i等于不同值的时候，会先向上一级找i，还没找到全局，就在父级找到i了，找到的i就等于此时i的值
for (let i = 1; i <= 3; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}
var模拟块作用域
用定时器+立即执行函数模拟块作用域，每次循环创建一个新的作用域，从而捕获当前的 i 值，确保 setTimeout 回调函数输出正确的值。
for (var i = 1; i <= 3; i++) {
(function (i) {
setTimeout(function () {
console.log(i);//1,2,3
}, 1000);
})(i);
}多级作用域嵌套
不想被清掉的函数可以放在数组里：
let arr = [];
for (var i = 1; i <= 3; i++) {
arr.push(function () {
return i;
})
}
console.log(arr[2]());//4但是i打印出来都是4，因为定时器比for执行的慢
可以保留作用域：
let arr = [];
for (var i = 1; i <= 3; i++) {
(function (i) {
arr.push(function () {
return i;
});
})(i)//把i传过去
// console.log(i);
}
console.log(arr[2]())//3
闭包
哪个傻逼弹幕说的闭包和函数没有必然关系的
闭包（Closure）是 JavaScript 中一个非常重要的概念，也是函数式编程的核心特性之一。闭包是指一个函数能够记住并访问它的作用域，即使这个函数在其作用域之外执行。
求后盾人老师不要再温故而知新了
在做一个筛数组元素的函数的时候，可以发现筛的这个方法可以单独提出来：
let arr = [1, 23, 4, 5, 6, 7, 8, 9, 21, 10];
function between(a, b) {
return function(v) {
return v >= a && v <= b;
};
}
console.log(arr.filter(between(3, 9)))// [4, 5, 6, 7, 8, 9]本来筛不同区间的数是这么做的：
let hd = arr.filter(function (v) {
return v >= 2 && v <= 9;
});
console.log(hd);// [4, 5, 6, 7, 8, 9]
let a = arr.filter(function (v) {
return v >= 6 && v <= 10;
});
console.log(a)//[6, 7, 8, 9, 10]现在使用闭包结构，让匿名函数访问上层函数的参数，然后再返回当作filter函数的回调函数传入
也可以实现筛选商品的效果：
let lessons = [
{
title: "媒体查询响应式布局",
click: 89,
price: 12
},
{
title: "FLEX 弹性盒模型",
click: 45,
price: 120
},
{
title: "GRID 栅格系统",
click: 19,
price: 67
},
{
title: "盒子模型详解",
click: 29,
price: 300
}
];
function between(a, b) {
return function(v) {
return v.price >= a && v.price <= b;
};
}
console.table(lessons.filter(between(10, 100)));
应用
加深对闭包的印象：移动动画
按钮的 position 属性需要设置为 relative 或 absolute，left 样式才能生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
position: absolute;
}
</style>
</head>
<button>点我 </button>
<button>溜了溜了。。。</button>
<body>
<script>
let btns = document.querySelectorAll('button')
btns.forEach(function (item) {
item.addEventListener('click', function () {
let left = 1
setInterval(function () {
item.style.left = left++ + 'px'//这里使用了闭包
}, 10)
})
})
</script>
</body>
</html>
如果多点几次，会触发频闪效果。。。会抖动
为什么呢？因为把left的定义写在了事件监听的函数里，所以每次点击left就会重新等于1
解决方案1就是把对left的定义放在外面一层：
let btns = document.querySelectorAll('button')
btns.forEach(function (item) {
let left = 1
item.addEventListener('click', function () {
setInterval(function () {
item.style.left = left++ + 'px'
}, 10)
})
})当你连点两次的时候，会发现按钮不抖动了，但是移动速度加快了！
为什么移动速度变快了？因为外面没有清除定时器，每点一下，就是新增了一个定时器，到最后越来越多的定时器再给按钮做left++的运算，所以越走越快！！
解决方法可以设置一个flag量，来判定是否创建过计时器：
let btns = document.querySelectorAll('button')
btns.forEach(function (item) {
let left = 1
let flag = false
item.addEventListener('click', function () {
if (!flag) {
flag = true
setInterval(function () {
item.style.left = left++ + 'px'
}, 10)
}
})
})反过来把left放在里面，也不会出现频闪的情况（因为定时器只能开一个）：
let btns = document.querySelectorAll('button')
btns.forEach(function (item) {
let flag = false
item.addEventListener('click', function () {
if (!flag) {
let left = 1
flag = true//写在里面
setInterval(function () {
item.style.left = left++ + 'px'
}, 10)
}
})
})利用闭包特性做购物排序:
let lessons = [
{
title: "媒体查询响应式布局",
click: 89,
price: 12
},
{
title: "FLEX 弹性盒模型",
click: 45,
price: 120
},
{
title: "GRID 栅格系统",
click: 19,
price: 67
},
{
title: "盒子模型详解",
click: 29,
price: 300
}
];
function order(field, type = "asc") {
return function(a, b) {
if (type == "asc") return a[field] > b[field] ? 1 : -1;//可以自由更改升序降序
return a[field] > b[field] ? -1 : 1;//并且改变根据click/price的排序
};
}
let hd = lessons.sort(order("price"));
console.table(hd);闭包导致的内存泄漏
获取一整个对象会很臃肿，当你只想获取一个对象里的属性，可以使用一种过河拆桥的方法：获取整个对象->使用属性->销毁对象，还可解决闭包导致的内存泄漏
不是foreach是同步，先执行foreach里的同步，item是空也是同步，元素的事件绑定是异步的：
let divs = document.querySelectorAll("div");
divs.forEach(function (item) {
let desc = item.getAttribute("desc");
item.addEventListener("click", function () {
// console.log(item.getAttribute("desc"));
console.log(desc);//获取属性
console.log(item);
});
item = null;//销毁对象
});this在闭包中的历史遗留问题
this在闭包里指向混乱：
let hd = {
user: "后盾人",
get: function () {
return function(){
return this.user;
}
}
};
let a = hd.get();
console.log(a())//undefined这是个闭包结构，a是get方法，a()就是执行get方法，返回get方法里面的匿名函数的this.user，但是这个匿名函数是个函数啊，他的this是window，window里没有user这个属性，所以返回undefined
怎么让内部的匿名函数的this指向hd？声明一个this
let hd = {
user: "后盾人",
get: function () {
let This=this
return function(){
return This.user;
}
}
};
let a = hd.get();
console.log(a())//后盾人也可以用箭头函数，箭头函数的this指向get方法的this，也就是对象hd，这样就可以访问user了：
let hd = {
user: "后盾人",
get: function() {
return () => {
return this.user;
};
}
};
let a = hd.get();
console.log(a())//后盾人后盾人老师我恨你。。。
