JS& EXT JS:函数范围内的函数误解

时间:2011-10-19 18:22:57

标签: javascript extjs scope

我在使用以下代码时遇到了一些问题:

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

我认为我对范围的理解以及指定函数执行它所在位置的需要是有道理的。

我很欣赏解决方案,因为这个问题会让我的代码变得非常混乱!

1 个答案:

答案 0 :(得分: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')
        }
    
    });
    
  3. 如果您不需要在enviarLogin方法之外引用crearLoginWindow,则第一个版本可能会更好。如果您确实需要在其他位置引用enviarLogin,那么第二种情况会更好,并且会使this中的enviarLogin更清晰。