當然，絕大多數情況這樣處理並沒有什麽不妥，因為事件監聽時僅僅局限於所屬的DOM自身，移除DOM後，只要對象的外部引用不再維系，相關的內存占用很快就會被當作垃圾回收掉（本文不討論低版本 IE 內存回收的 BUG）。

其實個人在構建組件（對象）的時候是比較習慣於添加自定義方法destroy，用來手動銷毀對象內部的一些引用。也就是今天要說的僅靠移除DOM並不能達到銷毀對象的幾種情況。

當你的組件出現下面幾種情況時需要特別註意。

一： DOM事件監聽越界
常規情況下，一個組件需要監聽的僅僅是自身的DOM內的事件。偶爾也會有另一種情況，對象不得不操作自身之外的DOM。

拿常見的瀑布流組件為例，除了自身事件，還要監聽頁面的滾動、瀏覽器尺寸重置等事件。因此當瀑布流組件需要被移除時，簡單的移除自身DOM並不能完整銷毀組件對頁面的影響。

下面是常規做法的例子：

//定義瀑布流組件
function WaterFall(node){
  this.node = node;
  window.addEventListener(‘scroll‘,function(){
    //do sth
    console.log(‘scrolling‘);
  });
}
//實例化一個瀑布流組件
var node_content = document.getElementById(‘xxx‘);
new WaterFall(node_content);
//移除瀑布流組件所屬的DOM
node_content.parentNode.removeChild(node_content);
 

上面的例子很明顯，移除DOM後遺留的事件監聽還在，回調內對組件的引用會導致整個組件常駐內存無法被回收，直至頁面卸載。

不過你可能會說，在移除DOM時順手解除下事件綁定就 OK 啦。事實確實如此，但是如果操作的具體細節讓調用者實現就有點兒麻keng煩die了。因此我們需要提供一個destroy接口讓調用者去解除對窗口滾動等事件的監聽。

//定義瀑布流組件
function WaterFall(node){
  this.node = node;
  this._scrollListenner = function(){
    //do sth
    console.log(‘scrolling‘);
  };
  window.addEventListener(‘scroll‘,this._scrollListenner);
}                                                   //歡迎加入前端全棧開發交流圈一起學習交流：1007317281
WaterFall.prototype.destroy = function(){
    window.removeEventListener(‘scroll‘,this._scrollListenner);
    this.node.parentNode.removeChild(this.node);
};

//實例化一個瀑布流組件
var myWaterFall = new WaterFall(document.getElementById(‘xxx‘));
//註銷瀑布流組件
myWaterFall.destroy();
 

給大家推薦一個技術交流學習圈，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。**獲取資料

一篇文章帶你搞懂JS對象的自我銷毀