虽然在编写大型纯 JavaScript 项目时需要避免一些特定于浏览器的问题，但在使用 jQuery 等库时，应该假设该库的设计可以帮助您避免这些问题。然而，考虑到内存泄漏相当难以追踪，并且特定浏览器的每个不同版本的行为可能有所不同 - 知道如何一般性地避免内存泄漏比具体地了解要好得多：
- 如果您的代码被迭代多次，请确保您正在使用的变量可以被丢弃垃圾收集，并且不受闭包引用的束缚。
- 如果您的代码正在处理大型数据结构，请确保您有一种删除或取消数据的方法。
- 如果您的代码构造了许多对象、函数和事件侦听器 - 最好也包含一些解构性代码。
- 尽量避免将 javascript 对象或函数作为属性直接附加到元素 - 即
element.onclick = function(){}.
- 如果有疑问，请务必在代码完成后进行整理。
您似乎认为调用函数的方式会对泄漏产生影响，但是这些函数的内容总是更有可能导致问题。
对于上面的代码，我唯一的建议是：
每当使用事件侦听器时，都会尝试找到一种重用函数的方法，而不是为每个元素创建一个函数。这可以通过使用来实现事件委托 （将事件捕获到祖先/父级并将反应委托给event.target)，或者编写一个单一的通用函数来以相对方式处理元素，通常是相对于this or $(this).
当需要创建许多事件处理程序时，通常最好将这些事件侦听器存储为命名函数，以便您可以在完成后再次删除它们。这意味着避免像您一样使用匿名函数。但是，如果您知道只有您的代码处理 DOM，则可以回退到使用$(elements).unbind('click')删除所有点击处理程序（匿名与否）使用 jQuery 将其应用于所选元素。然而，如果您确实使用后一种方法，那么使用 jQuery 的事件命名空间功能肯定会更好 - 这样您就知道您只是删除了事件。 IE。$(elements).unbind('click.my_app');。这显然意味着您必须使用绑定事件$(elements).bind('click.my_app', function(){...});
更具体地说：
自动调用匿名函数
(function(){
/*
running an anonymous function this way will never cause a memory
leak because memory leaks (at least the ones we have control over)
require a variable reference getting caught in memory with the
JavaScript runtime still believing that the variable is in use,
when it isn't - meaning that it never gets garbage collected.
This construction has nothing to reference it, and so will be
forgotten the second it has been evaluated.
*/
})();
使用 jQuery 添加匿名事件监听器：
var really_large_variable = {/*Imagine lots of data here*/};
$(element).click(function(){
/*
Whilst I will admit not having investigated to see how jQuery
handles its event listeners onunload, I doubt if it is auto-
matically unbinding them. This is because for most code they
wont cause a problem, especially if only a few are in use. For
larger projects though it is a good idea to create some beforeunload
or unload handlers that delete data and unbind any event handling.
The reason for this is not to protect against the reference of the
function itself, but to make sure the references the function keeps
alive are removed. This is all down to how JS scope works, if you
have never read up on JavaScript scope... I suggest you do so.
As an example however, this anonymous function has access to the
`really_large_variable` above - and will prevent any garbage collection
system from deleting the data contained in `really_large_variable`
even if this function or any other code never makes use of it.
When the page unloads you would hope that the browser would be able
to know to clear the memory involved, but you can't be 100% certain
it will *(especially the likes of IE6/7)* - so it is always best
to either make sure you set the contents of `really_large_variable` to null
or make sure you remove your references to your closures/event listeners.
*/
});
拆解与解构
关于我的解释，我重点关注何时不再需要该页面并且用户正在离开。然而，在当今的 ajax 内容和高度动态界面的世界中，上述内容变得更加重要； GUI 不断地创建和废弃元素。
如果您正在创建一个动态 JavaScript 应用程序，我无法强调构造函数的重要性.tearDown or .deconstruct当不再需要代码时执行的方法。这些应该逐步执行大型自定义对象构造并取消其内容，以及删除已动态创建且不再使用的事件侦听器和元素。你还应该使用 jQueryempty替换元素内容之前的方法 - 这可以用他们的话更好地解释：
http://api.jquery.com/empty/
为了避免内存泄漏，jQuery 在删除元素本身之前从子元素中删除其他构造，例如数据和事件处理程序。
如果您想删除元素而不破坏其数据或事件处理程序（以便稍后可以重新添加它们），请改用 .detach() 。
使用tearDown 方法进行编码不仅迫使您更加整洁（即确保将相关代码、事件和元素命名空间放在一起），这通常意味着您以更加模块化的方式构建代码；这对于您的应用程序的未来发展、可读性以及以后可能接管您的项目的任何其他人来说显然要好得多。
