Доступ к переменной класса JavaScript внутри функции класса

Question

У меня есть это:

function FilterSelect(select, search) {
    this.select = select;
    this.search = search;
    // Get the current list options
    this.options = this.select.options;
    // Whenever the text of the search box changes, do this
    this.search.onkeyup = function() {
        // Clear the list
        while(this.select.options.length > 0) {
            this.select.remove(0);
        }
    }
}

Внутри функции onkeyup я бы хотел получить доступ к select, но я знаю, что это невозможно, как есть. Как правильно это сделать?

Answer 1

Перед функцией onkeyup объявите переменную. Что-то вроде var _this = this, а затем в функции keyup просто используйте _this вместо this.

Итак, ваш код будет выглядеть примерно так:

var _this = this;
// Whenever the text of the search box changes, do this
this.search.onkeyup = function() {
    // Clear the list
    while(_this.select.options.length > 0) {
        _this.select.remove(0);
    }
}

Answer 2

Вам необходимо создать переменную, которая будет храниться в области закрытия функции onkeyup:

function FilterSelect(select, search) {
    var _this = this;  // <-- win
    _this.select = select;
    _this.search = search;

    // Get the current list options
    _this.options = this.select.options;

    // Whenever the text of the search box changes, do this
    _this.search.onkeyup = function() {
        // Clear the list
        while(this.select.options.length > 0) {
            _this.select.remove(0);
        }
    }
}

Делая это, вы гарантируете, что на правильное значение будет ссылаться независимо от того, из какой области вызывается функция onkeyup (обычно это глобальная область / область окна из-за событий).

РЕДАКТИРОВАТЬ
На самом деле, если вам просто нужен доступ к select, вы уже можете сделать это:

this.search.onkeyup = function() {
     // Clear the list
     while(this.select.options.length > 0) {
         select.remove(0);
     }
}