javascript - RequireJS 模块中的自引用

Question

首先，我不确定这是使用该库的正确方式。我想在一个模块中定义多个函数/静态方法，并在模块的范围内使用它们。例如:

define({
        foo: function() {
            return "Hello";
        },

        bar: function() {
            alert( this.foo() );
        }
});

主要.js

require( ['foobar'], function( foobar) {

        foobar.bar(); // works
        $('body').click( foobar.bar ); // crash - Object #<HTMLBodyElement> has no method 'foo' 

});

如果 bar() 由事件触发，此代码将不起作用，因为显然 this 在该范围内意味着不同的东西。是否有任何全局变量引用定义的对象并允许我从 define() 代码内部访问方法和属性？

Answer 1

编辑:有关this的信息，请参见下文。

您可以通过使用函数来拥有内部作用域。你可能想像这样声明你的模块:

define((function () { var self = {   // this line is changed
        foo: function() {
            return "Hello";
        },

        bar: function() {
            alert( self.foo() );
        }
}; return self; }()));    // and this

这看起来很糟糕，我承认。重点是，它存储对您返回的对象的引用，并使用它来调用 foo。我不确定您是否希望它像这样......但它有效。

---

注意:这部分是关于JS中this的处理。请参阅评论为什么这与此问题不再相关。

问题实际上出在 main.js 中，而不是在您的模块中。问题在于 JS 如何处理 this。这与大多数其他语言不一样! JS 中的 this 是函数被调用 的上下文，而不是函数被定义 的上下文。您可以将函数应用到其他对象，即使它们没有此函数也是如此。

在您的情况下，您希望将 bind bar 到您的 foobar 对象，因此 this 中的 >bar 是正确的对象。为此，您可以使用函数 bind。它创建一个新函数，上下文设置为您指定的对象。示例:

function doubleMe () { return this * 2; }

你可以这样调用这个函数:

doubleMe.apply(5) // returns 10

你也可以这样做:

var giveMeTen = doubleMe.bind(5);

现在 giveMeTen 是一个函数，如果执行则返回 10。我鼓励你阅读更多关于这个主题的内容，this 的处理一开始很奇怪，但如果理解的话会很漂亮 ;-)

---

关于你的代码，我会写:

require( ['foobar'], function( foobar) {

        foobar.bar();
        $('body').click( foobar.bar.bind(foobar));
});

请注意，jQuery 将 this 设置为已在 click() 处理程序中单击的元素。