javascript:在对象文字函数中使用 'this' 会出错

Question

我必须为一个交给我的网站修复一个 megamenu 系统，但我遇到了一个错误。

一旦 DOM 准备就绪(包括 jQuery)，megamenu 的渲染函数就会运行。在其中添加了一个用于调整大小的监听器以重新运行此函数，重新呈现代码。但是，我收到 javascript 错误，认为从对象内部调用此渲染函数实际上是窗口的函数，所以我得到 "Uncaught TypeError: Object [object DOMWindow] has no method 'render'".

但函数仍然运行!

这是代码的简要快照:

var jkmegamenu=
{
 ...
    render:function($)
    {
    ...
        $(window).bind("resize", function()
        {
          this.render($);
        }

    }

}

现在我已经尝试了 jkmegamenu.render($)(不知道美元是干什么用的，我想是因为 jQuery 能用还是不用)，我也试过定义 self as self: this 但出现同样的错误。它是一个相当大的文件，而且我很忙，所以我只考虑将其重新编码为适当的 jQuery 对象(例如 http://www.phpied.com/3-ways-to-define-a-javascript-class/ )，如果那是唯一的其他选择，否则有人知道快速修复吗？

网站是 kent.ac.uk，您将能够看到弹出的错误，尤其是在调整大小时。

Answer 1

JavaScript 中的

this 与您可能习惯的某些其他语言(如 C++、C# 或 Java)略有不同。它完全由如何调用函数定义，而不是定义函数的位置。更多信息在这里:You must remember this

在你的例子中，如果你想确保 this 引用你的 jkmegamenu 实例，你可以使用 jQuery 的 proxy函数，它将在幕后为您创建一个闭包，使用正确的“上下文”(this 值)调用您的函数:

var jkmegamenu=
{
 ...
    render:function($)
    {
    ...
        $(window).bind("resize", $.proxy(function()
        {
          this.render($);
        }, this));
    }

}

或者直接使用你自己的闭包:

var jkmegamenu=
{
 ...
    render:function($)
    {
    ...
        var inst = this; // Remember `this`
        $(window).bind("resize", function()
        {
          // Use it
          inst.render($);
        });
    }

}

...它的优点是您可以使用 this 来引用您将事件处理程序 Hook 到的 DOM 对象(好吧，对 window 没那么有用，但在绑定(bind)到其他对象时非常有用)。

闭包是一种非常有用的事件处理方式。更多信息:Closures are not complicated

对于你的情况，由于 jkmegamenu 是一个单例，我可能只是使用模块模式而根本不用担心 this:

var jkmegamenu = (function() {
    var inst = {};

    // ...

    inst.render = jkmegamenu_render;
    function jkmegamenu_render($)
    {
        $(window).bind("resize", function()
        {
          inst.render($);
          // Or just jkmegamenu_render($);
        });
    }

    // Could have some private functions here, just by
    // virtue of not adding them to `inst`

    // ...

    return inst;
})();

这样做的好处是还可以为您的函数命名，helps your tools help you ，并让您拥有真正私有(private)的功能。

您还可以将此模式应用于工厂函数(有些人会称它们为“类”，尽管 JavaScript 没有类)，只需进行一些调整。