Странное делегирование в js? Почему объекты не копируются? Здравствуйте. Есть такая конструкция, объект, на него навешана куча обработак всяких дропов, кликов и пр.
Пытаюсь создать второй объект, почти такой же как и первый, но один из обработчиков надо заменить.
При подобной конструкции (код ниже) обработчик просто вешается следом, и на изначальный объект, и на новый.
Громко не ругайтесь, ООП систему js еще не понимаю, но пытаюсь.
В консоли явно видно последовательный вызов 2х функций.var item = $('#container1'); // Делаю объект из дом элемента
item.target = $(item).children('.target'); // Дропы принимает не сам объект, а один из дочерних узлов (так надо)
// тут куча обработок
// и наконец сам обработчик дропа
item.target.on('drop', function(e) {
console.log('Drop');
});
var item_2 = {};
item_2.__proto__ = item; // пытаюсь скопировать объект
// пытаюсь переназначить обработчик
item_2.target.on('drop', function(e) {
console.log('Drop 2');
});
Странное делегирование в js? Почему объекты не копируются? Здравствуйте. Есть такая конструкция, объект, на него навешана куча обработак всяких дропов, кликов и пр.
Пытаюсь создать второй объект, почти такой же как и первый, но один из обработчиков надо заменить.
При подобной конструкции (код ниже) обработчик просто вешается следом, и на изначальный объект, и на новый.
Громко не ругайтесь, ООП систему js еще не понимаю, но пытаюсь.
В консоли явно видно последовательный вызов 2х функций.var item = $('#container1'); // Делаю объект из дом элемента
item.target = $(item).children('.target'); // Дропы принимает не сам объект, а один из дочерних узлов (так надо)
// тут куча обработок
// и наконец сам обработчик дропа
item.target.on('drop', function(e) {
console.log('Drop');
});
var item_2 = {};
item_2.__proto__ = item; // пытаюсь скопировать объект
// пытаюсь переназначить обработчик
item_2.target.on('drop', function(e) {
console.log('Drop 2');
});
Пытаюсь создать второй объект, почти такой же как и первый, но один из обработчиков надо заменить.
При подобной конструкции (код ниже) обработчик просто вешается следом, и на изначальный объект, и на новый.
Громко не ругайтесь, ООП систему js еще не понимаю, но пытаюсь.
В консоли явно видно последовательный вызов 2х функций.var item = $('#container1'); // Делаю объект из дом элемента
item.target = $(item).children('.target'); // Дропы принимает не сам объект, а один из дочерних узлов (так надо)
// тут куча обработок
// и наконец сам обработчик дропа
item.target.on('drop', function(e) {
console.log('Drop');
});
var item_2 = {};
item_2.__proto__ = item; // пытаюсь скопировать объект
// пытаюсь переназначить обработчик
item_2.target.on('drop', function(e) {
console.log('Drop 2');
});
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Интересные статьи из справочника
Поможем написать учебную работу
Отвечай на вопросы, зарабатывай баллы и трать их на призы.
Подробнее
Подробнее
Проблема здесь заключается в том, что при использовании item_2.__proto__ = item; вы просто делегируете все свойства и методы объекта item объекту item_2, но не создаете новый объект. Из-за этого обработчик события drop вешается и на item и на item_2, так как они оба ссылаются на один и тот же объект.
Для создания нового объекта с таким же содержимым, но без делегирования, вам следует использовать функцию Object.assign() или другие способы клонирования объекта. Например, вы можете сделать это так:
var item_2 = Object.assign({}, item);item_2.target = $(item_2).children('.target');
item_2.target.on('drop', function(e) {
console.log('Drop 2');
});
Таким образом, вы создадите новый объект item_2 со всеми свойствами и методами item, но без делегирования, и сможете изменять обработчики событий только для нового объекта.