ExtJS循环数组时如何正确获取作用域并调用自定义函数

这个问题我之前也踩过类似的坑，在ExtJS的循环回调里很容易因为this指向跑偏，导致没法调用自定义的callFunction。给你几个实用的解决办法：

方法一：利用Ext.each的第三个参数指定作用域 #

ExtJS的Ext.each方法本身就支持传入第三个参数来指定回调函数的作用域，这是框架官方推荐的方式。你只需要在内层的Ext.each调用时，把外层的this（也就是someFunc所属的对象）作为第三个参数传进去就行：

someFunc: function(item) { 
    var array = Ext.select(".item").elements; 
    var elements; 
    var itemId = item.id; 
    Ext.each(array, function(ob){
        if (ob.id === itemId) { 
            elements = ob.getElementsByTagName("input"); 
            // 传入外层的this作为回调的作用域
            Ext.each(elements, function(att){
                if (att.getAttribute("name") === "filter") { 
                    console.log(att); 
                    this.callFunction(); // 现在this指向正确的作用域了
                } 
            }, this); 
        } 
    }); 
}

这样内层回调里的this就会指向someFunc所在的对象，自然就能成功调用callFunction了。

方法二：提前保存外层作用域到变量 #

如果习惯更直观的写法，你可以在someFunc一开始就把当前的this保存到一个变量（比如me，这是ExtJS社区里很常用的命名习惯），然后在所有回调里用这个变量代替this：

someFunc: function(item) { 
    var array = Ext.select(".item").elements; 
    var elements; 
    var itemId = item.id; 
    var me = this; // 保存当前正确的作用域
    Ext.each(array, function(ob){
        if (ob.id === itemId) { 
            elements = ob.getElementsByTagName("input"); 
            Ext.each(elements, function(att){
                if (att.getAttribute("name") === "filter") { 
                    console.log(att); 
                    me.callFunction(); // 用me调用自定义函数
                } 
            }); 
        } 
    }); 
}

这个方法兼容性拉满，不管你的ExtJS版本是新是旧都能正常工作。

方法三：使用ES6箭头函数 #

如果你的项目环境支持ES6语法，箭头函数会自动继承外层的作用域，不用额外处理就能让this指向正确的对象：

someFunc: function(item) { 
    var array = Ext.select(".item").elements; 
    var elements; 
    var itemId = item.id; 
    Ext.each(array, function(ob){
        if (ob.id === itemId) { 
            elements = ob.getElementsByTagName("input"); 
            // 箭头函数继承外层作用域
            Ext.each(elements, (att) => {
                if (att.getAttribute("name") === "filter") { 
                    console.log(att); 
                    this.callFunction(); 
                } 
            }); 
        } 
    }); 
}

不过要注意，如果项目还在使用不支持ES6的老环境，这个方法就不适用了。

总的来说，最推荐第一种方法，完全符合ExtJS的设计规范；如果是老项目，第二种方法更稳妥。

内容的提问来源于stack exchange，提问作者user1234