JavaScript: Changing a class property

tumana · 02-08-2006, 07:39 AM

I was learning about OOP in JavaScript and I wrote this little script that defines an object, Robot, with a class property, a prototype property, and one prototype function. And a constructor, of course.

Code:

<script type="text/javascript">
<!--

// Class property
Robot.threeLawsSafe =  true;

// Prototype property
Robot.prototype.model = "BR-111";

// Prototype function
Robot.prototype.info = function() {
  with(document) {
    write("Name: " + this.name + "<br />");
    if(this.threeLawsSafe) {
      write("This robot is safe for the whole family.<br /><br />");
    }
    else {
      write("This robot might kill you and your whole family.<br /><br />");
    }
  }
}

// Robot Constructor
function Robot() {

}

// First Robot
var iRobot  = new Robot();
iRobot.name = "James";
iRobot.info();
// Robot.threeLawsSafe should still be set to true... but it's not. ??

// Second Robot
var evilRobot = new Robot();
evilRobot.name = "Matador";
// Robot.threeLawsSafe is now set to false
Robot.threeLawsSafe = false;
evilRobot.info();

// Print the status of the first Robot
iRobot.info();
// Robot.threeLawsSafe is understandably false now.

//-->
</script>

I expected the output to be the following

Code:

Name: James
This robot is safe for the whole family.

Name: Matador
This robot might kill you and your whole family.

Name: James
This robot might kill you and your whole family.

My reasoning was
1. Define object
2. Create first Robot, James, and print out his information.
3. Create a second robot, Matador, and override the class property Robot.threeLawsSafe to false.
4. Print out its information
5. Print out the 1st robot's info and the class property would be changed as well.

Instead, I got this

Code:

Name: James
This robot might kill you and your whole family.

Name: Matador
This robot might kill you and your whole family.

Name: James
This robot might kill you and your whole family.

It seems that before it even printed out the first object's info the second object already changed the class property Robot.threeLawsSafe to false.

Why? How do I make the script wait till the first object prints out his stuff before changing threeLawsSafe?

Thanks in advance.

<edit>
I just changed something [ever so tiny] in the script to make it more legible. It's the same script though.
</edit>

german · 02-14-2006, 07:18 AM

You're mistaking the scope of the variable "this". This code does what you want:

Code:

<script type="text/javascript">
<!--

// Class property
Robot.threeLawsSafe =  true;

// Prototype property
Robot.prototype.model = "BR-111";

// Prototype function
Robot.prototype.info = function() {
  with(document) {
    write("Name: " + this.name + "<br />");
    if(Robot.threeLawsSafe) {
      write("This robot is safe for the whole family.<br /><br />");
    }
    else {
      write("This robot might kill you and your whole family.<br /><br />");
    }
  }
}

// Robot Constructor
function Robot() {

}

// First Robot
var iRobot  = new Robot();
iRobot.name = "James";
iRobot.info();
// Robot.threeLawsSafe should still be set to true... but it's not. ??

// Second Robot
var evilRobot = new Robot();
evilRobot.name = "Matador";
// Robot.threeLawsSafe is now set to false
Robot.threeLawsSafe = false;
evilRobot.info();

// Print the status of the first Robot
iRobot.info();
// Robot.threeLawsSafe is understandably false now.

//-->
</script>

tumana · 02-15-2006, 01:35 AM

Wow! That makes sense. To get the value of PI, I wouldn't write

PHP Code:



var x = this.PI;

I would write

PHP Code:



var x = Math.PI;

Thanks!