Objects
An object is a collection of named data called properties.
1 Creation of objects
1.1 Using new Object()
Not recommended because there is no concept of related objects ("class").
var rectangle = new Object();
rectangle.width = 200; // property 'width'
rectangle.height = 100; // property 'height'
// Test:
document.writeln("width = " + rectangle.width);
document.write("height = " + rectangle.height);
There is no concept of "Rectangle". A second Rectangle object can have completely different properties.
1.2 Object Literal
A comma-separated list of name:value pairs enclosed in {}:
var rectangle = {width: 220, height: 120};
// Test:
document.writeln("width = " + rectangle.width);
document.writeln("height = " + rectangle.height);
Object literals are often used for static constant objects, but they are equivalent to objects created with the new operator. Special object literals are the null object and the empty object.
var x0 = null;
var x1 = {};
var EMPTY = {};
// Test:
if (!x0) {
document.writeln("x0 = " + x0);
}
if (x1.toString() == EMPTY.toString()) {
document.write("x1 = " + x1);
}
1.3 Object Constructor
The preferred way for dynamic objects and object hierarchies.
function Rectangle(width, height) {
this.width = width;
this.height = height;
}
var rectangle = new Rectangle(230, 130);
// Test:
document.writeln("width = " + rectangle.width);
document.write("height = " + rectangle.height);
The property names may be string literals. The property values may be other objects (nested objects) or other expressions.
2 Properties
2.1 Setting and Getting Properties
rectangle.width = 1;
document.writeln("width = " + rectangle.width);
rectangle["width"] = 2;
document.writeln("width = " + rectangle.width);
var w = "width";
rectangle[w] = 3;
document.write("width = " + rectangle.width);
// rectangle.w WRONG
// rectangle[width] WRONG
2.2 Own and Inherited Properties
Each object inherits properties and methods from the top Object. Object has at least two properties constructor and prototype. Our rectangle has 2 own properties width and height and 2 inherited properties constructor and prototype.
var rectangle = new Rectangle(10, 20);
document.writeln("width = " + rectangle.width);
document.writeln("height = " + rectangle.height);
document.writeln("constructor = " + rectangle.constructor);
document.write("prototype = " + rectangle.prototype);
2.3 Iteration over properties
for (var prop in rectangle) {
document.writeln(prop + "=" + rectangle[prop]);
}
Only own properties are "enumerated";
2.4 Class ("static") properties
Properties that are common for all instances of a "class" are implemented as properties of the constructor.
Rectangle.ZERO = new Rectangle(0, 0);
// Test:
document.writeln("width = " + Rectangle.ZERO.width);
document.write("height = " + Rectangle.ZERO.height);
3 Methods
3.1 Instance Methods
Instance methods are functions associated with object instances. They are implemented as properties of prototypes:
Rectangle.prototype.area = function() {
return this.width * this.height;
};
// Test:
var rectangle = new Rectangle(5, 10);
document.write("area = " + rectangle.area());
3.2 Class ("static") Methods
Class methods are functions associated with classes. They do not have access to instance properties. Class methods are implemented as properties of prototypes:
Rectangle.numVertices = function() {
return 4;
};
// Test:
var r = new Rectangle(5, 10);
document.writeln("Number of vertices = " + Rectangle.numVertices());
document.write("Number of vertices = " + r.constructor.numVertices());
// rectangle.numVertices() WRONG
4 Inheritance Hierarchies
We build a hierarchy of geometric objects:
- A point is a tuple (x, y).
- A shape is positioned at a point and has a color.
- A rectangle is a shape with width, height and 4 corners.
- A circle is a shape with radius and 0 corners.
- A square is a rectangle with side = width = height.
4.1 Point
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.type = function() {
return "Point";
};
Point.prototype.toString = function() { // overwrite Object.toString()
return "{x:" + this.x + ", y:" + this.y + "}";
};
// Test:
var p = new Point(1, 2);
document.write(p.constructor.type() + " = " + p); // calls p.toString()
4.2 Shape
function Shape(x, y, color) {
this.position = new Point(x, y);
this.color = color;
}
Shape.type = function() {
return "Shape";
};
Shape.prototype.area = function() {
return 0;
};
Shape.prototype.toString = function() {
return "{position:" + this.position + ", color:" + this.color + "}";
};
// Test
var shape = new Shape(1, 2, "red");
document.writeln(shape.constructor.type() + " = " + shape);
document.write("Area = " + shape.area());
4.3 Rectangle
function Rectangle(x, y, width, height, color) {
// call constructor of superclass:
Shape.call(this, x, y, color);
this.width = width;
this.height = height;
}
Rectangle.prototype = new Shape(); // establish superclass
Rectangle.prototype.constructor = Rectangle; // set correct constructor
Rectangle.type = function() {
return "Rectangle";
};
Rectangle.prototype.area = function() {
return this.width * this.height;
};
Rectangle.prototype.toString = function() {
// overwrite and call Shape.toString()
var shapeString = Shape.prototype.toString.apply(this);
return "[" + shapeString +
", {width:" + this.width + ", height:" + this.height + "}]";
};
// Test:
var r = new Rectangle(1, 2, 10, 20, "green");
document.writeln(r.constructor.type() + " = " + r);
document.write("Area = " + r.area());
4.4 Circle
function Circle(x, y, radius, color) {
// call constructor of superclass (if needed):
Shape.call(this, x, y, color);
this.radius = radius;
}
Circle.prototype = new Shape(); // establish superclass
Circle.prototype.constructor = Circle; // set correct constructor
Circle.type = function() {
return "Circle";
};
Circle.PI = 3.14;
Circle.prototype.area = function() {
return Circle.PI * this.radius * this.radius;
};
Circle.prototype.toString = function() {
// overwrite and call Shape.toString()
var shapeString = Shape.prototype.toString.apply(this);
return "[" + shapeString +
", {radius:" + this.radius + "}]";
};
// Test:
var c = new Circle(1, 2, 1, "green");
document.writeln(c.constructor.type() + " = " + c);
document.write("Area = " + c.area());
4.5 Square
function Square(x, y, side, color) {
// call constructor of superclass:
Rectangle.call(this, x, y, side, side, color);
}
Square.prototype = new Rectangle(); // establish superclass
Square.prototype.constructor = Square; // set correct constructor
Square.type = function() {
return "Square";
};
Square.prototype.toString = function() {
// overwrite and call Rectangle.toString()
var rectString = Rectangle.prototype.toString.apply(this);
return rectString;
};
// Test:
var sq = new Square(3, 4, 7, "yellow");
document.writeln(sq.constructor.type() + " = " + sq);
document.write("Area = " + sq.area());
4.6 Test
// Test:
var shapes = [];
shapes.push(new Shape(0, 0, "black"));
shapes.push(new Rectangle(1, 1, 10, 20, "red"));
shapes.push(new Square(2, 2, 30, "blue"));
shapes.push(new Circle(3, 3, 10, "green"));
for (var n = 0; n < shapes.length; ++n) {
var shape = shapes[n];
document.writeln(n + ": " +
shape.constructor.type() + "=" + shape +
" Area=" + shape.area());
}
