www.webdeveloper.com
Results 1 to 3 of 3

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

  1. #1
    Join Date
    Jan 2012
    Posts
    5

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

    Hello,

    I'm working currently on following snippet of code:

    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:
    Code:
    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:
    Code:
    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!

  2. #2
    Join Date
    Mar 2009
    Posts
    485
    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:

    Code:
    /* 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:

    Code:
    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.

  3. #3
    Join Date
    Jan 2012
    Posts
    5
    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:
    Code:
    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:
    Code:
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles