javascript闭包函数的优缺点
程序员文章站
2022-04-03 22:51:10
...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>闭包closure</title>
</head>
<body>
<div id="app">222222</div>
<script>
//console.log(a)
(function(win){
/*
闭包的定义
闭包指的是：能够访问另一个函数作用域的变量的函数。
闭包就是一个函数，这个函数能够访问其他函数的作用域的变量
*/
function outer(){
var a = 'hello';
return function(){
a += ' world'
return a;
}
}
var b = outer();
//console.log(b);
/*
坑点1： 引用的变量可能发生变化
*/
function outer1(){
var result = [];
for(var i = 0; i < 10;++i){
result[i] = function(){
return i;
}
}
//console.log(result)
return result;
}
var a = outer1()[0]()
//console.log(a)
/*
1.解决方案
*/
function reOuter1(){
var result = [];
for(var i = 0; i < 10;++i){
result[i] = (function(num){
return function(){
console.log(num)
}
})(i)
}
//console.log(result)
return result;
}
var c = reOuter1()[0]()
console.log(reOuter1())
var b = 100;
window.b = b;//局部变量编程全局变量
console.log(win)
/*坑点2: this指向问题*/
var object = {
name:'张三',
getName:function(){
return function(){
console.log(this.name)
}
}
}
object.getName()()//undefined
/*解决方案*/
var reObject = {
name:'张三',
getName:function(){
var page = this;//第一种
//第二种 箭头函数 ()=>
return function(){
console.log(page.name)
}
}
}
reObject.getName()()//张三
/*坑点3：内存泄露问题*/
function showId(){
var oApp = document.querySelector('#app');
oApp.onclick = function(){
alert(oApp.id) // 这样会导致闭包引用外层的el，当执行完showId后，el无法释放
}
console.log(oApp)
}
/*es6没出来之前，用var定义变量存在变量提升问题，eg:*/
(function(){
for(var i = 0; i<10;++i){
console.log(i)
}
})()
showId()
console.log(i)
})(window)
console.log(b)
</script>
</body>
</html>