Переменные класса не видны внутри события элемента?

Question

Я надеюсь создать веб-приложение, это означает, что элементы HTML должны быть довольно динамичными, поскольку они будут создаваться и перемещаться вокруг того, что обрабатываются другими другими элементами. Поэтому я решил использовать классы - с большим успехом, до момента обработки событий. Это подозрительный класс, который говорит о том, что Chrome говорит, что он путает его с переменной, которая не определена.

function SpanInputPair(element) { 
    span = document.createElement("span"); 
    this.Span = getNextInputID(); 
    span.style.display = "none"; 
    span.id = this.Span; 
    element.appendChild(span); 
    input = document.createElement("input"); 
    input.type = "text"; 
    this.Input = getNextInputID(); // request a new ID for this element and save into this class 
    input.id = this.Input; // Attach it onto the element for future finding :/ (slow) 
    element.appendChild(input); 
    input.focus(); 
    span.onclick = function() { 
     var input = getInput(this.Input); // this.Input cannot be seen? 
     var span = getInput(this.Span); 
     input.value = span.innerHTML; 
     toggleDisplay(input); 
     toggleDisplay(span); 
     input.focus(); 
    } 
    input.onblur... 

Строка «var input = getInput (this.Input);» проблема в том, что Chrome говорит мне, что больше не видит «this.Input». Я знаю это, потому что я могу запустить эту строку и заменить «this.Input» на реальное значение, и он возвращает элемент в порядке. Как вы можете видеть, у меня есть динамическое создание текстового поля и диапазона и установка их идентификаторов для использования в будущем, потому что я ранее пытался сохранить сам элемент в классе и использовать его внутри события - такую ​​же проблему, поэтому я попытался чтобы найти его в документе каждое событие, используя document.getElementByID(). Странно также не кажется, что он фокусирует только что созданное текстовое поле (если это может быть частью проблемы тоже, я не знаю). Этот проект был создан полностью из ничего и не использует библиотеки. Итак, мой вопрос: можете ли вы объяснить, почему событие элемента не может видеть какие-либо переменные в классе, который его создал? И как я могу это исправить?

Я еще не видел, как это было опубликовано, так как многие люди используют библиотеку, такую ​​как JQuery и/или не используют классы, является вопросом, связанным с обработкой событий с помощью внутренних переменных класса.

Answer 1

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

Функции в JavaScript имеют что-то под названием контекст, что означает, что каждая функция ограничена определенным объектом. Если мы объявим функцию в вашем скрипте, она будет ограничена глобальным объектом (который является окном в браузерах).

Однако, если попытаться объявить метод (функция, которая принадлежит к объекту), this будет волшебная переменная, которая представляет сам объект. Каждый раз, когда вы вызываете this.my_property, вы получите значение свойства вашего объекта, либо «атрибут», либо «метод».

Следовательно, контекст функции может быть изменен, как это происходит с обработчиками событий.В вашем сценарии обработчики событий - это функции, контекст которых изменился, поэтому каждый раз, когда вы обращаетесь к нему, его значением будет объект HTMLElement, который получает событие, когда вы нажимаете на него.

Для решения этой проблемы вы можете объявить вспомогательную переменную и использовать ее внутри обработчика. Общей практикой, которой придерживается сообщество, является:

var that = this; // Also, the people use 'self' instead of 'that' 

span.onclick = function() { 
    var input = that.input; 

    // ... 
}; 

Использование этого обходного пути у вас не возникнет проблем.

Answer 2

Значение «this» внутри функции щелчка - это элемент, нажатый. Вот это будет <span>, который вы только что создали.

Вы хотите получить значение этой задней части, когда вы определили функцию щелчка. (Вопрос может быть:. Что такое значение «это», когда функция SpanInputPair называется Вы можете считать, что)

Вы можете сделать это что-то вроде этого, которое добавляет его к закрытию :

var thisInput = this.Input; 
... 

span.onclick = function() { 
    var input = getInput(thisInput); 

Вы будете иметь ту же проблему с this.Span на следующей строке.