JavaScript 闭包动画

最新推荐文章于 2025-02-23 19:02:57 发布

原创最新推荐文章于 2025-02-23 19:02:57 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #div #function #编译器 #html

JavaScript & 编码专栏收录该内容

18 篇文章

订阅专栏

本文通过HTML动画示例详细解析JavaScript中的闭包概念及其使用方式，展示了如何利用setTimeout函数创建闭包来实现渐变效果，并探讨了闭包与全局变量的关系。

http://www.jinweijie.com/javascript/javascript-closure-sample-john-resig/comment-page-1/#comment-13192

下面的 HTML 动画就说明了利用 setTimeout 函数来创建多个闭包：

<html> <head> <title>简单的闭包演示</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <mce:style></mce:style><style mce_bogus="1"> body{ font-size: 78%; background: black; color: white; } div{ font-size: 1px; height: 16px; } </style> </head> <body> <h1>简单的闭包演示</h1> <mce:script type="text/javascript"></mce:script> </body>

请留意注释中的问题。运行例子就会有效果如图：

简单来讲，闭包允许你将一些行为（包括语法和表达式）封装，将它像一个对象一样传来递去，而且它依然能够访问到原来第一次声明时的上下文。这样可以使控制结构、逻辑操作等从调用细节中分离出来。访问原来上下文的能力是闭包区别一般对象的重要特征，尽管在实现上只是多了一些编译器技巧。

Thanks to HegowHuang!

edit：2011-05-29 14:27:25 添加例子。

edit: 2012-11-30 22:01 JavaScript Closures for Dummies
作者给闭包（closure）总结了两个特点，算是比较精辟的了：

Two one sentence summaries:

a closure is the local variables for a function - kept alive after the function has returned, or
a closure is a stack-frame which is not deallocated when the function returns. (as if a 'stack-frame' were malloc'ed instead of being on the stack!)

看完后，发现其中有个例子很有代表性，贴在这：

<script type="text/javascript">
function setupSomeGlobals() {
 // Local variable that ends up within closure
 var num = 666;
 // Store some references to functions as global variables
 gAlertNumber = function() { alert(num); }
 gIncreaseNumber = function() { num++; }
 gSetNumber = function(x) { num = x; }
}


</script>
<button onclick="setupSomeGlobals()"> setupSomeGlobals()</button>
<button onclick="gAlertNumber()"> gAlertNumber()</button>
<button onclick="gIncreaseNumber()"> gIncreaseNumber()</button>
<button onclick="gSetNumber(5)"> gSetNumber(5)</button>

想想javascript中闭包（closure）这个特性与javascript自己的特性是息息相关的，因为在javascript中，function本身就是一个对象（object），所以注定了其中闭包（closure）的特性

最后，作者给了final points，应该是理解闭包的要点：
1. Whenever you use function inside another function, a closure is used.
2. Whenever you use eval() inside a function, a closure is used. The text you eval can reference local variables of the function, and within eval you can even create new local variables by using eval('var foo = …
3. When you use Function() inside a function, it does not create a closure. (The new function cannot reference the local variables of the function calling Function()).
4. A closure in JavaScript is like keeping a copy of the all the local variables, just as they were when a function exited.
5. It is probably best to think that a closure is always created just on entry to a function, and the local variables are added to that closure.
6. A new set of local variables is kept every time a function with a closure is called (Given that the function contains a function declaration inside it, and a reference to that inside function is either returned or an external reference is kept for it in some way).
7. Two functions might look like they have the same source text, but have completely different behaviour because of their 'hidden' closure. I don't think JavaScript code can actually find out if a function reference has a closure or not.
8. If you are trying to do any dynamic source code modifications ( for example: myFunction = Function(myFunction.toString().replace(/Hello/,'Hola')); ), it won't work if myFunction is a closure (Of course, you would never even think of doing source code string substitution at runtime, but...).
9. It is possible to get function declarations within function declarations within functions - and you can get closures at more than one level.
10. I think normally a closure is the term for both the function along with the variables that are captured. Note that I do not use that definition in this article!

11. I suspect that closures in JavaScript differ from those normally found in functional languages.

將輸入視為消息還是閉包