我喜欢在命名空间样式中组织我的javascript,如下所示。我想知道的是:还有另一种(更短的?)方式来打电话 myFirstFunction()
从 mySecondFunction()
?我试过了 this.myFirstFunction()
它不起作用所以也许这里有一些我不知道的神秘伎俩。
var myNameSpace = {
myFirstFunction: function(){
alert("Hello World!");
},
mySecondFunction: function(){
myNameSpace.myFirstFunction();
}
}
谢谢你的帮助像往常一样,SO的人! :)
如您的示例代码所示, this.myFirstFunction()
会工作。您的代码可能已经过简化以说明您的问题,因此可能有助于查看实际代码以说明它无法使用的原因 this
。
它失败的一个可能原因是你调用的代码 this.myFirstFunction()
在一个封闭内。如果是这样, this
将是关闭函数的引用,而不是您的命名空间,因此将失败。看到 这里 基于你的代码的一个人为的例子,看看我的意思。再次,查看实际代码可能有助于诊断正在发生的事情。
你建议使用'this'应该有效。即:
var myNameSpace = {
myFirstFunction: function(){
alert("Hello World!");
},
mySecondFunction: function(){
this.myFirstFunction();
}
}
结果:
myNameSpace.mySecondFunction() // "Hello World!".
如果你想让它更短,也许你应该考虑以下模式:
Javascript设计模式建议
基本上为你的例子:
var myNameSpace = (function()
{
function _myFirstFunction(){
alert("Hello World!");
}
function _mySecondFunction(){
_myFirstFunction();
}
return {
MyFirstFunction : _myFirstFunction,
MySecondFunction : _mySecondFunction
};
})();
我发现这是最干净的模式,也在javascript中提供“私有/公共”变量,否则几乎是不可能的
在某些情况下 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中关于函数范围和绑定的文章
如果您要附加到活动:
如果您将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(); } );