GrahamJAT Posted June 7, 2008 Share Posted June 7, 2008 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 More sharing options...
Jesdisciple Posted June 7, 2008 Share Posted June 7, 2008 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 More sharing options...
jeffman Posted June 7, 2008 Share Posted June 7, 2008 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 More sharing options...
GrahamJAT Posted June 8, 2008 Author Share Posted June 8, 2008 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 More sharing options...
jeffman Posted June 8, 2008 Share Posted June 8, 2008 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 More sharing options...
Jesdisciple Posted June 8, 2008 Share Posted June 8, 2008 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 More sharing options...
GrahamJAT Posted June 8, 2008 Author Share Posted June 8, 2008 . . 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.