首先,我不确定这是使用该库的正确方式。我想在一个模块中定义多个函数/静态方法,并在模块的范围内使用它们。例如:
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()
代码内部访问方法和属性?
最佳答案
编辑:有关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()
处理程序中单击的元素。
关于javascript - RequireJS 模块中的自引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18517904/