Почему ссылка замыкается на последний элемент экземпляра?

Question

[civaru]

Не могу понять какой-то фундаментальной вещи JavaScript, то-ли замыкание, то-ли наследование. Есть код небольшого "класса". Рабочий пример https://jsfiddle.net/1ds0s3k9/.

Далее сам код:

function extend( a, b ) {
    for( var key in b ) {
        if( b.hasOwnProperty( key ) ) {
            a[key] = b[key];
        }
    }
    return a;
}

function Notification( options ) {
    this.options = extend( {}, this.options );
    extend( this.options, options );
    this._init();
}

Notification.prototype.options = {
    wrapper : document.body,
    message : 'yo!',
    type : 'error',
    elements : {}
};

Notification.prototype._init = function() {
    var $this = this;
    this.html = document.createElement( 'div' );
    this.html.innerHTML = '<div class="ns-box-inner">' + this.options.message + '\
                           <div><a class="ns-box-link" href="javascript://">some link</a></div>\
                           </div>';

    this.options.elements.link = this.html.querySelector('.ns-box-link');

    this.options.elements.link.addEventListener('click', function() {
        console.log($this.options.elements.link);
        console.log($this);
    });

    this.options.wrapper.append(this.html);
}

Создаем пару экземпляров

var ntfc1 = new Notification({
    message: '<p>This is just a simple notice. Everything is in order and this is a <a href="#">simple link</a>.</p>',
    type: 'notice'
});

var ntfc2 = new Notification({
    message: 'Hello world',
    type: 'error'
});

Проблема возникает в следующем месте кода:

this.options.elements.link = this.html.querySelector('.ns-box-link');

this.options.elements.link.addEventListener('click', function() {
        console.log($this.options.elements.link);
        console.log($this);
});

Почему при клике вывод console.log($this); выводит правильную ссылку на каждый экземпляр, а вывод console.log($this.options.elements.link); ссылается на элемент который находится в последнем экземпляре класса?

Видео для наглядности https://youtu.be/kMUYs80tn7Y.

Answer 1

[Антон Спирин]

Потому что у вас свойство elements в прототипе. Все экземпляры используют один и тот же объект elements. В итоге сколько экземпляров вы не создадите, во всех будет один и тот же объект this.opions.elements со свойством link переопределенным в конструкторе последнего экземпляра.
Поосторожней с прототипами. В прототипы помимо функций выносят только статику, но никак не динамические значения, разве, что счетчики, но это очень узко применимый и редкий кейс.

Comments

[civaru]

Похоже я совсем тупенький

Но если

В итоге сколько экземпляров вы не создадите, во всех будет один и тот же объект this.opions со свойством link переопределенным в конструкторе последнего экземпляра.

то как же тогда работает передача данных options во время создания экземпляров? Переданные данные получаются у каждого экземпляра свои: message, type. Не могу понять почему по такому же принципу не ведет себя объект elements : {}

[Антон Спирин]

civaru, извиняюсь. Я все перепутал) Вы же предаете в extend первым аргументом пустой объект.
А вот объект elements у вас берется из прототипа и во всех экземплярах один и тот же.

[civaru]

И если вам несложно пояснить

Поосторожней с прототипами. В прототипы помимо функций выносят только статику, но никак не динамические значения, разве, что счетчики, но это очень узко применимый и редкий кейс.

То какой "кейс" можно применить в данном случае чтобы навесить обработчики на ссылку если не в прототипе...

[Антон Спирин]

civaru, можно написать так:

this.elements = {};
this.elements.link = this.html.querySelector('.ns-box-link');
this.elements.link.addEventListener('click', function() {
  console.log($this.elements.link);
  console.log($this);
});

[civaru]

Антон Спирин, До именно так и я подумал, что надо сделать, спасибо. Но в целом явно какие-то проблемы с пониманием происходящего. Почему если я передаю данные в создании экземпляра то они у всех разные, а если не передаю, то берутся из последнего. Ведь message и type тоже в прототипе.

[civaru]

Антон Спирин, То есть если при создании экземпляра я передам этот elements то все тогда работает как ожидается, в чем магия extend?

var ntfc1 = new Notification({
	message: 'This is just a simple notice',
	type: 'notice',
  elements: {}
});

[Антон Спирин]

civaru, смотрите. extend расширяет объект передаваемый первым аргументом свойствами объекта передаваемого вторым. При этом вложенные объекты не копируются, а ваш объект лишь получает на них ссылки.
То есть получается, что options у вас копирует все примитивные свойства из прототипа message и type, а в случае с elements это объект, он не копируется, экземпляр лишь получает ссылку на elements из прототипа. То есть все экземпляры ссылаются на один и тот же объект.

[Антон Спирин]

civaru, тут подробнее.

[civaru]

Антон Спирин, Большое спасибо!