Question

注意：代码看起来很长但是它的简单psuedo代码用于演示目的。不要逃跑！

我写了一个小部件来监听按键操作。触发onKeyDown事件时，对this的引用将丢失。所以我设置一个名为self的范围变量来引用小部件。创建窗口小部件时，self将被初始化。

这有效，但我不确定这是正确的做法。我认为这里的解决方案是使用代理吗？也许self变量已经充当代理？有人想透露一下发生的事情吗？

(function($)
{   
    var vendorPrefix = Modernizr.prefixed("transform");
    var self;

    $.widget("ui.myWidget", {

        _create: function()
        {  
            self = this;            
            //Do some widget stuff  
            document.addEventListener('keydown', this.onKeyDown, false)
            return this;
        },

        exampleFn: function()
        {
        },

        onKeyDown: function(event)
        {
            // this now refers to "document" and not the widget             
            switch(event.keyCode)
            {
                case 37: 
                    self.exampleFn();
                    break;
                case 39:
                    self.exampleFn();
                    break;
            }
        }

    });
})(jQuery);

Answer 1

这是因为“this”关键字指的是附加事件的对象。

使用自我提示是一个不错的选择。

Answer 2

我不确定你的代理是什么意思，因为在javascript中没有这样的东西，但不是，这不是正确的方法，因为你基本上创建了一个全局变量。

例如，如果窗口小部件被多次初始化，您可能会看到一些非常奇怪的行为，具体取决于您的代码。

摆脱全局var self并将其移到对象声明中的_create方法之上，这样它就是该对象的私有变量。

Answer 3

如果您想摆脱self变量，也可以使用jQuery.proxy()：

onKeyDown: $.proxy(function(event)
{
    // this now refers to "document" and not the widget             
    switch(event.keyCode)
    {
        case 37: 
            this.exampleFn();
            break;
        case 39:
            this.exampleFn();
            break;
    }
}, this)

无论如何，正在发生的事情是函数中的this指的是该函数。因此this中的onKeyDown是onKeyDown函数。如果您像我上面那样使用代理，this中的onKeyDown将成为父函数的引用。

有关JavaScript中this行为的更多信息：How does the "this" keyword work?

JQuery Widget，失去对“this”的引用

3 个答案: