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

Question

我正在尝试用JavaScript编程OO。 有几种变体。

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

可悲的是我

未定义不是函数

在调用我的实例的函数时

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 ()

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

同样，所有这些混淆是由于构造函数及其方法定义放在闭包中这一事实而导致的-这是不必要的。 您可以简单地选择：

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

...

var fp = new MyChooser(...);

Answer 2

这可以工作：

 var MyChooser = (function () {
    function MyChooser (p1, p2) {

    }

    MyChooser.prototype.f1 = function () {
        return true;
    };

    return MyChooser 
})();

var thisChooser = new MyChooser(param1, param2);

请注意，iife返回MyChooser而不是构造函数，以及构造函数的定义方式。

Answer 3

既然您提到您正在用Java进行OO，那么让我向您介绍一种更干净，更易读， 更安全的用javascript创建对象的更好方法。 我在阅读优秀的著作《 Javascript：好的部分》时学到了它

这是创建对象的方法。

var constructor = function (spec) {
    var that;

    var privateFunc = function () {};
    var privateVariables = ...;

    var publicMethod = function () {};

    that = Object.create({
        publicMethod: publicMethod,
        // public methods and properties
    });
    return that;
};

现在，只要您需要一个物体，就要做

var newObject = constructor();

这是更加灵活和清洁的恕我直言。 如果您忘记键入new关键字，它可以避免意外污染全局范围。