Javascript类-调用函数时未定义不是函数

Question

我正在尝试用 javascript 进行面向对象编程。执行此操作有多种变体。

我在一些 AnglularJS 示例中看到了一些我认为是最清晰的示例。

可悲的是我越来越

undefined is not a function

调用我的实例的函数时

var MyChooser = (function () {

    var self = this;
    var constructor = function (selectBox, previewBox) {
        this.selectBox = selectBox;
        this.previewBox = previewBox;
        this.selectBox.change(function () {
            alert(this.value);
        })
    };

    MyChooser.prototype.loadFrames = function () {
        alert("load");
        $.ajax({url: "api.php"}).done(function (data) {
            alert(data);
            //self.frames = data;
        })
    };

    MyChooser.prototype.displayFrame = function (frame) {
        this.previewBox.setAttribute("src", frame.src);
    };

    MyChooser.prototype.invalidateSelectBox = function () {

    };

    return constructor;
});



 var fp = new MyChooser(document.getElementById("frame-select"), document.getElementById("frame-preview"));
            fp.loadFrames();

为什么我会收到此错误？

(我还删除了 jquery 调用，但这不是问题)

Answer 1

最后缺少一个 () 来使封闭函数成为 IIFE。

var MyChooser = (function () {

  var constructor = function(select,...stuff){...}

  // Note we're using constructor.prototype rather than MyChooser.prototype
  constructor.prototype.foo = function...
  ...

  return constructor;
}()); // Note the ()

没有它，您的构造函数将不会被分配/返回到MyChooser。最终，MyChooser 是一个返回构造函数 的函数，而不是构造函数 本身。另外，将原型(prototype)方法更改为指向 constructor 而不是 MyChooser。

此外，所有这些困惑都是由于构造函数及其方法定义被放置在闭包中这一事实造成的 - 这是不必要的。您可以简单地选择:

function MyChooser(select,...stuff){...}
MyChooser.prototype.moarStuff = function(){...};

...

var fp = new MyChooser(...);