JS & EXT JS: функция внутри недопонимания области действия функции

Question

У меня возникли проблемы со следующим кодом:

Ext.define('...controller...', {
extend: 'Ext.app.Controller',

init: function() {
    ...
},

crearLoginWindow:function(){

    var loginWindow = Ext.create('Proto1.view.adminbd.LoginWindowBDView', {
        itemId: 'loginwindow',
        autoShow: true,
        modal: true
    });

    Ext.ComponentQuery.query('#loginwindow > button[text="Cancelar"]')[0].on('click', function(){loginWindow.close()});

    //Cant call 'enviarLogin' function if its inside 'crearLoginWindow'
    Ext.ComponentQuery.query('#loginwindow > button[text="Conectar"]')[0].on('click', this.enviarLogin, this);

    var enviarLogin = function(){
        console.log('login')
    }

}

});

Я хочу иметь возможность вызывать 'enviarLogin' внутри функции 'crearLoginWindow', но она выдает ошибку ссылки. Если функция находится вне crearLoginWindow, она будет работать.

Эти две строки являются источником неприятностей:

Ext.ComponentQuery.query('#loginwindow > button[text="Conectar"]')[0].on('click', this.enviarLogin, this);

var enviarLogin = function(){
    console.log('login')
}  

Я пробовал разные варианты контекста, такие как;

Ext.ComponentQuery.query('#loginwindow > button[text="Conectar"]')[0].on('click', this.crearLoginWindow.enviarLogin);
this.enviarLogin = function(){
    console.log('login')
}  

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

Буду признателен за решение, потому что эта проблема делает мой код очень грязным!

Answer 1

Простое определение функции в другой функции не привязывает ее к какому-либо объекту или экземпляру, поэтому this.enviarLogin не будет работать.Здесь есть два основных варианта:

1. Просто определите внутреннюю функцию, как вы делаете (перемещая ее выше своего назначения обработчика), и обращайтесь к ней напрямую по имени:

   var enviarLogin = function(){
       console.log('login')
   };
   
   Ext.ComponentQuery.query('#loginwindow > button[text="Conectar"]')[0]
       .on('click', enviarLogin);
   

2. Определите enviarLogin как метод, так же, как вы определяете crearLoginWindow:

   Ext.define('...controller...', {
       extend: 'Ext.app.Controller',
   
       init: function() { ... },
   
       crearLoginWindow: function(){
           // ...
   
           Ext.ComponentQuery.query('#loginwindow > button[text="Conectar"]')[0]
               .on('click', this.enviarLogin, this);
       },
   
       enviarLogin: function(){
           console.log('login')
       }
   
   });
   

Первая версия может быть лучшеесли вам не нужно ссылаться на enviarLogin вне метода crearLoginWindow.Второе лучше, если вам нужно ссылаться на enviarLogin в другом месте, и оно делает использование this в enviarLogin более понятным.