Jump to content

Object Orientated Code Problem


GrahamJAT
 Share

Recommended Posts

Hi all.I am defing a simple object 'Box' with 'left', 'right', 'top' & 'bottom' properties; and want to define additional dependant properties, such as 'width', by adding Methods.I have been following the w3schools tutorials on Javascript Objects, plus other sources, and am completely stumped on this. :) My code does not produce the results I expect, even after trying all sorts of configurations. The results are not what I want or expect, but they are consistantly produced by IE, FF and Opera. No errors are reported.The listings I've posted here are two typical ways I have read about for adding Methods to Objects:

<html><script type="text/javascript">function Box(){  this.left  this.right  this.top  this.bottom  this.width = boxwidth}function boxwidth(){  return this.right - this.left}</script><body><script type="text/javascript">myBox = new BoxmyBox.left=10myBox.right=30alert("Box left = " + myBox.left + "\nBox width = " + myBox.width)</script></body></html>

<html><script type="text/javascript">function Box(){  this.left  this.right  this.top  this.bottom}Box.prototype.width = function(){return this.left}</script><body><script type="text/javascript">myBox = new BoxmyBox.left=10myBox.right=30alert("Box left = " + myBox.left + "\nBox width = " + myBox.width)</script></body></html>

Both listings produce the following alert:

Box left = 10Box width = function boxwidth(){ return this.right - this.left;}

Whereas, I obviously want to produce the following alert:

Box left = 10Box width = 20

Can anyone see where I am going wrong?

Link to comment
Share on other sites

You'll need to call the method; otherwise it will give its value as a function data type (like a number or string data type).

alert("Box left = " + myBox.left + "\nBox width = " + myBox.width())

EDIT: And Dad's code demonstrates a better way to assign a method. It's better because it's cleaner, only using one identifier and not cluttering the global namespace.

Link to comment
Share on other sites

function Box(){	this.left = null;	this.right = null;	this.top = null;	this.bottom = null;	this.width = function (){		return this.right - this.left;	}}b = new Box();b.right = 100;b.left = 40;alert ( b.width() );

Link to comment
Share on other sites

You'll need to call the method; otherwise it will give its value as a function data type (like a number or string data type).
alert("Box left = " + myBox.left + "\nBox width = " + myBox.width())

Thanks Jesdisciple, thats now working. Greeeaaat!!The way of doing it that DeadresDad demonstrates is one of the many ways I tried - but unsuccessfully. Thanks guys, you're a great help.Now onwards & forwards :) :)
Link to comment
Share on other sites

:) Worked for me! I ran it before I posted. Honest. Probably you just missed a paren like Chris pointed out. The prototype thing, btw, is mostly for messing with predefined objects, DOM objects, etc. Like if you wanted to add some PHP-type methods to all your arrays.
Link to comment
Share on other sites

LOL, I think he means that he tried it that way except for the paren mistake... Not that your code is messed up but that he tried that method assignment construct (so he wasn't being lazy or anything like that).EDIT: And actually the prototype thing is more efficient than this.prop assignments within the constructor because it only happens one time. But this.prop has access to "private" stuff within the constructor while still being publicly accessible. See http://javascript.crockford.com/private.html

Link to comment
Share on other sites

. . I think he means that he tried it that way except for the paren mistake... Not that your code is messed up . . .
Yep, thats right, Jesdisciple. As I said in my original posting ". . . even after trying all sorts of configurations." That was one of them.Thanks to you both for your help lads! :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...