Question

我有一个IIFE，我试图制作一个书签。我希望弹出书签的模式会有一些调用函数的按钮。但是，当我有这样的结构时：

(function(){

   var __myFn = function(str){ //also have tried function __myFn(){..}
      alert(str);
   }

   //some AJAX that builds HTML with the `result`s

   document.getElementById("resultDiv").innerHTML = "<span onclick='__myFn(" + result.someData+ ")'>test</span>


}());

我得到Uncaught ReferenceError: __myFn is not defined

如何识别此功能？还有另一种方式吗？

Answer 1

当您使用var关键字时，您将创建一个在封闭上下文范围内的本地变量。由于封闭上下文是函数，__myFn对于函数本身是局部的并且在外部是未知的（即，在全局上下文中不知道）。

如果你想使用里面的东西，你必须返回它的引用。您可以使用类似于模块模式的内容：

var myModule = (function(){

   var __myFn = function(str) { 
      alert(str);
   }

   return {
       myFn: __myFn
   };

})();

然后你可以这样做：

//some AJAX that builds HTML with the `result`s

document.getElementById("resultDiv").innerHTML = "<span onclick='myModule.myFn(" + result.someData+ ")'>test</span>

但是，我建议不要以这种方式绑定您的事件处理程序。使用jQuery或使用DOM方法（addEventListener）来绑定事件处理程序。这样你甚至可以在IIFE内部进行，这意味着你甚至不必从IIFE返回一些东西。这意味着您的全局环境不会受到污染。现在，你必须从IIFE返回一些内容的唯一原因是因为你通过HTML绑定事件处理程序。

以下是两个例子。第一个假定IIFE返回对__myFn：

的引用

var resultDiv = document.getElementById("resultDiv");
resultDiv.addEventListener("click", myModule.myFn, false);

以下是IIFE内部的第二个例子：

(function(){

   var __myFn = function(str) { 
      alert(str);
   }

   var resultDiv = document.getElementById("resultDiv");
   resultDiv.addEventListener("click", __myFn, false);

})();

Answer 2

由于我不明白的原因，我发现采取＆＃34; var＆＃34;宣言使其有效。

示例1（失败）：

(function() {

    var counter = 0;
    var init = function() { console.log("init called"); }
})();

init(); // regardless of whether I named the function or not, this fails.

但是：例2（作品）：

(function() {
    var counter = 0;
    init = function() { console.log("init called"); }
})();

init(); // this calls the function just fine.

请注意，您可以通过这种方式在iife中添加任意数量的函数。

IIFE内部的功能无法识别

2 个答案: