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關鍵字，它可以避免意外污染全局范圍。