Objects in JavaScript
by K. Yue, revised September 29, 2000
copyright 2000

Classes and Objects

• JavaScript is an object-based language that has syntax somewhat similar to Java.
• Properties can be added to an object any time. This is similar to Perl.
• The for/in loop can be used to iterate through object properties.
• The new operator can be used to create a simple, empty object.

Example: SimpleObject.html

<script>
var myObject = new Object(); // won't work without this.
myObject.color = "red";
myObject.count = 5;
myObject.name = "CSCI 4333";

document.write("Color is: " + myObject.color + "<BR>");
document.write("Name is: " + myObject["name"] + "<BR>");
document.write("ABC is: " + myObject.ABC + "<BR>");
document.write("DEF is: " + myObject["DEF"] + "<BR>");

for (prop in myObject) {
    document.write(prop + " value: " + myObject[prop] + "<BR>");
}
</script>

• Note that the properties of an object can be accessed using the associative array syntax.
• To create objects with proper initialization, a constructor can be used.
• A constructor has the following properties.
  • It is invoked by the new operator.
  • It is passed a reference to an empty object by the key word this.
  • It does not return any value.

Example: (Rectangle.html)

<script>
//    Define the constructor.
//    Note how it initializes the object referred to by "this"
function Rectangle(w, h) {
    this.width = w;
    this.height = h;
}

//    Invoke the constructor to create two rectangle objects.

//    Pass the width and height to the constructor, so it
//    can initialize each new object appropriately.
rect1 = new Rectangle(2, 4);
rect2 = new Rectangle(8.5, 11);
</script>

• Methods are similar to functions except that
  • They are called using the object syntax.
  • The keyword this can be used within the method body.
• Method definitions are usually initialized in the constructors.

Example: from Flanaglan (Rectangle1.html)

<script>
//    First, define some functions that will be used as methods
function Rectangle_area() { return this.width * this.height; }
function Rectangle_perimeter() { return 2*this.width + 2*this.height; }
function Rectangle_set_size(w,h) { this.width = w; this.height = h; }
function Rectangle_enlarge() { this.width *= 2; this.height *= 2; }
function Rectangle_shrink() { this.width /= 2; this.height /= 2; }

//    Then define a constructor method for our Rectangle objects.
//    The constructor initializes properties, and also assigns methods.
function Rectangle(w, h) {
    //    initialize object properties
    this.width = w;
    this.height = h;

     //    define methods for the object
    this.area = Rectangle_area;
    this.perimeter = Rectangle_perimeter;
    this.set_size = Rectangle_set_size;
    this.enlarge = Rectangle_enlarge;
    this.shrink = Rectangle_shrink;
}

//    Invoking methods.
r = new Rectangle(2,2);
a = r.area();
r.enlarge();
p = r.perimeter();
</script>

• A prototype object is associated with the constructor of a class.
• When the first object of the class is created, a prototype object of the class is automatically created.
• The properties and methods of the prototype object is shared by every object of the class.
• If a property is not defined in an object, JavaScript will attempt to look at the property definition of the prototype object of the same class.

Example: (Circle1.html)

<script>
//    Define a constructor method for our class.
//    Use it to initialize properties that will be different for
//    each individual circle object.
function Circle(x, y, r) {
    this.x = x; // the X coordinate of the center of the circle
    this.y = y; // the Y coordinate of the center of the circle
    this.r = r; // the radius of the circle
}

//    Create and discard an initial Circle object.
//    Doing this forces the prototype object to be created
new Circle(0,0,0);

//    Now define a constant; a property that will be shared by
//    all circle objects. Actually, we could just use Math.PI,
//    but we do it this way for the sake of example.
Circle.prototype.pi = 3.14159;

//    Now define some functions that perform computations on circles
//    Note the use of the constant defined above
function Circle_circumference() { return 2 * this.pi * this.r; }
function Circle_area() { return this.pi * this.r * this.r; }

//    Make these functions into methods of all Circle objects by
//    setting them as properties of the prototype object.
Circle.prototype.circumference = Circle_circumference;
Circle.prototype.area = Circle_area;

//    Now define a default property. Most Circle objects will share this
//    default value, but some may override it by setting creating their
//    own unshared copy of the property.
Circle.prototype.url = "images/default_circle.gif";

//    Now, create a circle object, and use the methods defined
//    by the prototype object
c = new Circle(0.0, 0.0, 1.0);
a = c.area();
p = c.circumference();
</script>

• Prototype objects can be used to define static variables and methods.
• Strictly speaking, JavaScript does not support a strong notion of the class concept. It also does not support inheritance.
• Data members and methods in Java/C++ are defined in JavaScript as below.
• Instance variables: Properties of objects. Maybe defined in the constructor.
• Instance methods: A method property of the prototype object, or defined in the constructor as a method.
• Class variables: Defined as a property of the constructor function.
• Class methods: Defined as a method property of the constructor function.

Example: (Circle2.html)

<script>
function Circle(radius) {    //    the constructor
    //    an instance variable defined and initialized in the constructor
    this.r = radius;
}

//    a class variable: a property of the constructor function
Circle.PI = 3.14159;

//    Here is a function that computes a circle area.
function Circle_area() { return Circle.PI * this.r * this.r; }

//    Here we make the function into an instance method by assigning it
//    to the prototype object of the constructor. We have to
//    create and discard one object before the prototype object exists
new Circle(0);
Circle.prototype.area = Circle_area;

//    Here's another function. It takes two circle objects arguments and
//    returns the one that is larger (has the larger radius).
function Circle_max(a,b) {
    if (a.r > b.r) return a;
    else return b;
}

//    Since this function compares two circle objects,
//    we make it into a class method
//    by assigning it to the constructor function:
Circle.max = Circle_max;

//    Here is some code that uses each of these fields:
c = new Circle(1.0); // create an instance of the Circle class
c.r = 2.2; // set the r instance variable
a = c.area(); // invoke the area() instance method
x = Math.exp(Circle.PI); // use the PI class variable in our own computation.
d = new Circle(1.2); // create another Circle instance
bigger = Circle.max(c,d); // use the max() class method.
</script>

• There are special methods associated with every object. These functions are automatically called by JavaScript in manipulation of the objects:
  • toString: convert the object to a string
  • valueOf: convert the object to a number or a non-object.
  • assign: used when an object assignment is invoked.

Example: Complex.html

<script>
function Complex(x,y) {
    this.x = x;    //    real part of complex number
    this.y = y;    // imaginary part of complex number.
}

//    force the prototype object to be created.
new Complex(0,0);

//    define some methods
Complex.prototype.valueOf = new Function("return this.x");
Complex.prototype.toString = new Function
("return '{'+this.x+','+this.y+'}'");

//    create new complex number object
c = new Complex(4,1);

//    Now rely on the valueOf() operator to treat it like a real number
x = c * 2; // x = 8
x = Math.sqrt(c); // x = 2
</script>