Creating child object (within a parent) that takes over parent's properties

This site is best viewed in a modern browser with JavaScript enabled.

Creating child object (within a parent) that takes over parent's properties

ambient1984

Hello,

I'm working currently on following snippet of code:

/****************************************************************
 * UserInterface
 ****************************************************************/

function UserInterface() {
    this.editability = 0;
    this.filtrability = 0;
    this.userInterfaceType = "";
}

UserInterface.prototype.setEditability = function(intValue) {
    this.editability = intValue;
};

UserInterface.prototype.getEditability = function() {
    return this.editability;
};

UserInterface.prototype.setFiltrability = function(intValue) {
    this.filtrability = intValue;
};

UserInterface.prototype.getFiltrability = function() {
    return this.filtrability;
};

UserInterface.prototype.setUserInterfaceType = function(strValue) {
    this.userInterfaceType = strValue;

if (this.userInterfaceType === "inputField")
    UserInterfaceInputField.call(this);         
else if (this.userInterfaceType === "textArea")
    UserInterfaceTextArea.call(this);
};

/****************************************************************
 * UserInterfaceInputField
 ****************************************************************/

UserInterfaceInputField.prototype = new UserInterface();
UserInterfaceInputField.prototype.constructor = UserInterfaceInputField;

function UserInterfaceInputField() {
    this.fieldLength = 20;
}

UserInterfaceInputField.prototype.setFieldLength = function(intValue) {
    this.fieldLength = intValue;
};

UserInterfaceInputField.prototype.getFieldLength = function() {
    return this.fieldLength;
};

/****************************************************************
 * UserInterfaceTextArea
 ****************************************************************/

UserInterfaceTextArea.prototype = new UserInterface();
UserInterfaceTextArea.prototype.constructor = UserInterfaceTextArea;

function UserInterfaceTextArea() {
    this.areaLength = 20;
    this.areaHeight = 2;
}

UserInterfaceTextArea.prototype.setAreaLength = function(intValue) {
    this.areaLength = intValue;
};

UserInterfaceTextArea.prototype.getAreaLength = function() {
    return this.areaLength;
};

UserInterfaceTextArea.prototype.setAreaHeight = function(intValue) {
    this.areaHeight = intValue;
};

UserInterfaceTextArea.prototype.getAreaHeight = function() {
    return this.areaHeight;
};

The aim is to be able to use the invocation as in the code below:

var ui = new UserInterface();
ui.setEditability(1);
ui.setFiltrability(1);
ui.setUserInterfaceType("inputField");
setFieldLength(50);          //Error "ui.setFieldLength is not a function"
alert(ui.getFieldLength()); //Error "ui.getFieldLength is not a function"

I know that I could simply add additional property and create an property object like here:

UserInterface.prototype.setUserInterfaceType = function(strValue) {
    this.userInterfaceType = strValue;

if (this.userInterfaceType === "inputField")
    this.interface = new UserInterfaceInputField();      
else if (this.userInterfaceType === "textArea")
    this.interface = new UserInterfaceTextArea();
};

but I don't want then to refer to subclasses' methods and properties through additional property (UserInterface.interface).

My current solution is to call a given subclass with a scope of parent class with a help of "switching" method UserInterface.setUserInterfaceType(). As I have checked the subclass' constructor is indeed invoked, but the ui var in the code still refers to the class UserInterface..

What am I missing and how to achieve my goal?

Thank you for help!

Tcobb

For something like you're trying to do there is a way to accomplish what you are after without having to fiddle around with the constructors. Consider the following:

/* The first two args may be either Constructor functions or currently existing
objects, mixed however you like.  Any named property or function in 'expander'
that does not exist in 'main' will be added to the object generated by this
'blender' function.  If they both have a property with the same name, the
generated object will retain the value/function in main, unless, the
'overWrite' arg is set to true in which case the definition in 'expander'
will apply.*/

function blender(main, expander, overWrite){
    var x, y, i;
    if(overWrite !== true){
	overWrite = false;
    }
    if(typeof(main) == 'function'){
	x = new main();
    }
    else{
	x = main;
    }
    if(typeof(expander) == 'function'){
	y = new expander();
    }
    else{
	y = expander;
    }
    for(i in y){
	if(overWrite && x[i]){
	    x[i] = y[i];
	}

if(!x[i]){
    x[i] = y[i];
}
}
return x;

}

Without changing any of your code in the first block of your initial post, you can now change the second block as follows:

var ui = new UserInterface();
//!!!CHANGES
ui = blender(ui, UserInterfaceInputField); 
ui = blender(ui,UserInterfaceTextArea);
// RESUME YOUR CODE
ui.setEditability(1);
ui.setFiltrability(1);
ui.setUserInterfaceType("inputField");
ui.setFieldLength(50);          //Error "ui.setFieldLength is not a function"
alert(ui.getFieldLength()); //Error "ui.getFieldLength is not a function"

When I run it I don't get any errors.

ambient1984

TCobb thanks for help - your advice gave me idea for a complete solution :-)

After some playing around I got to the following extend funtion in Object object:

Object.prototype.extend = function(givingObject) {
    //extension for properties
    for(var propertyName in givingObject)
        if(givingObject.hasOwnProperty(propertyName))
            this[propertyName] = givingObject[propertyName];

//extension for methods
for(var methodName in givingObject.constructor.prototype)
    if(givingObject.constructor.prototype.hasOwnProperty(methodName)  //eliminate methods inherited from parent prototype
       && typeof givingObject[methodName] === "function"      //eliminate properties inherted from parent prototype, basically the ones created by assigment Child.prototype = new Parent()
       && !this.constructor.prototype[methodName])             //eliminate other methods that receiving Class may have so they are not overwritten, basically the constructor() one, created by assigment Child.prototype.constructor = Parent       
    {
        //alert(propertyName);
        this.constructor.prototype[methodName] = givingObject.constructor.prototype[methodName];
    }
};

And the final shape of method where I need it:

UserInterface.prototype.setUserInterfaceType = function(strValue) {
    this.userInterfaceType = strValue;

if (this.userInterfaceType === "inputField")
    this.extend(new UserInterfaceInputField());       
else if (this.userInterfaceType === "textArea")
    this.extend(new UserInterfaceTextArea());       
};

EOT.