运用闭包实现js单例模式
运用闭包函数实现单例模式
闭包函数
概念:简单说就是函数中嵌套函数,嵌套在这里面的函数叫做闭包函数,外面的函数叫做闭包环境
作用:通过闭包函数,可以访问到闭包函数所在局部作用域中的变量及参数
特点:闭包的特点或本质:将局部变量常驻内存,这既是它的优点也是它的缺点,使用不当还会造成内存泄漏
闭包的原理:闭包是利用JS中的垃圾回收机制,当一个函数被调用时,会开辟空间,函数调用结束,会释放空间,但如果被释放空间时,发现其中有变量正在被其他函数使用时,则这个变量会常驻内存而不被回收
创建一个闭包函数
function closure(){
let result = 0;
return () => ++result;
}
调用闭包函数
注册闭包函数
let fun = closure()
调用注册好的闭包函数
console.log(fun())
补充
销毁闭包函数
由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
closure = undefined
单例模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js单例模式</title>
</head>
<body>
<button id="loginBtn">登录</button>
<script>
/*
* js的单例模式 实现登录
*/
const createdLogin = (...val) => {
console.log(val);
let div = document.createElement("div");
div.innerHTML = "我是登录的弹窗";
div.style.display = "none";
document.body.appendChild(div);
return div;
}
// 单例模式方法
const createdSingle = (fn) => {
let result;
return (...val) => {
return result || (result = fn(...val))
}
}
let create = createdSingle(createdLogin);
document.getElementById("loginBtn").onclick = () => {
let login = create("Clig", 21, "深圳")
login.style.display = "block"
}
</script>
</body>
</html>