Javascript inheritance

[NaReN]

I'm just reading up on OO Javascript but I just can't seem it to work

Here's what my code looks like :

function initXML() {
var myXML = new xmlDocument("<items><item>Apple</item><item>orange</
item></items>");
myXML.getItems();
}
function xmlDocument( aString ){
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(aString, "text/xml");
return xmlDoc ;
}

xmlDocument.prototype.getItems(){
var items = xmlDoc.evaluate("//item",xmlDoc, null,
XPathResult.ANY_TYPE,null);
var thisItem = items.iterateNext();
while (thisItem) {
thisItem = items.iterateNext();
}
}

However, when I try it out in FireFox 2 and call initXML I get :
Error: myXML.getItems is not a function

The above given way of inheritance works fine for user-defined objects
but gets stuck whenever the constructor returns a system-defined
object..

Any idea what I'm doing wrong ?

 

[RobG]

I'm just reading up on OO Javascript but I just can't seem it to work

Here's what my code looks like :

function initXML() {
var myXML = new xmlDocument("<items><item>Apple</item><item>orange</
item></items>");
myXML.getItems();
}
function xmlDocument( aString ){
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(aString, "text/xml");
return xmlDoc ;

}

xmlDocument.prototype.getItems(){

That will (attempt to) call getItems(), I think you want to assign a
function reference to it:

xmlDocument.prototype.getItems = function(){ ... }


You shouldn't assume that you can modify host objects or their
prototypes - test thoroughly.

 

[NaReN]

That will (attempt to) call getItems(), I think you want to assign a
function reference to it:

xmlDocument.prototype.getItems = function(){ ... }

You shouldn't assume that you can modify host objects or their
prototypes - test thoroughly.

Oops, I did use xmlDocument.prototype.getItems = function(){ ... } ;
Must have accidentally deleted the 'function' keyword while copy
pasting, sorry !

Here's my code again :

function initXML() {
var myXML = new xmlDocument("<items><item>Apple</
item><item>orange</
item></items>");
myXML.getItems();
}
function xmlDocument( aString ){
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(aString, "text/xml");
return xmlDoc ;

}

xmlDocument.prototype.getItems = function(){
var items = xmlDoc.evaluate("//item",xmlDoc, null,
XPathResult.ANY_TYPE,null);
var thisItem = items.iterateNext();
while (thisItem) {
thisItem = items.iterateNext();
}
}


Thanks Rob ! Now, I wanted to extend default system objects , how
would I go about doing it ?

 

[RobG]

Oops, I did use xmlDocument.prototype.getItems = function(){ ... } ;
Must have accidentally deleted the 'function' keyword while copy
pasting, sorry !

Here's my code again :

function initXML() {
var myXML = new xmlDocument("<items><item>Apple</
item><item>orange</
item></items>");

Manually wrap code at about 70 characters, auto-wrapping will nearly
always introduce errors. Use 2 spaces for indents too.

myXML.getItems();
}
function xmlDocument( aString ){
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(aString, "text/xml");

When you call this function as a constructor, it will return the newly
created object. So that you can conveniently set properties of the
new object, it is set as the value of the function's this keyword.
You want to return an object that has an "xmlDoc" property, so:

this.xmlDoc = parser.parseFromString(aString, "text/xml");

return xmlDoc ;

And since the new object is returned when called as a constructor,
there is no need for a return statement - just remove it.

}

xmlDocument.prototype.getItems = function(){
var items = xmlDoc.evaluate("//item",xmlDoc, null,

The variable 'xmlDoc' is a property of the object calling this
function along the prototype chain. To get that property, use the
this keyword:

var items = this.xmlDoc.evaluate("//item", this.xmlDoc, null,

XPathResult.ANY_TYPE,null);
var thisItem = items.iterateNext();
while (thisItem) {
thisItem = items.iterateNext();
}
}

Thanks Rob ! Now, I wanted to extend default system objects , how
would I go about doing it ?

You might be able to find documentation that tells you whether you can
or not, but you may find it difficult. If you can't find any, try it
and see. Then ask here (or wherever) to see if someone else knows.

Here is a working version:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>xmlDoc</title>
<style type="text/css"></style>
<script type="text/javascript">
//<![CDATA[
function initXML(s) {
var myXML = new xmlDocument(s);
myXML.getItems();
}

function xmlDocument( aString ){
var parser = new DOMParser();
this.xmlDoc = parser.parseFromString(aString, "text/xml");
}

xmlDocument.prototype.getItems = function(){
var items = this.xmlDoc.evaluate("//item", this.xmlDoc, null,
XPathResult.ANY_TYPE, null);
var thisItem = items.iterateNext();
while (thisItem) {

// Debug...
alert(thisItem.textContent);

thisItem = items.iterateNext();
}
}

initXML('<items><item>Apple</item><item>orange</item></items>');
//]]>
</script>
</head>
<body>
<div></div>
</body></html>

 

[NaReN]

Thanks a lot Rob, that helped a lot.