www.webdeveloper.com
Results 1 to 6 of 6

Thread: OO + inheritance + Javascript = it is driving me crazy

  1. #1
    Join Date
    Oct 2011
    Posts
    2

    OO + inheritance + Javascript = it is driving me crazy

    please, expert coders, what's wrong with this code?

    Code:
    function inherit(c, p) {
    	var f = function(){};
    	f.prototype = p.prototype;
    	c.prototype = new f();
    	c.uber = p.prototype;
    	c.prototype.constructor = c;
    }
    
    
    function Parent(x, y) {
    	this.x = x;
    	this.y = y;
    	this.printf = function() {
    		console.log("(" + this.x + ", " + this.y + ")");
    	};
    }
    
    function Child(x, y) {
    	this.x = x;
    	this.y = y;
    	this.move = function(e) {
    		this.x++;
    		this.y*=2;
    		this.uber.printf();
    		e.preventDefault();
    	};
    }
    
    inherit(Child, Parent);
    
    child = new Child(0, 0);
    
    window.onkeyup = child.move;
    thanks in advance

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    JavaScript does not use inheritance, it uses delegation from prototype to object. I would have used anther approach. Your example simplified:
    Code:
    function Clone(){ }
    function clone(obj) {
        Clone.prototype = obj;
        return new Clone();
    }
    
    function Parent(x, y) {
    	this.x = x;
    	this.y = y;
    	this.printf = function() {
    		alert("(" + this.x + ", " + this.y + ")");
    	};
    }
    
    function Child(x, y) {
    		x++;
    		y*=2;
    	var parent=new Parent(x,y)
    	var object=clone(parent);
    	return object;
    }
    
    var child= Child(0,0);
    window.onclick =function(){child.printf()};

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by Kor View Post
    JavaScript does not use inheritance, it uses delegation from prototype to object.
    prototype inheritance is still inheritance, and if there is any delegation, it's the object that delegates missing ownProperty lookups to the prototype...


    the OP's change is not visible because he need to manipulate a style object, not a pure js object...

  4. #4
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    I agree with rnd me. Prototypal inheritance is still inheritance.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  5. #5
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    @sergiosvieira

    A couple problems here.

    The value of "this" inside a function can by anything, depending on how the function was invoked. When the "move" function is invoked as an onkeyup event handler, then "this" will be the window object instead of the child object that you expected. Here's how we can fix that.

    Code:
    function Child(x, y) {
    	this.x = x;
    	this.y = y;
    	this.move = function() {
    		this.x++;
    		this.y*=2;
    		this.uber.printf();
    	};
    }
    
    inherit(Child, Parent);
    
    child = new Child(0, 0);
    
    window.onkeyup = function (e) {
        // Invoke the "move" function using "child" as the "this" value.
        child.move();
    
        e.preventDefault();
    };
    Next, in the constructors, you create methods by assigning them directly to the new object. This causes problems, because your inheritance goes from prototype to prototype, but you didn't put anything inside the parent or child's prototype. Let's do that now.

    Code:
    function Parent(x, y) {
        // The x and y values are specific to each object,
        // so those are assigned in the constructor.
        this.x = x;
        this.y = y;
    }
    
    // printf is shared across all instances,
    // so it's assigned in the prototype.
    Parent.prototype.printf = function() {
        console.log("(" + this.x + ", " + this.y + ")");
    };
    
    function Child(x, y) {
    	this.x = x;
    	this.y = y;
    }
    
    inherit(Child, Parent);
    
    Child.prototype.move = function() {
        this.x++;
        this.y*=2;
        
        // No need for "uber" here.
        // Child.prototype inherits "printf" from Parent.prototype.
        // this.uber.printf();
        
        this.printf();
    };
    Now we have working code.

    Code:
    function inherit(c, p) {
        var f = function(){};
        f.prototype = p.prototype;
        c.prototype = new f();
        c.uber = p.prototype;
        c.prototype.constructor = c;
    }
    
    
    function Parent(x, y) {
        this.x = x;
        this.y = y;
    }
    
    Parent.prototype.printf = function() {
        console.log("(" + this.x + ", " + this.y + ")");
    };
    
    function Child(x, y) {
        this.x = x;
        this.y = y;
    }
    
    inherit(Child, Parent);
    
    Child.prototype.move = function() {
        this.x++;
        this.y*=2;
        this.printf();
    };
    
    child = new Child(0, 0);
    
    window.onkeyup = function (e) {
        child.move();
        e.preventDefault();
    };
    But we can still make this slightly better. Notice that you're repeating the same code in the child constructor as you had in the parent constructor. You can eliminate that repetition by invoking the parent constructor, using the current child object as the "this" value for the Parent function.

    Code:
    function Child(x, y) {
        Parent.call(this, x, y);
    }
    Last edited by Jeff Mott; 10-07-2011 at 11:00 AM.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  6. #6
    Join Date
    Oct 2011
    Posts
    2
    thanks, now I understand how this works in javascript.

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