Какова связь между объектом JavaScript и элементом, созданным в нем? - PullRequest
Новая
       18

Какова связь между объектом JavaScript и элементом, созданным в нем?

0 голосов
/ 25 апреля 2018

Можно ли передать this.brother как переменную в eventListener this.son? 

function Object(a){
  this.brother = a;
  this.son = document.createElement("div");
  document.getElementById('parent').appendChild(this.son);
  this.son.addEventListener('mousedown',function(){ 
    onMouseDown(event,this.brother);
  });
}

Пользовательский ввод позже изменяет значение this.brother, поэтому я не могу просто передать вводпеременная a .

Нужно ли добавлять новый eventListener каждый раз, когда значение этого брата изменяется?

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Ваш вопрос сводится к тому, что ключевое слово this означает внутри функции. Есть три варианта.

1. «Правильные» функции 

this.son.addEventListener('mousedown', function() { 
  onMouseDown(event, this.brother);
});

Если вы определяете функцию с полным синтаксисом определения функции, function() {}, тогда this будет ссылаться на объект, через который вызывается функция. В случае прослушивателя событий это объект, для которого вы определили слушателя, который в вашем случае является div, который вы создали. Это означает, что вы получите ошибку, потому что div элементы не имеют свойства с именем brother.

2. Функции стрелок

Функции стрелок были введены в последние годы и используют другой синтаксис: 

this.son.addEventListener('mousedown', () => { 
  onMouseDown(event, this.brother);
});

Функции стрелок работают точно так же, как и «правильные» функции во всех отношениях, за одним исключением: они не имеют своих собственных this, то есть this будет ссылаться на все, к чему относится в области действия функции. определен. В вашем случае это будет ссылка на объект, который вы инициализируете в вашей функции Object(). Это, вероятно, тот, который вы хотите.

(Примечание: вы действительно не должны называть свою функцию Object, это имя уже занято базовым классом для всех объектов в JavaScript. Перезапись может вызвать всевозможные проблемы)

3. Связанные функции

Функции в JavaScript являются объектами, и поэтому они также имеют методы. Одним из них является bind(), который позволяет вам создать связанную копию функции: 

this.son.addEventListener('mousedown', (function() { 
  onMouseDown(event, this.brother);
}).bind(this));

Связанные функции также работают как «правильные» функции, за исключением того, что this всегда будет ссылаться на объект, который вы передали в качестве аргумента bind(). До функций со стрелками связанные функции раньше были наиболее распространенным способом обеспечения того, чтобы this всегда ссылался на один и тот же объект в области действия. После появления функций со стрелками они начали терять популярность, поскольку функции со стрелками более эффективны и производят более читаемый код.

0 голосов
/ 25 апреля 2018

Я не собираюсь предлагать это, но вы можете использовать связанную функцию: 

function _Object(a){ //this is not a great function name
  this.brother = a;
  this.son = document.createElement("div");
  document.getElementById('parent').appendChild(this.son);
  this.son.addEventListener('mousedown',(function(event){ 
    onMouseDown(event,this.brother);
  }).bind(this));
}

Что касается вашего вопроса, нет, вам не нужно его обновлять. Это относится к _Object, если братуказатель изменен, этот брат будет указывать на нового брата.

...