Subclassing dynamic prototype pattern

bcamp1973 · February 24th, 2010, 01:15 AM

I'm trying to wrap my head around OO programming in general and more specifically as it applies to JS. The Professional Javascript for Web Developers book is pretty awesome and I feel I've learned a lot. However, this has me stumped. Hopefully what i'm trying to do is clear enough for someone to lend me a hand??

Code:

var Vehicle = function(options){

	// Public Properties
	this.wheels = options.wheels;
	this.color = options.color;
	this.engine = options.engine;

	// Public Methods
	if(typeof Vehicle._initialized == 'undefined'){

		Vehicle.prototype.setWheels = function(wheels){
			this.wheels = wheels;
		};
		Vehicle.prototype.setColor = function(color){
			this.color = color;
		};
		Vehicle.prototype.setEngine = function(engine){
			this.engine = engine;
		};

		Vehicle._initialized = true;
	}
};

var Bike ={}
Bike.prototype = new Vehicle({wheels:2,engine:false});

window.onload = function(){
	var myBike = new Bike({
		color:'red'
	});
	alert(myBike.wheels);
};

bcamp1973 · February 25th, 2010, 01:42 PM

Nobody has any thoughts?

nzakas · March 1st, 2010, 12:04 AM

I'd like to help, but pasting a bunch of code without any questions doesn't really tell me what information you're looking for. When asking for help in these forums, it's best to state 1) the background of what you're trying to do, 2) what you expected to happen when this code is run and 3) what's actually happening.

bcamp1973 · March 1st, 2010, 12:20 AM

You're right, i apologize. I didn't explain myself well at all. I guess my issue is with prototype inheritance. I've done (very little) OO development in PHP and extending a class felt relatively straight forward as i remember (been a while). What i want to do is create a superclass, then create a few subclasses from that superclass to represent more specific instances of that object. Then i would usually create my objects from the subclasses and seldom, if ever, use the superclass. For example, i might have a Button() superclass that accepts basic settings like callback, name etc. Then subclasses like InputButton() or LinkButton() that inherit from Button() and apply more specific properties, such as the markup for the button element (<input/>,<a href/>) etc. I hope that makes a little more sense? ...and I hope i'm actually grasping what this whole OO thing is about and that I'm not way off base

Thanks for replying!

nzakas · March 6th, 2010, 04:56 PM

You're right, inheritance in JavaScript isn't straightforward and is very different than any other language. I don't think one can explain in a forum post, which is why I wrote the book. :)

I'm afraid to say I'm still not sure how your question relates to the code you posted earlier. I can tell you that this:

Code:

var Bike = {};
Bike.prototype = new Vehicle({wheels:2,engine:false});

is probably not doing what you think it does. The prototype property only exists on functions, and Bike is an object.

PeterPeiGuo · March 6th, 2010, 07:09 PM

Below is one way to define super class and sub-class in javascript:

Code:

<html>
<head>
<script type="text/javascript">

function Vehicle() //super class
{
	this.color = "some color";
	this.wheel = "some number";
}
  
Bike.prototype = new Vehicle; //sub-class

function Bike()
{
	this.wheel = 2;
	this.speed = "some speed";
}

function showBike() { 	
	bike = new Bike;
	alert(bike.wheel); 
	alert(bike.color); 
	alert(bike.speed)
}
</script>
</head>
<body onload="showBike()">
</body>
</html>

bcamp1973 · March 7th, 2010, 02:40 AM

@nzakas - sorry my example is so bad, eventually I'll get my head wrapped around this stuff :)

@PeterPeiGuo - Thank you for that example! I think that's what I'm looking for. I'll have to play with it a little to get a grip on how it's all working etc.

PeterPeiGuo · March 7th, 2010, 11:57 AM

You are welcome. javascript is quite different in this sense.

bcamp1973 · March 7th, 2010, 05:25 PM

@ PeterPeiGuo, i tried your example and it worked for me. Now i'm trying to take it a step further and i've already screwed things up again ;) I'm trying to use a namespace. is it not possible to namespace the subclass in this case?

Code:

<html>
<head>
	<script type="text/javascript">
		//<![CDATA[
		var ABC = {};

		ABC.Vehicle = function(){
			this.color = "some color";
			this.wheel = "some number";
		};

		ABC.Bike.prototype = new ABC.Vehicle;

		ABC.Bike = function(){
			this.wheel = 2;
			this.speed = "some speed";
		}

		function showBike(){
			var myBike = new ABC.Bike;
			alert(myBike.wheel); 
			alert(myBike.color); 
			alert(myBike.speed)
		}
		//]]>
	</script>
</head>

<body onload="showBike()">

</body>
</html>