如何在同一个javascript命名空间中调用另一个函数？

Question

我喜欢在命名空间样式中组织我的javascript，如下所示。我想知道的是：还有另一种（更短的）方式从myFirstFunction()拨打mySecondFunction()吗？我试过this.myFirstFunction()并且没有用，所以也许这里有一些我不知道的神秘伎俩。

var myNameSpace = {
    myFirstFunction: function(){
        alert("Hello World!");
    },
    mySecondFunction: function(){
        myNameSpace.myFirstFunction();
    }
}

感谢您的帮助，SO！ ：）

Answer 1

如您的示例代码所示，this.myFirstFunction()可行。您的代码可能已经过简化以说明您的问题，因此查看实际代码可能有助于说明它为什么不能与this一起使用。

失败的一个可能原因是，如果您调用this.myFirstFunction()的代码位于闭包内。如果是这样，this将是对结束函数的引用，而不是对您的命名空间的引用，因此会失败。请参阅here了解基于您的代码的人为举例，了解我的意思。再次，查看实际代码可能有助于诊断正在发生的事情。

Answer 2

您使用'this'的建议应该有效。即：

var myNameSpace = {
    myFirstFunction: function(){
        alert("Hello World!");
    },
    mySecondFunction: function(){
        this.myFirstFunction();
    }
}

结果：

myNameSpace.mySecondFunction() // "Hello World!".

Answer 3

如果您希望它更短，也许您应该考虑以下模式：

Javascript Design Pattern Suggestion

基本上就你的例子而言：

var myNameSpace = (function()
{
    function _myFirstFunction(){
        alert("Hello World!");
    }

    function _mySecondFunction(){
        _myFirstFunction();
    }

    return {
        MyFirstFunction : _myFirstFunction,    
        MySecondFunction : _mySecondFunction
    };
})();

我发现这是最干净的模式，也在javascript中提供“私有/公共”变量，否则几乎不可能

Answer 4

在某些情况下，this关键字应该可以正常工作。如果您明确致电myNameSpace.mySecondFunction()，则this.myFirstFunction()将按预期执行。

如果您使用myNameSpace.mySecondFunction作为事件处理程序，则可能不会。对于事件处理程序，您需要某种方式来引用要使用的命名空间。许多JavaScript框架提供了一种定义this关键字所引用内容的方法。例如，在MooTools中，您可以执行myNameSpace.mySecondFunction.bind(myNameSpace)，这会导致this在myNameSpace内引用mySecondFunction。如果您没有使用框架，则可以使您的事件处理程序成为匿名函数，如：

document.getElementById('myId').addEventListener('click', function(e) {
  myNameSpace.mySecondFunction.call(myNameSpace);
});

有关调用方法的更多信息，我将引用MDC page for the call function，或者您可以使用apply，其行为类似于调用，但为第二个参数传递参数数组，而不是像varargs那样附加参数的方法。

所有这些建议都取决于将命名空间定义为@Harnish suggested：

var myNameSpace = {
  myFirstFunction: function(){
    alert("Hello World!");
  },
  mySecondFunction: function(){
    this.myFirstFunction();
  }
}

有关JavaScript函数绑定的更多信息，我强烈建议您阅读Justin's article on Function scope and binding in JavaScript

Answer 5

如果您要附加到事件：

如果您将Namespace的函数附加到事件，可能会出现问题，例如：

$(el).on("click", nameSpace.myFunc);

....

nameSpace = {

    myFunc: function(){
       this.anotherFunc();
    }

}

会抛出错误。

解决方案1 ​​

您可以使用this.anotherFunc()

更改nameSpace.anotherFunc()

解决方案2

您可以更改

$(el).on("click", nameSpace.myFunc);
// to ----->
$(el).on("click", function(){ nameSpace.myFunc(); }  );