您的位置：首页 > 其它

闭包的应用实例

2018-01-18 09:37 369 查看

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>

总结：

函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这是就产生了闭包。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航