关闭内存泄漏并修复

Question

通过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';
  };
}

Answer 1

是否会阻止内存泄漏，您可以通过抛弃局部变量el并直接指定元素的onclick属性来更简洁：

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

因此，在onclick回调中，this引用了执行click事件的元素本身，因此使用this来设置样式是很简单的（即{ {1}}）单击该元素时。