0.什么是闭包
1.闭包的特点
2.解决闭包的麻烦
3.demo
<body>
<button>自增</button>
<h1></h1>
<script>
const btn = document.querySelector('button');
const h1 = document.querySelector('h1');
// 闭包的特点：外部函数结束，内部函数依然存在，而且占用了外部函数的变量
//（导致外部函数不能释放内存）
function setElement() {
// 1. 定义一个数组
let arr = [
{ name: "金" },
{ name: "木" },
{ name: "水" },
{ name: "火" },
{ name: "土" }
];
// 2. 定义一个下标
let index = -1; // 不是数组真正有效的下标
// 3. 返回一个函数
return function () {
// 3.1 修改index
index++; // 当前函数没有index，访问的是外部的index
// 3.2 判定
if (index > arr.length - 1) {
index = 0; //这时显示下标0,"金"
}
// 3.3 返回当前的数据
return arr[index].name;
};
}
// 调用函数setElement
let getElement = setElement();
// 代码执行到这：函数setElement()执行已经结束
// 按理说：应该释放setElement的内存（index，arr）
// 但是：因为当前函数的运行返回了一个函数：里面要用到index和arr：导致函数不能
//释放内存（内存一直被占用）： 闭包
// console.log(getElement);
h1.innerText = getElement();//渲染
// 点击事件
// 点击调用函数,下标++显示不同数据
btn.onclick = function () {
h1.innerText = getElement();
};
// 假设后续还有很多代码要运行：上述内存一直会占用（虽然代码很安全，不存在污染的问题）
// 解决闭包的麻烦：主动释放闭包所占用的内存
// 释放内存把下面这行代码注释打开
// getElement = null;
// getElement不再指向闭包函数function，闭包函数也就不需要占用变量arr和index：setElement函数可以得到释放
</script>
</body>
4.this对象
window.identity = '这是window'
let obj = {
identity: '这是obj',
getIdentity() {
// 返回内部函数
return function () {
return this.identity
}
}
}
console.log(obj.getIdentity()());//这是window
// 注意最后还有()
<script>
window.identity = '这是window'
let obj = {
identity: '这是obj',
getIdentity() {
let that = this
// 返回内部函数
return function () {
return that.identity
}
}
}
console.log(obj.getIdentity()());//这是obj
// 注意最后还有()
</script>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或 联络我们.。
- 找不到素材资源介绍文章里的示例图片？
- 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。
- 模板不会安装或需要功能定制以及二次开发？
- 请QQ联系我们
发表评论
还没有评论，快来抢沙发吧！