"立即调用函数表达式"中的JavaScript原型

Question

我在立即调用函数表达式(IIFE)中编写函数.

(function(){
  "use strict";
  function EventService(){
    //MASTER CLASS
  }
  EventService.prototype.eventObj = function(){
    var ES = getEvwentMapping();
    return EventService;
  };
  EventService.prototype.popup = function(){
    eventService.eventObj.createPopup();
  };
  EventService.prototype.drilldown = function(){
    eventService.eventObj.createDrilldown();
  };
})();


eventService();

这里我收到错误,因为eventService()未定义.

Answer 1

您需要应用返回构造函数的模块模式.

var EventService = (function(){

   "use strict";

   function EventService(){
    //MASTER CLASS
   }

   EventService.prototype.eventObj = function(){
     var ES = getEvwentMapping();
     return ES;
   };

  EventService.prototype.popup = function(){
    this.eventObj().createPopup();
  };

  EventService.prototype.drilldown = function(){
    this.eventObj().createDrilldown();
  };

  return EventService;
})();

然后您可以通过执行来简单地调用该方法

var eventService = new EventService();
eventService.popup();

问题是你试图在JavaScript闭包的帮助下应用一种封装; 除非您明确导出它们,否则无法从外部访问闭包内定义的任何内容.

但是,你肯定在这里犯错了; 正如@Matt Burland所说,你不需要在这里使用IIFE.当您想要隐藏某些变量时,您可以从IIFE中受益,这样您就不会污染全局范围,或者您根本不想让它们可访问.我在你的代码中看不到这个意图.

Answer 2

是的，您的函数包含在IIFE中，并且不属于任何外部范围。如果您在函数之外需要它，则尝试返回它并将其分配给变量。例如：

var eventService = (function(){
    "use strict";
    function eventService(){
         //MASTER CLASS
    }
    eventService.prototype.eventObj = function(){
        var ES = getEvwentMapping();
        return EventService;
    };
    eventService.prototype.popup = function(){
        eventService.eventObj.createPopup();
    };
    eventService.prototype.drilldown = function(){
        eventService.eventObj.createDrilldown();
    };
    return eventService;
})();

或者，如果您有一些需要公开的功能和/或属性，则@ppoliani建议的模块模式也很好。

但是，另一个问题是，为什么您仍然认为这里需要IIFE？通过完全删除IIFE，可以达到相同的效果。

这是您要使用的东西：

var myES = new eventService();
myES.popup();

http://jsfiddle.net/k7ZJY/

编辑：正如我之前所说，没有理由在这里实际使用IIFE，因为您没有隐藏任何东西，并且您的代码实际上也没有执行任何东西。但是，您可能会使用的一种方法是创建一个单例，我想知道这是否是您的实际目标。您可以执行以下操作：

var eventServiceSingleton = (function(){
    "use strict";
    function eventService(){
         //MASTER CLASS
    }
    eventService.prototype.eventObj = function(){
        var ES = getEvwentMapping();
        return EventService;
    };
    eventService.prototype.popup = function(){
        eventService.eventObj.createPopup();
    };
    eventService.prototype.drilldown = function(){
        eventService.eventObj.createDrilldown();
    };
    return new eventService();
})();

现在，您已经为eventService变量分配了完整的构造，eventServiceSingleton并且无法创建另一个eventService对象。所以现在：

 eventServiceSingleton.popup();   // works

但：

 var anotherEventService = new eventService();    // eventService is undefined