Question

作为一名长期的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.
    }
}

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

Answer 1

正如约瑟夫·西尔伯在上述评论中所说，我认为bind在这种情况下是完美的。如果您需要支持旧浏览器，则始终可以向Function.prototype.bind添加垫片（请参阅MDN docs中的示例实现）。那你的代码可能就是：

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));

Answer 2

我知道这样做的最好方法是将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;

然后在这种情况下，onclick函数中的this变量确实是html元素，而自变量是Manager函数。

获得“这个”背景的最佳实践

2 个答案: