Help with OOP javascript

**parvez** · May 23, 2007 22:03

Hi,

I am trying to learn object oriented javascript and I ran into a problem, which I can't understand. To keep it simple I created a dummy object and then placed everything into one html file, which is below:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Object Test</title>

<script type="text/javascript">

function ObjectTest()
{
	var height ;
	//CONSTRUCTOR BEGIN
	this.setHeight(250) ;
	
	//CONSTRUCTOR END
	
	//PREVILIGED FUNCTION BEGIN
	this.setHeight = function(aHeight)
	{
		height = aHeight ;
		alert(height) ;
	}
	//PREVILEGED FUNCTION END
}
</script>

</head>

<body>

<script type="text/javascript">
	var myObj = new ObjectTest() ;
	//myObj.setHeight(250) ;
</script>

</body>
</html>

If you try to run this html file, it will create an object of ObjectTest. In the constructor,

Code JavaScript:

this.setHeight(250) ;

line is giving the actual error. I get an error that says this.setHeight is not a function.

But if you comment that line and uncomment

Code JavaScript:

myObj.setHeight(250) ;

inside the body tag, then, everything works fine.

My question is how do I call previleged methods such as setHeight() from the constructor of the javascript object.

Thank you so much in advance for your help.

**AWD1** · May 23, 2007 22:31

You could always pass the object to the function itself.

Something like this (modify as appropriate to your situation).

Code:

<div id="someDiv"><a href="#" onclick="ObjectTest(document.getElementById('someDiv'))">Link</a></div>

You'd have to modify your function to receive the parameter being passed to it.

Code:

function ObjectTest(someObject) {

Try running with the ball from there and see where it takes you.

**abb** · May 24, 2007 01:11

Hi parvez, Javascript objects are not classes, they are just objects, the way you wrote your object, it looks like a class, below is how to make an object contructor then extend that contructor using prototypal inheritance, check out the Douglas Crockford talks, especially the Advanced javascript ones, he talks about this stuff specifically.

Code:

// Create object Constructor
var TestObj = function () {

    this.height = 250;
    this.width = 250;
};

// Prototypal inheritance / extension (using object literal syntax)
TestObj.prototype = {

    setHeight: function (aHeight) {

        this.height = aHeight;
    },
    showHeight: function () {

        alert(this.height);
    }
};

// This way is a lot more long winded
TestObj.prototype.setWidth = function (aWidth) {

  this.width = aWidth;
}

TestObj.prototype.showWidth = function (aWidth) {

  alert(this.width);
}


// create instance / initialize object
var newRun = new TestObj();
newRun.setHeight(370);
newRun.showHeight();

User Tag List

Thread: Help with OOP javascript

Thread Tools

Display

Help with OOP javascript

Bookmarks

Bookmarks

Posting Permissions