Javascript «this» в событии jquery

Question

Как правильно вызвать функциюOne в функции изменения JQuery? «this» больше не ссылается на объект.

NameSpace.object = { 
    functionOne: function(){ 
    // stuff 
    }, 
    functionTwo: function(){ 
    this.functionOne(); // this works correctly 
    }, 
    functionThree: function(){ 
    $('input').change(function(){ 
     if ($(this).val() > 1) { 
     this.functionOne(); // this is no longer calling function one 
     } 
    } 
    } 
} 

Answer 1

Поскольку у вас есть два разных значения, которые вы хотите использовать, и jQuery уже помещает один из них в this, вы можете просто сохранить другое значение в переменной в более высоком объеме:

NameSpace.object = { 
    functionOne: function(){ 
    // stuff 
    }, 
    functionTwo: function(){ 
    this.functionOne(); // this works correctly 
    }, 
    functionThree: function(){ 
    // save value if this so it can be used later in this scope 
    var self = this; 
    $('input').change(function(){ 
     if ($(this).val() > 1) { 
     self.functionOne(); 
     } 
    } 
    } 
} 

Или, так как это статически с именем NameSpace.object, вы также можете просто ссылаться на это имя сразу:

NameSpace.object = { 
    functionOne: function(){ 
    // stuff 
    }, 
    functionTwo: function(){ 
    this.functionOne(); // this works correctly 
    }, 
    functionThree: function(){ 
    $('input').change(function(){ 
     if ($(this).val() > 1) { 
     NameSpace.object.functionOne(); 
     } 
    } 
    } 
} 

Или, так как JQuery предоставляет механизм .change([eventData], handler) для передачи данных в обработчик событий, вы можете использовать это тоже:

NameSpace.object = { 
    functionOne: function(){ 
    // stuff 
    }, 
    functionTwo: function(){ 
    this.functionOne(); // this works correctly 
    }, 
    functionThree: function(){ 
    $('input').change(this, function(e){ 
     if ($(this).val() > 1) { 
     e.data.functionOne(); 
     } 
    } 
    } 
} 

Механизм JQuery не мой любимый здесь, потому что я думаю, что код, который вызывает e.data.functionOne() менее очевидно (читателю нужно оглянуться в коде, чтобы выяснить, что такое e.data), но это только мое личное мнение по этой ситуации.

Answer 2

Один из способов сохранить ссылку на него с помощью, условно называемой self

NameSpace.object = { 
    functionOne: function(){ 
    // stuff 
    }, 
    functionTwo: function(){ 
    this.functionOne(); // this works correctly 
    }, 
    functionThree: function(){ 
    var self = this; 
    $('input').change(function(){ 
     if ($(this).val() > 1) { 
     self.functionOne(); // this is no longer calling function one 
     } 
    } 
    } 
} 

---

При нормальных обстоятельствах вы могли бы bind ваш обратный вызов к объекту с помощью this. Но в этом случае я понятия не имею, как он взаимодействует с переопределением jQuery this для ссылки на элемент, который вызвал обратный вызов ...

Answer 3

Попробуйте установить переменную NameSpace в functionThree, призывая NameSpace.object.functionThree() установить change событие в input элемент

var NameSpace = {}; 
 
NameSpace.object = { 
 
    functionOne: function(){ 
 
    // stuff 
 
    alert("functionOne") 
 
    }, 
 
    functionTwo: function(){ 
 
    this.functionOne(); // this works correctly 
 
    }, 
 
    functionThree: function(){ 
 
    var ns = this; 
 
    $('input').change(function(){ 
 
     if ($(this).val() > 1) { 
 
     ns.functionOne(); // this is no longer calling function one 
 
     } 
 
    }) 
 
    } 
 
} 
 

 
NameSpace.object.functionThree()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="number" />

Answer 4

Вы также можете использовать дополнительный параметр eventDatajQuery.change([eventData ],...).

Пройдя this до eventData, вы можете получить к нему доступ изнутри обработчика через переменную события.

$('input').change(this,function(e){ 
    ... 
    e.data.functionOne(); 
    ... 
}

---

var NameSpace = {}; 
 
NameSpace.object = { 
 
    functionOne: function(){ 
 
    // stuff 
 
    alert("functionOne") 
 
    }, 
 
    functionTwo: function(){ 
 
    this.functionOne(); // this works correctly 
 
    }, 
 
    functionThree: function(){ 
 
    $('input').change(this,function(e){ 
 
     if ($(this).val() > 1) { 
 
     e.data.functionOne(); 
 
     } 
 
    }) 
 
    } 
 
} 
 

 
NameSpace.object.functionThree()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="number" />