How does 'this" work in closure?

Question

I got to this document which says there is a closure happening here:

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

While this code removes the closure:

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

I can't see how the second one solves the closure issue. Why would not the code at el.onclick = clickHandler create a closure? clickHandler's this has to be fulfilled with el.

Answer 1

Your example is not correct. The document you have linked to states that this code block creates a closure which may leak memory (note the variable in the outer function):

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

Both examples you posted do not create a closure (or only an empty one), but they use different means to avoid it.

Also note that this problem seems to affect IE's JS engine only. Other engines, auch as V8 / Chrome, seem to only capture the variables used in inner functions in closures, so that I'd expect that no circular reference would be created in this code example, and even if it would they should be able to handle the garbage collection with the circular reference.