Блог

Главная - Вопросы по программированию - Как я могу найти любой объект, когда я знаю значение свойства объекта

Как я могу найти любой объект, когда я знаю значение свойства объекта

#javascript #object #methods #clone #shortcut

#javascript #объект #методы #клонировать #ярлык

Вопрос:

Я пытаюсь создать ярлык для значка (html-элемента), который является объектом, и у этого объекта есть несколько методов, например. openWindow(), и я хочу, чтобы, когда я нажму на ярлык, этот ярлык запускал метод this object (оригинальный html-элемент).

Пример:

 class File{
  constructor(fileName){
  this.name = fileName;
  this.element = document.createElement("div");
  this.addFile();
  }
  
  openWindow(){
    console.log("You opened", this.name);
  }
  
  addFile(){
    document.body.appendChild(this.element);
    this.element.addEventListener('click',openWindow)
  }
}

const orginalElement = new File("file1");

const shortcut = orginalElement.cloneNode(true);
shortcut.addEventListener('click', openWindow);

Может быть, мне следует использовать WeakMap или что-то другое, чего я не знаю.
Так же как и любой метод, который может возвращать объект, когда я знаю значение свойства объекта?
Потому что в моем коде каждый объект имеет свойство ‘id’, а у ярлыков thoose есть атрибут ‘id’, который должен совпадать с идентификатором свойства исходного объекта.

Ответ №1:

Если я вас правильно понял, вы можете использовать функции со стрелками в своем классе, чтобы сделать их автоматически привязанными к this ним, независимо от того, как вы их используете.

 class FileIcon {
  constructor(fileName) {
    this.name = fileName;
    this.addFile();
  }

  openWindow = () => {
    console.log("You opened", this.name);
  }

  addFile() {
    this.element = document.createElement("button");
    this.element.innerText = "Button "   this.name;
    document.body.appendChild(this.element);
    this.element.addEventListener('click', this.openWindow);
  }
}

const a = new FileIcon("foo");
const b = new FileIcon("bar");

const link = document.createElement("a");
link.href = "#";
link.innerText = "Link for foo";
link.addEventListener("click", a.openWindow);
document.body.appendChild(link);

Комментарии:

1. Спасибо! Я не знал, что в качестве второго аргумента можно ввести объект с помощью метода.