0

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

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.
    }
}

这是做事的正常方式还是有更好的方法来构建我的事件处理程序同时保持我的班级组织？

4

2 回答 2

1

正如 Joseph Silber 在上面的评论中所说，我认为bind在这种情况下会是完美的。如果您需要支持较旧的浏览器，您可以随时添加 shim （请参阅MDN 文档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));
于 2013-01-29T20:17:19.673 回答
0

我知道做到这一点的最好方法是分配this给班级顶部的另一个变量，然后在整个班级中引用该变量。但当然，这仅在您不使用匿名对象作为您的类时才有效。

例如：

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;

那么本例this中onclick函数中的变量确实是html元素，self变量就是Manager函数。

于 2013-01-29T20:01:08.590 回答