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

Question

I´m trying to program OO in javascript. There are several variants of doing this.

I have seen something I think in some AnglularJS examples which is for me the clearest one.

Sadly I´m getting

undefined is not a function

when calling a function of my instance

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

Why do I get this error?

(I also removed the jquery calls, but it is not the problem)

Answer 1

You lack a () at the end to make the enclosing function an 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 ()

Without it, your constructor won't be assigned/returned to MyChooser . You end up with MyChooser being a function that returns constructor , rather than constructor itself. Also, change your prototype methods to point to constructor instead of MyChooser .

Also, all this confusion reasulted from the fact that the constructor and it's method definitions are placed in a closure - which is not necessary. You can simply go with:

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

...

var fp = new MyChooser(...);

Answer 2

This can work:

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

    }

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

    return MyChooser 
})();

var thisChooser = new MyChooser(param1, param2);

Notice the iife, im returning MyChooser instead of the constructor, and how the constructor is defined.

Answer 3

Since you mentioned that you're doing OO in Javascript, let me introduce you to a better way of creating objects in javascript that is cleaner, easier to read, and safer . I learned it while reading the excellent book "Javascript: The Good Parts"

Here is how you can create your object.

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;
};

Now whenever you need an object, just do

var newObject = constructor();

This is much more flexible and cleaner IMHO. And it saves you from accidentally polluting global scope if you ever forget to type the new keyword.