RequireJS模块中的自引用 [英] Self-reference in a RequireJS module

问题描述

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

First of all I'm not sure is this the correct way to use this library. I would like to define multiple functions/static methods in a module and use them inside the module's scope. For example:

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

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

Main.js

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

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

});

如果 bar（）由一个事件触发，因为显然这个将意味着该范围内有所不同。是否有任何全局变量引用已定义的对象，并允许我从 define（）代码中访问方法和属性？

This code won't work if bar() is triggered by an event because obviously this will mean something different in that scope. Is there any global variable which refers to the defined object and will allow me to can access methods and attributes from inside the define() code?

推荐答案

编辑：有关的信息，此见下文。

您可以使用函数来设置内部范围。你可能想要像这样声明你的模块：

You can have an inner scope by using a function. You may want to declare your module like this:

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

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

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

This looks awful, I acknowledge. Point is, it stores a reference to the object you return, and uses this to call foo. I'm not sure if you want it to be like this... But it works.

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

NOTE: This part is about the handling of this in JS. See the comment why this is not that relevant anymore for this question.

问题实际上是在 main.js ，而不是在你的模块中。问题是JS如何处理这个。这不与大多数其他语言相同！ JS中的这个是函数被称为的上下文，而不是定义的。您可以将函数应用于其他对象，即使没有它们具有此功能。

The problem is actually in main.js, not in your module. The problem is how JS handles this. This is not the same as in most other languages! this in JS is the context in which the function is called, not in which it is defined. You can apply functions to other objects, even without them having this function.

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

In your case you want to bind bar to your foobar object, so the this in bar is the correct object. You use the function bind for that. It creates a new function with the context set to the object you specified. Example:

function doubleMe () { return this * 2; }

您可以通过以下方式调用此函数：

You can call this function by doing this:

doubleMe.apply(5) // returns 10

你也可以这样做：

var giveMeTen = doubleMe.bind(5);

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

Now giveMeTen is a function, that returns 10 if executed. I encourage you to read more on this topic, the handling of this is strange at first, but beautiful if understood ;-)

关于你的代码，我会写：

Regarding your code, I would write:

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

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

请注意，jQuery将此设置为元素已在 click（）处理程序中单击。

Note that jQuery sets this to the element that has been clicked in the click() handler.

这篇关于RequireJS模块中的自引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！