一篇文章带你搞懂JS对象的自我销毁

在日常的JS组件开发中，往往会有一些较为复杂的DOM操作及事件监听，尤其是在处理UI层面的widgets时候更为明显。常常会花很多精力在对象的init上，而当组件需要被移除时则仅仅是把所在DOM草草的remove掉就算完事儿。

当然，绝大多数情况这样处理并没有什么不妥，因为事件监听时仅仅局限于所属的DOM自身，移除DOM后，只要对象的外部引用不再维系，相关的内存占用很快就会被当作垃圾回收掉（本文不讨论低版本 IE 内存回收的 BUG）。

其实个人在构建组件（对象）的时候是比较习惯于添加自定义方法destroy，用来手动销毁对象内部的一些引用。也就是今天要说的仅靠移除DOM并不能达到销毁对象的几种情况。

当你的组件出现下面几种情况时需要特别注意。

一： DOM事件监听越界 常规情况下，一个组件需要监听的仅仅是自身的DOM内的事件。偶尔也会有另一种情况，对象不得不操作自身之外的DOM。

拿常见的瀑布流组件为例，除了自身事件，还要监听页面的滚动、浏览器尺寸重置等事件。因此当瀑布流组件需要被移除时，简单的移除自身DOM并不能完整销毁组件对页面的影响。

下面是常规做法的例子：

//定义瀑布流组件
function WaterFall(node){
  this.node = node;
  window.addEventListener('scroll',function