JavaScript原型的构造方法

Question

In file meterA.js I have this

    window.MeterA = function(options)
    {
        return this.init(options);
    }

   MeterA.prototype = {
        init: function(options) {
            this.container = options.container;
            this.width = options.width;
            this.height = options.height;
            this.sliderSize = options.sliderSize;
            var Canvas = {
                meter: TBE.CreateRectCanvasElement (displayWidth, displayHeight),
                slider: TBE.CreateSquareCanvasElement (sliderSize)
            };
            Container.appendChild (Canvas.meter);
            Container.appendChild (Canvas.slider);
        }
    }

Then in file pane.html, I tried to initialise meter with:

var MeterA = new MeterA({
    container:  Div.meterA, 
    width:      GetNumberIgnoreUnit(Div.speedMeter.style.width, 2), 
    height:     GetNumberIgnoreUnit(Div.speedMeter.style.height, 2), 
    sliderSize: 10
});

But I get "MeterA is not a constructor" as error, why is it?

Answer 1

var MeterA = new MeterA({ ...

I believe using MeterA as the variable name and the class name is the problem here. Variable declarations in Javascript are "hoisted" to the top of the function so MeterA becomes undefined

Some good explanation here : http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-hoisting-explained/

Answer 2

Smth along these lines should work :

var MeterA = (function () {

    // constructor
    var MeterA = function (options) {
        this.init(options);
    };

    // prototype
    MeterA.prototype = {
        init: function (options) {
            console.log(options);
        }
    };

    return MeterA;

})();

obj = new MeterA({
    opt1: 'sasa',
    opt2: false
});

I recomend Javascript Patterns 2010 for a more in-depth overview of the constructor pattern .

Another good read about javascript Essential JavaScript Design Patterns For Beginners, Volume 1.