乐趣区

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

jiezi

在日常的 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(){
    //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 以及面试资源等。获取资料????????????
对 web 开发技术感兴趣的同学，可以加入???????????? 交流圈????????????，不管你是小白还是大牛都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。

二：JS 生命周期过长
一部分场景下，某段 JS 会在整个生命周期中反复被调用。比如轮播图自动播放，倒计时时钟的重绘。无论是使用 setInterval 不断调取，或者是 setTimeout 递归延时。这两者在对象自身 DOM 被移除时同样不会随之被清除。因此也需要对象在被销毁时手动解除定时器。

// 定义倒计时组件
function Countdown(node){
  this.node = node;
  this._timerId = setInterval(function(){
    //do sth
    console.log('recount');
  },500);
}                                              // 欢迎加入前端全栈开发交流圈一起学习交流：1007317281
Countdown.prototype.destroy = function(){clearInterval(this._timerId);
    this.node.parentNode.removeChild(this.node);
};

// 实例化一个倒计时组件
var myCountdown = new Countdown(document.getElementById('yyy'));
// 注销倒计时组件
myCountdown.destroy();

三：DOM 之外的异步事件
比较常见的情形就是 ajax。当一个请求结束之前对象被销毁，ajax 返回后的操作无需继续进行。也有一定风险因为 dom 已被移除导致操作报错。

以渲染数据为例，ajax 部分使用 jquery：

// 定义列表组件
function UserList(node){
  this.node = node;
  this._ajax = $.ajax(/** **/);
}                                               // 欢迎加入前端全栈开发交流圈一起学习交流：1007317281
UserList.prototype.destroy = function(){
    // 取消请求发送
    this._ajax.abort();
    this.node.parentNode.removeChild(this.node);
};

// 实例化一个列表组件
var myUserList = new Countdown(document.getElementById('yyy'));
// 注销列表组件
myUserList.destroy();

上面例子中，destroy 方法内部移除 DOM 只是为了说明方便，实际开发中一般不会这么做，只要做到移除元素完不成的那部分任务即可。

以上就是总结的对象销毁时需要额外注意的三种情况，当然还有其他更多情况，但大体与之类似。

让代码有自我意识，从学会自我销毁开始。

退出移动版