javascript - 维护范围

Question

我有一个关于在对象中维护 this 范围的一般性问题。这是一个简化的代码片段。记下 var that = this 行和我调用 that.showMenu() 的事件处理程序内部。

var MyObj = {
    init : function(target){
        this.$Target = $(target);
        this.$Menu = $(target).find('.menu');
        this.eventBindings();
    },
    eventBindings : function(){
        var that = this;
        this.$Target.on('click', '.anchor', function(e){
            e.preventDefault();
            that.showMenu();
            //some other code
        });
    },
    showMenu : function(){
        this.$Menu.show();
    }
};
MyObj.init('.myTarget')

代码应该是不言自明的。通常我尝试在我的 eventBindings() 之外创建可重用的方法。我不断遇到的问题是将引用 MyObj 的 this 传递到事件处理程序中，这样我就可以调用 this.showMenu()。

为了克服障碍，我总是将 this 分配给一个名为 that 的变量，这样当我进一步深入范围时，我就有了一个引用。但我觉得这不是最好的方法...有人可以提出更好的选择吗？

Answer 1

你正在做的是最好的方法。在 Javascript 中，this 的作用域是动态的(绑定(bind)取决于堆栈，即函数被调用的位置)，所有其他变量的作用域是静态的(绑定(bind)取决于变量在你的代码中的静态位置)代码)。

并且由于 Javascript 以特殊方式处理 this，所以也不要因为以特殊方式处理它而感到难过。

您可以将您现在正在做的事情封装在一个函数中——许多库都提供了这样的功能，它通常被称为“绑定(bind)”。但这不会改变真正发生的事情，只会隐藏它(并在这样做时消耗一些资源)。这样的函数看起来有点像:

function whatever (functionToProcess, thisToFreeze) { 
   return function() {
       functionToProcess.apply(thisToFreeze, arguments); // apply is built in
   }
}