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')
    }

}

});

我希望能够在“crearLoginWindow”函数中调用“enviarLogin”，但它会引发引用错误。如果该函数放置在“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 enviraLogin = function(){
       console.log('登录')
   };
   
   Ext.ComponentQuery.query('#loginwindow > 按钮[text="Conectar"]')[0]
       .on('点击', enviraLogin);
   

2. 将 enviarLogin 定义为方法，与定义 crearLoginWindow 的方式相同：

   Ext.define('...控制器...', {
       扩展：'Ext.app.Controller'，
   
       初始化：函数（）{...}，
   
       创建登录窗口：函数（）{
           // ...
   
           Ext.ComponentQuery.query('#loginwindow > 按钮[text="Conectar"]')[0]
               .on('点击', this.enviarLogin, this);
       },
   
       环境登录：函数（）{
           console.log('登录')
       }
   
   });
   

如果不需要引用，第一个版本可能会更好enviarLogin 在 crearLoginWindow 方法之外。如果您确实需要在其他地方引用 enviarLogin，则第二种更好，并且它使得在 enviarLogin 中使用 this 更加清晰。