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


我喜欢在命名空间样式中组织我的javascript,如下所示。我想知道的是:还有另一种(更短的?)方式来打电话 myFirstFunction() 从 mySecondFunction()?我试过了 this.myFirstFunction() 它不起作用所以也许这里有一些我不知道的神秘伎俩。

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

谢谢你的帮助像往常一样,SO的人! :)


7823
2017-11-03 02:01


起源

你的例子是正确的,它应该工作。 - Dr.Molle


答案:


如您的示例代码所示, this.myFirstFunction() 会工作。您的代码可能已经过简化以说明您的问题,因此可能有助于查看实际代码以说明它无法使用的原因 this

它失败的一个可能原因是你调用的代码 this.myFirstFunction() 在一个封闭内。如果是这样, this 将是关闭函数的引用,而不是您的命名空间,因此将失败。看到 这里 基于你的代码的一个人为的例子,看看我的意思。再次,查看实际代码可能有助于诊断正在发生的事情。


12
2017-11-03 02:39



好简单的回答。我用你的jsfiddle例子理解了一切。谢谢,你刚刚让我的js代码更干净了!你是对的,我简化了我的代码在这里发布,我对函数的调用是在一个闭包。我不知道它会影响“this”关键字。再次感谢! - Gabriel
没问题,加布里埃尔。很高兴它有所帮助。 :) - Bryan


你建议使用'this'应该有效。即:

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

结果:

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

2
2017-11-03 02:38





如果你想让它更短,也许你应该考虑以下模式:

Javascript设计模式建议

基本上为你的例子:

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

    function _mySecondFunction(){
        _myFirstFunction();
    }

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

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


2
2017-11-03 03:10





在某些情况下 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页面 或者你可以使用 应用 其行为与调用类似,但为第二个参数传递参数数组,而不是像其他参数那样使用varargs方法。

所有这些建议都基于将命名空间定义为 @Harnish建议

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

有关JavaScript函数绑定的更多信息,我强烈建议阅读 Justin在JavaScript中关于函数范围和绑定的文章


0
2017-11-03 02:56





如果您要附加到活动:

如果您将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(); }  );

0
2018-01-05 12:42