Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Professional JavaScript for Web Developers 2nd edition ISBN: 9780470227800
This is the forum to discuss the Wrox book Professional JavaScript for Web Developers, 2nd Edition by Nicholas C Zakas; ISBN: 9780470227800
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Professional JavaScript for Web Developers 2nd edition ISBN: 9780470227800 section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Display Modes
  #1 (permalink)  
Old February 24th, 2010, 12:15 AM
Registered User
 
Join Date: May 2006
Location: , , .
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Default Subclassing dynamic prototype pattern

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);
};
  #2 (permalink)  
Old February 25th, 2010, 12:42 PM
Registered User
 
Join Date: May 2006
Location: , , .
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Unhappy

Nobody has any thoughts?
  #3 (permalink)  
Old February 28th, 2010, 11:04 PM
nzakas's Avatar
Wrox Author
 
Join Date: Dec 2004
Location: Peabody, MA, USA.
Posts: 217
Thanks: 0
Thanked 5 Times in 5 Posts
Default

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.
__________________
Nicholas C. Zakas
Author, Professional JavaScript for Web Developers (ISBN 0764579088)
http://www.nczonline.net/
  #4 (permalink)  
Old February 28th, 2010, 11:20 PM
Registered User
 
Join Date: May 2006
Location: , , .
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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!
  #5 (permalink)  
Old March 6th, 2010, 03:56 PM
nzakas's Avatar
Wrox Author
 
Join Date: Dec 2004
Location: Peabody, MA, USA.
Posts: 217
Thanks: 0
Thanked 5 Times in 5 Posts
Default

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.
__________________
Nicholas C. Zakas
Author, Professional JavaScript for Web Developers (ISBN 0764579088)
http://www.nczonline.net/
  #6 (permalink)  
Old March 6th, 2010, 06:09 PM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default javascript way

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>

Last edited by PeterPeiGuo; March 6th, 2010 at 06:12 PM.
  #7 (permalink)  
Old March 7th, 2010, 01:40 AM
Registered User
 
Join Date: May 2006
Location: , , .
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Default

@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.
  #8 (permalink)  
Old March 7th, 2010, 10:57 AM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

You are welcome. javascript is quite different in this sense.
  #9 (permalink)  
Old March 7th, 2010, 04:25 PM
Registered User
 
Join Date: May 2006
Location: , , .
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Default

@ 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>
 


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
DirectoryInfo.GetFiles(pattern): search pattern fo arif_1947 VS.NET 2002/2003 1 October 19th, 2004 11:59 PM
Subclassing...Help Please! gede Pro VB 6 1 March 29th, 2004 08:53 AM
Adding prototype functions AgentSmith Javascript How-To 1 July 20th, 2003 09:41 AM



All times are GMT -4. The time now is 11:20 AM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.