1、概述
闭包实质:将内部函数传递到所在的词法作用域以外,内部函数仍然持有对原始定义作用域的引用。
2、应用
(1)定时器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>闭包的应用</title>
</head>
<body>
<script type="text/javascript">
function wait(message) {
setTimeout(function timer() {
//延时函数回调函数timer
//timer内部函数具有涵盖wait函数作用域的闭包,还有对变量message的引用
console.log(message);
}, 1000)
}
wait('闭包函数应用')
</script>
</body>
</html>
(2)事件监听器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>闭包的应用</title>
</head>
<body>
<script type="text/javascript">
function test() {
var a = 0;
//事件监听器 保持对test作用域的访问
$('ele').on('click', function() {
a++;
});
}
</script>
</body>
</html>
(3)ajax
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>闭包的应用</title>
</head>
<body>
<script type="text/javascript">
! function() {
var localData = "localData here";
var url = "http://www.baidu.com/";
//ajax使用了localData,url
$.ajax({
url: url,
success: function() {
// do sth...
console.log(localData);
}
});
}();
</script>
</body>
</html>
(4)异步(同步)操作
只要使用了回调函数,实际上就是使用了闭包。
(5)模块
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>闭包的应用</title>
</head>
<body>
<script type="text/javascript">
var foo = (
function Module() {
var something = 'cool';
var another = [1, 2];
function doSomething() {
console.log(something)
}
function doAnother() {
console.log(another.join(','))
}
return {
doSomething: doSomething,
doAnother: doAnother
}
}
)();
foo.doSomething();
foo.doAnother();
</script>
</body>
</html>
总结:
函数可以记住并访问所在的词法作用域,即使函数是在当前词法作用域之外执行,这是就产生了闭包。