О замыканиях в js детально

Вот класический пример замыкания

Еще что стоит внимания в этом случае, это то, что происходит с обьектом funWithClosure в момент выполнения. А происходит следующее - на верхушку стека-цепочки [[scope]] попадает новый контекст исполнения, только он сразу по звершению этого вызова доступен gc на очистку:

Удачные примеры замыканий:
1. Допустим мы имеем по сайту кучу мест, где к какому-то елементу привязываются определенный набор обработчкив. Мы можем написать следующий код, который позволит, применяя одну функцию на ДОМ елемент, забыть о рутине: 

function associateObjWithEvent(obj, methodName){    
    return (function(e){        
        e = e||window.event;        
        return obj[methodName](e, this);
    });
}

function DhtmlObject(elementId){    
    var el = getElementWithId(elementId);
   
    if(el){        
        el.onclick = associateObjWithEvent(this, "doOnClick");
        el.onmouseover = associateObjWithEvent(this, "doMouseOver");
        el.onmouseout = associateObjWithEvent(this, "doMouseOut");
        ...
    }
}
DhtmlObject.prototype.doOnClick = function(event, element){
    ... // doOnClick method body.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
    ... // doMouseOver method body.
}
DhtmlObject.prototype.doMouseOut = function(event, element){
    ... // doMouseOut method body.
}

2. А следующий пример позволяет упростить создание шаблонного элемента(набора елементов):

var getImgInPositionedDivHtml = (function(){    
    var buffAr = [
        '<div id="',
        '',   //index 1, DIV ID attribute
        '" style="position:absolute;top:',
        '',   //index 3, DIV top position
        'px;left:',
        '',   //index 5, DIV left position
        'px;width:',
        '',   //index 7, DIV width
        'px;height:',
        '',   //index 9, DIV height
        'px;overflow:hidden;\"><img src=\"',
        '',   //index 11, IMG URL
        '\" width=\"',
        '',   //index 13, IMG width
        '\" height=\"',
        '',   //index 15, IMG height
        '\" alt=\"',
        '',   //index 17, IMG alt text
        '\"><\/div>'
    ];
    return (function(url, id, width, height, top, left, altText){
        buffAr[1] = id;
        buffAr[3] = top;
        buffAr[5] = left;
        buffAr[13] = (buffAr[7] = width);
        buffAr[15] = (buffAr[9] = height);
        buffAr[11] = url;
        buffAr[17] = altText; 

        return buffAr.join('');
    }); 
})();

console.log(getImgInPositionedDivHtml('file://media/1.png','myid', 200, 300, 0, 0, 'My alternative text'));

А вот, что мы получим из нашего последнего лога:

<div id="myid" style="position:absolute;top:0px;left:0px;width:200px;height:300px;overflow:hidden;"><img src="file://media/1.png" width="200" height="300" alt="My alternative text"></div>