关闭内存泄漏并修复答案

【问题标题】：Closure memory leak and fix关闭内存泄漏并修复
【发布时间】：2015-05-28 03:26:55
【问题描述】：

经过Mozilla's A re-introduction to JavaScript，以下代码导致内存泄漏：

function addHandler() {
  var el = document.getElementById('el');
  el.onclick = function() {
    el.style.backgroundColor = 'red';
  };
}

由于el 没有在onclick 函数内部被引用，以下修改后的代码会不会导致内存泄漏？

function addHandler() {
  var el = document.getElementById('el');
  el.onclick = function() {
    this.style.backgroundColor = 'red';
  };
}

【问题讨论】：

【解决方案1】：

是的，内存泄漏会被阻止，你可以更简洁地抛弃局部变量el，直接分配元素的onclick属性：

function addHandler(){
  document.getElementById('el').onclick = function(){
    this.style.backgroundColor = 'red';
  };
}

因此，在onclick 回调中，this 引用执行点击事件的元素本身，因此使用this 来设置元素的样式（即backgroundColor）很简单点击时。

【讨论】：