Где у меня идёт утечка памяти?
 

Здравствуйте. Вот такой пример:

function Example(){
    this.name;
    this.container_name_selector = "";
}

Example.prototype.init = function(name, container_name_selector, selector_button){
    var self = this;

    self.name = name;
    self.container_name_selector = container_name_selector;

    $("."+selector_button).on("click", {self: self}, self.eventClickButton);
}

Example.prototype.eventClickButton = function(e){
    var self = e.data.self;

    $("."+self.container_name_selector).text(self.name);
    return false;
}

Примечание: зачем я передаю self в событие click: если я не пепередам экземпляр класса, то я не знаю как потом в функции eventClickButton() обратится к свойствам класса Example.

При каждом событии click растёт память в браузере. Где я ошибаюсь?

Не знаю где память течет, но разве так не будет работать?

function Example() {
    this.name;
    this.container_name_selector = "";
}

Example.prototype.init = function(name, container_name_selector, selector_button) {
    this.name = name;
    this.container_name_selector = container_name_selector;

    $("." + selector_button).on("click", this.eventClickButton.bind(this));
}

Example.prototype.eventClickButton = function(e) {
    e.preventDefault();

    $("." + this.container_name_selector).text(this.name);
}

Я не знал про этот метод. Сперва я прочитал bind() в контексте jquery и долго не мог понять смысл вашего кода. Но потом прочитал bind() в контексте метода и теперь понятно что вы делаете.

Спасибо, попробую ваш метод. Посмотрю, повлияет ли это на пямять.

А как вы смотрите утечку памяти? В браузерах сборщик мусора срабатывает редко (в хроме можно вызвать вручную на вкладке Memory в Developer tools). Память растёт прям до бесконечности или останавливается на каком-то уровне?

Faab,
В jquery .bind() это старый .on(), а js .bind() это jQuery.proxy().

Крутил коды по варианту ТС и Nexus, и вот такой ужатый (в т.ч. без self с bind(this))
Память растет на первых двух кликах. Сбор мусора в хроме ничего не дает.
Почему двух??

(в примере здесь замеры немножко нерегулярно прыгают)

<div class='div_class'></div>
<button class = 'but_class'>Click</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

function Example(){
    this.name;
    this.container_name_selector = "";
    self = this;
    this.eventClickButton = function(e, attribute){
       $("."+self.container_name_selector).text(self.name);
    };
    this.init = function(name, container_name_selector, selector_button){
        this.name = name;
        this.container_name_selector = container_name_selector;
        $("."+selector_button).on("click",  this.eventClickButton);
    };
};

var Test = new Example();
Test.init('Test','div_class','but_class');
</script>

Если хотите хорошую производительность - забудьте про jQuery.