Javascript 获取'；这'；上下文

作为一名长期的C++/C#开发人员，我发现自己将许多JS代码移动到“类”中，以将函数和数据分组在一起。但由于这些类处理事件，我发现自己必须编写“存根”处理程序，这些处理程序只用于将调用路由到类方法中，以提供适当的上下文。所以我在做这样的事情：

var Manager = {
    foo: 'x',
    bar: 1,

    onClickStub: function(evt) {
        // 'this' refers to HTMLElement event source
        Manager.onClick(evt);
    },

    onClick: function(evt) {
        // 'this' now refers to Manager.
        // real work goes here.
    }
}

---

这是做事情的正常方法还是有更好的方法来构造我的事件处理程序，同时保持我的类组织？

我知道最好的方法是将

这个
分配给类顶部的另一个变量，然后在整个类中引用该变量。但当然，这只在不使用匿名对象作为类的情况下有效

例如：

var Manager = function(){
    var self = this,
    var foo = 'x',
    var bar = 1;

    var onClick = function(evt) {

        console.log(self); // refers to the manager
        console.log(this); // refers to the element the onclick is assigned to

       // If you want this to equal the manager then just do: this = self;
    }
}() // edit: to make this an immediate function

作为对下面评论的回应，您可以像这样附加onclick

element.onclick = Manager.onClick;

那么在本例中，onclick函数中的
这个
变量实际上是html元素，而self变量是Manager函数。
正如Joseph Silber在上面的评论中所说，我认为在本例中是完美的。如果需要支持较旧的浏览器，则始终可以向
Function.prototype.bind
添加一个垫片（请参见中的示例实现）。那么您的代码可能就是：

var Manager = {
    var foo: 'x',
    var bar: 1,

    // no more stub!

    onClick: function(evt) {
        // 'this' will refer to Manager.
        // real work goes here.
    }
}

// And when you bind the event handler:
var el = document.getElementById('something');
el.addEventListener('click', Manager.onClick.bind(Manager));

您应该看看下划线.js。。。有一些功能可以为您管理这些功能。但是你是正确的，你必须自由地使用call/apply来更改上下文，以正确引用你的JS对象，因为上下文可能会发生一些变化。如果你足够幸运，不必支持IE8，你可以使用。你的示例不会按照你描述的方式工作。我想你的意思是
Manager.onClick（evt）。虽然这是一个有趣的问题，但它不适合SO的问答格式。但你应该看看这篇很棒的文章，还有道格拉斯·克罗克福德（Douglas Crockford）的一些非常好的
说明。因此，
.bind
选项似乎是一个不错的选项。内特，谢谢你的纠正。我更新了我的示例代码。他使用的是一个对象而不是一个函数，这就是为什么我在顶部说这是一个函数，而不是匿名对象。同样，它也没有任何区别，因为如果你愿意，你可以把它变成一个直接的函数，然后它会以与对象相同的方式工作。另外，他在最初的问题中问了关于类的问题，在我看来，函数比对象更适合于类。但问题的重点是“有没有更好的方法来重新建立正确的‘this’上下文？”这个答案中的代码仍然有第二个存根方法。我编辑了代码，以反映更多我认为this变量可以如何分配的情况，我认为在这种情况下绑定并不是真的必要。我认为这只会使调用函数稍微复杂一些。