后盾人JS--闭包明明白白
延伸函数环境生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function hd(){
let n = 1
return function sum(){
let m =1
return function show(){
console.log(++m)
}
}
}
let a = hd()()
a()
a()
</script>
</body>
</html>
构造函数中的作用域的使用形态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Hd(){
let n = 1
this.sum = function(){
console.log(++n)
}
}
let a = new Hd()
a.sum()
a.sum()
a.sum()
</script>
</body>
</html>模拟出var的伪块作用域
var没有块级作用域，但是有函数作用域
这样可以顺利打印出i：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
for(var i=1;i<=3;i++)
{
(function(i){
setTimeout(function(){
console.log(i)
},1000)
})(i)
}
</script>
</body>
</html>闭包获取价格区间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [1,23,4,5,6,7,8,9]
function between(a,b){
return function(v){
return v>=a && v<=b
}
}
console.log(arr.filter(between(3,9)))
</script>
</body>
</html>闭包动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
button {
position: absolute
}
</style>
<body>
<button message="后盾人">houdunren</button>
<script>
let btns = document.querySelectorAll("button")
btns.forEach(function (item) {
item.addEventListener("click", function () {
let left = 1
setInterval(function () {
item.style.left = left++ + "px"
}, 5)
})
})
</script>
</body>
</html>只要这样就可以防抖（直接是父级环境）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
button {
position: absolute
}
</style>
<body>
<button message="后盾人">houdunren</button>
<script>
let btns = document.querySelectorAll("button")
btns.forEach(function (item) {
let left = 1
item.addEventListener("click", function () {
setInterval(function () {
item.style.left = left++ + "px"
}, 5)
})
})
</script>
</body>
</html>但是虽然不抖了，引来了加速的效果。。。
加一个判断条件，就只会执行一次了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
button {
position: absolute
}
</style>
<body>
<button message="后盾人">houdunren</button>
<script>
let btns = document.querySelectorAll("button")
btns.forEach(function (item) {
let left = 1
let interval = false
item.addEventListener("click", function () {
if(!interval)
{
interval = true
setInterval(function () {
item.style.left = left++ + "px"
}, 5)
}
})
})
</script>
</body>
</html>闭包排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let lessons = [
{
title:"媒体查询响应式布局",
click:89,
price:12
},
{
title:"FLEX弹性盒模型",
click:45,
price:120
},
{
title:"GRID栅格系统",
click:19,
price:67
},
{
title:"盒子模型详解",
click:29,
price:52
}
]
function order(field){
return function(a,b){
return a[field] > b[field] ? 1 : -1
}
}
let hd = lessons.sort(order("price"))
console.table(hd)
</script>
</body>
</html>垃圾回收机制
当闭包不再使用时，手动解除对闭包函数和相关变量的引用，让垃圾回收机制能够回收这些内存。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div desc="houdunren">在线学习</div>
<div desc="hdcms">开源产品</div>
<script>
let divs = document.querySelectorAll('div')
divs.forEach(function(item){
item.addEventListener("click",function(){
console.log(item)
})
item = null
})
</script>
</body>
</html>this遗留问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let hd = {
user:"后盾人",
get: function(){
let This = this
return function(){
return This.user
}
}
}
let a = hd.get()
console.log(a())
</script>
</body>
</html>也可以使用箭头函数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let hd = {
user:"后盾人",
get: function(){
let This = this
return ()=>{
return this.user
}
}
}
let a = hd.get()
console.log(a())
</script>
</body>
</html>