Using prototype to simulate extending a 'base class' object in JavaScript I'm investigating using prototypes in JavaScript to simulate using 'base classes' which can be 'extended'. I've created an example where dialogBox is my 'base' and welcomeMessage is the 'extension'.

// OBJECT CONSTRUCTORS

var dialogBox = function(xPosition, yPosition, width, height){
    this.x = xPosition;
    this.y = yPosition;
    this.width = width;
    this.height = height;
    this.draw = function(){
        STAGE.fillRect(this.x, this.y, this.width, this.height);
        STAGE.strokeRect(this.x, this.y, this.width, this.height);        
    };
};

var welcomeMessage = function(messageString){
    this.message = messageString;
    this.addMessage = function(){
        STAGE.strokeText(this.message, this.x + 10, this.y + 10, this.width-10);
        console.log(this.message);
    };
};
welcomeMessage.prototype = new dialogBox();


This works as intended (or at least gives the appearance of working as intended) - see this fiddle.

However, the way I have to instantiate these objects seems rather inelegant:

var box1 = new dialogBox(20, 20, 300, 100);

var box2 = new welcomeMessage('hello there');
box2.x = 20;
box2.y = 140;
box2.width = 300;
box2.height = 100; // wouldn't it be great if I could pass these properties as args?


I wrote these constructors using the MDN Object.prototype reference and am following their example quite closely, but I've observed from reading around Stack Overflow / Code Review many examples where prototyping is used very differently, often in relation to getters and setters. This is leading me to question if I have quite grasped the 'proper' use of prototype.

Any feedback is welcome, but I am particularly interested in identifying any potential problems my approach could cause when applied to more complex situations.
The way you are approaching the problem is essentially correct. What you want to accomplish is also possible in a very straightforward way:

var welcomeMessage = function(messageString, xPosition, yPosition, width, height){
    this.message = messageString;
    this.x = xPosition;
    this.y = yPosition;
    this.width = width;
    this.height = height;
    this.addMessage = function(){
        STAGE.strokeText(this.message, this.x + 10, this.y + 10, this.width-10);
        console.log(this.message);
    };
};
welcomeMessage.prototype = new dialogBox();


In this way, the properties can be assigned through the constructor of the subclass as well. But we can go further. There is duplication between the constructors. We can eliminate this by calling the super constructor on the subclassed object:

var welcomeMessage = function(messageString, xPosition, yPosition, width, height){
    this.message = messageString;
    dialogBox.call(this, xPosition, yPosition, width, height);
    this.addMessage = function(){
        STAGE.strokeText(this.message, this.x + 10, this.y + 10, this.width-10);
        console.log(this.message);
    };
};
welcomeMessage.prototype = new dialogBox();


Now we have DRYed up our constructor code. This should work fine.



I just want to make a few additional points. First, rather than adding methods in the constructor, you should add them to the constructor's prototype:

dialogBox = function(...) {
    ...
}

dialogBox.prototype.draw = function() {
    ...
}


When you add methods in the constructor, they are recreated every time a new object is made, whereas if they are added to the prototype, they are created only once. Having them in the constructor also means that it has to be called to add them to a subclass. There may be reasons not to do this.

If your environment supports it, you should use Object.create(dialogBox.prototype) to set the prototype rather than new dialogBox(). This avoids calling the constructor just to set up inheritance. This is good in cases where the super class constructor does work or requires parameters be passed in.

That makes the final version:

var dialogBox = function(xPosition, yPosition, width, height){
    console.log('dialogBox Constructor');
    this.x = xPosition;
    this.y = yPosition;
    this.width = width;
    this.height = height;
};

dialogBox.prototype.draw = function() {
    STAGE.fillRect(this.x, this.y, this.width, this.height);
    STAGE.strokeRect(this.x, this.y, this.width, this.height);        
};

var welcomeMessage = function(messageString, xPosition, yPosition, width, height){
    this.message = messageString;
    dialogBox.call(this, xPosition, yPosition, width, height);
};
welcomeMessage.prototype = Object.create(dialogBox.prototype);
welcomeMessage.prototype.addMessage = function() {
    STAGE.strokeText(this.message, this.x + 10, this.y + 10, this.width - 10);
    console.log(this.message);
};


JSFiddle

As a side note, the prototype must be set before any new methods are added, so welcomeMessage.prototype = ... cannot come after you add any methods.