Subclassing/Prototyping

[shadowayex]

I'm learning OOP with JavaScript for a particular JS project I'm working on, and I ran into an issue. I know how to subclass/prototype, but my attempt to do it failed.I have one object that I set up like so:

function VerticalMenu(ul) {				//Properties				this.menuItems = new Array();				//Construction				for(i in ul.childNodes) {					if(ul.childNodes[i].nodeName == "LI") {						this.menuItems[this.menuItems.length] = new menuItem(ul.childNodes[i]);					}				}				for(i in this.menuItems) {					this.menuItems[i].style.backgroundColor = "red";				}			}

and another object that looks like so:

function SubMenu(ul) {				//Methods				this.flyIn = function() {									}							}			SubMenu.prototype = new VerticalMenu();

Note two things: A) these objects aren't done and don't really do much at the moment, and B ) I have the subclassing/prototyping bit at the bottom of the code tag.On FireBug, I get the errorul is undefined for(i in ul.childNodes) { which denotes the fifth line of the first code block.Now, I understand why this is happening, but I am unsure how to get around this. I would love to subclass/prototype the first object, as the second one will just be a version of that with two extra methods.Can anyone help?

[ShadowMage]

Are you trying to set a property of of the SubMenu equal to the VerticalMenu function or to the object that it returns?BTW, your prototyping syntax is wrong. It should be:SubMenu.prototype.propertyOrFunctionNameEdit: Actually I don't think you need to use prototype. SubMenu is your own custom class so you should be able to just do it this way:SubMenu.propertyOrFunctionNameUnless prototype is the property you're trying to add.....

[thescientist]

perhaps i needs to be declared first?

[shadowayex]

http://articles.sitepoint.com/article/orie...programming-2/4^ That is the tutorial I used to learn about subclassing/prototyping. I'm not sure if his syntax is right, or even if his stuff works. I never tried.

[justsomeguy]

You haven't really explained what the code above is trying to accomplish. Are you trying to set the prototype of SubClass to the same as VerticalMenu? What you're doing is setting the prototype to an instance of the class, not the class itself.

[shadowayex]

Well, my goal is to do a subclass similar to how subclassing in Java works. The SubMenu class should be a VerticalMenu with a couple extra methods. So, when I created a SubMenu, the SubMenu constructor should do what VerticalMenu's does when a VerticalMenu is created, and then the stuff inside of itself. Does that make sense?

[justsomeguy]

Yes, that is called inheriting or extending a class. There should be several articles about how to do it yourself:http://www.google.com/search?client=opera&...-8&oe=utf-8You could also download a framework like Ext Core to help with this:http://www.sencha.com/products/core/download.phpIf you were using Ext then you could do something like this:

function VerticalMenu(ul) {	alert('VerticalMenu constructor');		//Properties	this.menuItems = new Array();	//Construction	//for(i in ul.childNodes) {	for (var i = 0; i < ul.childNodes.length; i++) {		if(ul.childNodes[i].nodeName == "LI") {			this.menuItems[this.menuItems.length] = new menuItem(ul.childNodes[i]);		}	}	//for(i in this.menuItems) {	for (var i = 0; i < this.menuItems.length; i++) {		this.menuItems[i].style.backgroundColor = "red";	}}SubMenu = Ext.extend(VerticalMenu, {  a_var: true,  constructor: function(ul)  {	alert('SubMenu constructor');	SubMenu.superclass.constructor.call(this, ul);  },  flyIn: function()  {	alert('flyIn high again');	this.another();  },  another: function()  {	if (this.a_var)	  alert('it\'s true!');  }});var s = new SubMenu(document.createElement('ul'));s.flyIn();

The documentation for Ext.extend is on this page, in the Methods section:http://www.sencha.com/products/core/docs/?class=Ext