061_JavaScript闭包_var mycounter = (function)-优快云博客

本文围绕JavaScript闭包展开，介绍闭包是函数可使用函数外定义的变量。通过简单实例说明脚本载入内存后函数捕获变量值供后续使用，还阐述了复杂闭包，如函数嵌套时内部函数获取外部函数参数和全局变量值，以及更复杂闭包中自调用函数返回对象，内部函数可访问父作用域变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 闭包(closure), 指的是函数可以使用函数之外定义的变量。

2. 简单的闭包实例

2.1. 在JavaScript中使用全局变量是一个简单的闭包实例。请思考下面这段代码:

var message = "hello world";

function sayHelloWorld() {
	alert(message);
}

sayHelloWorld();

2.2. 在上面这段代码中, 脚本被载入内存后, 并没有为函数sayHelloWorld()计算变量message的值。该函数捕获message的值只是为了以后的使用, 也就是说, 解释程序知道在调用该函数时要检查message的值。message 将在函数调用sayHelloWorld()时执行到alert(message);这一行被赋值, 显示消息"hello world"。

3. 复杂的闭包

3.1. 在一个函数中定义另一个函数会使闭包变得更加复杂。例如:

var baseNum = 10;

function addNum(num1, num2) {
  	function doAdd() {
    	return num1 + num2 + baseNum;
  	}
  return doAdd();
}

3.2. 这里, 函数addNum()包括函数doAdd()(闭包)。内部函数是一个闭包, 因为它将获取外部函数的参数num1和num2以及全局变量baseNum的值。addNum()的最后一步调用了 doAdd(), 把两个参数和全局变量相加, 并返回它们的和。

3.3. 这里要掌握的重要概念是, doAdd()函数根本不接受参数, 它使用的值是从执行环境中获取的。

4. 更为复杂的闭包

4.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>闭包</title>
	</head>
	<body>
		<script type="text/javascript">
			var myCounter = (function () {
				var counter = 0;

				return {increase: function() {return counter += 1;}, decrease: function() {return counter -= 1;}, clear: function() { return counter = 0;}};
			})();

			document.write('counter = ' + myCounter.increase() + '<br />');
			document.write('counter = ' + myCounter.increase() + '<br />');
			document.write('counter = ' + myCounter.increase() + '<br />');
			document.write('counter = ' + myCounter.decrease() + '<br />');
			document.write('counter = ' + myCounter.clear() + '<br />');
			document.write('counter = ' + myCounter.increase() + '<br />');
		</script>
	</body>
</html>

4.2. 效果图