JavaScript 闭包动画

简介: http://www.jinweijie.com/javascript/javascript-closure-sample-john-resig/comment-page-1/#comment-13192下面的 HTML 动画就说明了利用 setTimeout 函数来创建多个闭包: ...

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

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

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

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

Thanks to HegowHuang!

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

edit: 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. 

將輸入視為消息還是閉包

Closures And Objects Are Equivalent

http://c2.com/cgi/wiki?ClosuresAndObjectsAreEquivalent



目录
相关文章
|
5月前
|
存储 JavaScript 前端开发
|
7月前
|
前端开发 JavaScript Java
JavaScript闭包深入剖析:性能剖析与优化技巧
JavaScript 闭包是强大而灵活的特性,广泛应用于数据封装、函数柯里化和事件处理等场景。闭包通过保存外部作用域的变量,实现了私有变量和方法的创建,提升了代码的安全性和可维护性。然而,闭包也可能带来性能问题,如内存泄漏和执行效率下降。为优化闭包性能,建议采取以下策略:及时解除对不再使用的闭包变量的引用,减少闭包的创建次数,使用 WeakMap 管理弱引用,以及优化闭包结构以减少作用域链查找的开销。在实际开发中,无论是 Web 前端还是 Node.js 后端,这些优化措施都能显著提升程序的性能和稳定性。
195 70
|
11月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
7月前
|
自然语言处理 JavaScript 前端开发
当面试官再问我JS闭包时,我能答出来的都在这里了。
闭包(Closure)是前端面试中的高频考点,广泛应用于函数式编程中。它不仅指函数内部定义的函数,还涉及内存管理、作用域链和垃圾回收机制。闭包可以让函数访问其外部作用域的变量,但也可能引发内存泄漏等问题。通过合理使用闭包,可以实现模块化、高阶函数和回调函数等应用场景。然而,滥用闭包可能导致代码复杂度增加、调试困难以及潜在的性能问题。为了避免这些问题,开发时应谨慎处理闭包,避免不必要的嵌套,并及时清理不再使用的变量和监听器。
291 16
当面试官再问我JS闭包时,我能答出来的都在这里了。
|
6月前
|
缓存 自然语言处理 JavaScript
JavaScript中闭包详解+举例,闭包的各种实践场景:高级技巧与实用指南
闭包是JavaScript中不可或缺的部分,它不仅可以增强代码的可维护性,还能在模块化、回调处理等场景中发挥巨大作用。然而,闭包的强大也意味着需要谨慎使用,避免潜在的性能问题和内存泄漏。通过对闭包原理的深入理解以及在实际项目中的灵活应用,你将能够更加高效地编写出简洁且功能强大的代码。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
|
10月前
|
JavaScript 前端开发
如何使用时间切片来优化JavaScript动画的性能?
如何使用时间切片来优化JavaScript动画的性能?
|
10月前
|
JavaScript 前端开发
js 闭包的优点和缺点
【10月更文挑战第27天】JavaScript闭包是一把双刃剑,在合理使用的情况下,它可以带来很多好处,如实现数据封装、记忆功能和模块化等;但如果不注意其缺点,如内存泄漏、变量共享和性能开销等问题,可能会导致代码出现难以调试的错误和性能问题。因此,在使用闭包时,需要谨慎权衡其优缺点,根据具体的应用场景合理地运用闭包。
273 58
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
279 0
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
|
10月前
|
JavaScript 前端开发
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?