javascript - 关闭内存泄漏并修复

Question

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

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

下面修改后的代码会不会因为 onclick 函数中没有引用 el 而导致内存泄漏？

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 引用执行点击事件的元素本身，因此使用 this 很简单以便在单击时在元素上设置样式(即 backgroundColor)。