Javascript [Electronic resources] : The Definitive Guide (4th Edition) نسخه متنی

8.5 Object-Oriented JavaScript

Although JavaScript
supports a data type we call an object, it
does not have a formal notion of a class. This makes it quite
different from classic object-oriented languages such as C++ and
Java. The common conception about object-oriented programming
languages is that they are strongly typed and support class-based
inheritance. By these criteria, it is easy to dismiss JavaScript as
not being a true object-oriented language. On the other hand,
we've seen that JavaScript makes heavy use of objects and that
it has its own type of prototype-based inheritance. JavaScript is a
true object-oriented language. It draws inspiration from a number of
other (relatively obscure) object-oriented languages that use
prototype-based inheritance instead of class-based inheritance.

Although JavaScript is not a class-based object-oriented language, it
does a good job of simulating the features of class-based languages
such as Java and C++. I've been using the term class informally
throughout this chapter. This section more formally explores the
parallels between JavaScript and true class-based inheritance
languages such as Java and C++.[4]

[4] You should read this
section even if you are not familiar with those languages and that
style of object-oriented programming.

Let's start by defining some basic terminology. An

object , as we've already seen, is a data
structure that contains various pieces of named data and may also
contain various
methods
to operate on those pieces of data. An object groups related values
and methods into a single convenient package, which generally makes
programming easier by increasing the modularity and reusability of
code. Objects in JavaScript may have any number of
properties,
and properties may be dynamically added to an object. This is not the
case in strictly typed languages such as Java and C++. In those
languages, each object has a predefined set of properties,[5] where each property is of
a predefined type. When we are using JavaScript objects to simulate
object-oriented programming techniques, we generally define in
advance the set of properties for each object and the type of data
that each property holds.

[5] They are usually called "fields" in Java and C++,
but we'll refer to them as properties here, since that is the
JavaScript terminology.

In Java and C++, a

class defines the structure
of an object. The class specifies exactly what fields an object
contains and what types of data each holds. It also defines the
methods that operate on an object. JavaScript does not have a formal
notion of a class, but, as we've seen, it approximates classes
with its constructors and their prototype objects.

In both JavaScript and class-based
object-oriented languages, there may be multiple objects of the same
class. We often say that an object is an

instance of its class. Thus, there may be many
instances of any class. Sometimes we use the term

instantiate to describe the process of creating
an object (i.e., an instance of a class).

In Java, it is a
common programming convention to name classes with an initial capital
letter and to name objects with lowercase letters. This convention
helps keep classes and objects distinct from each other in code; it
is a useful convention to follow in JavaScript programming as well.
In previous sections, for example, we've defined the Circle and
Rectangle classes and have created instances of those classes named
c and rect.

The members of a Java class may be of four
basic types: instance properties, instance methods, class properties,
and class methods. In the following sections, we'll explore the
differences between these types and show how they are simulated in
JavaScript.

8.5.1 Instance Properties

Every
object has its own separate copies
of its

instance properties . In other words, if
there are 10 objects of a given class, there are 10 copies of each
instance property. In our Circle class, for example, every Circle
object has a property r that specifies the radius
of the circle. In this case, r is an instance
property. Since each object has its own copy of the instance
properties, these properties are accessed through individual objects.
If c is an object that is an instance of the
Circle class, for example, we refer to its radius as:

c.r 

By default, any object property in JavaScript is an instance
property. To truly simulate object-oriented programming, however, we
will say that instance properties in JavaScript are those properties
that are created and/or initialized in an object by the constructor
function.

8.5.2 Instance Methods

An

instance
method is
much
like an instance property, except that it is a method rather than a
data value. (In Java, functions and methods are not data, as they are
in JavaScript, so this distinction is more clear.) Instance methods
are invoked on a particular object, or instance. The area(
) method of our Circle class is an instance method. It is
invoked on a Circle object c like this:

a = c.area(  ); 

Instance methods use the
this

keyword to refer to the object or instance on which they are
operating. An instance method can be invoked for any instance of a
class, but this does not mean that each object contains its own
private copy of the method, as it does with instance properties.
Instead, each instance method is shared by all instances of a class.
In JavaScript, we define an instance method for a class by setting a
property in the constructor's prototype object to a function
value. This way, all objects created by that constructor share an
inherited reference to the function and can invoke it using the
method invocation syntax shown earlier.

8.5.3 Class Properties

A

class property
in Java is a property that is associated with a class itself, rather
than with each instance of a class. No matter how many instances of
the class are created, there is only one copy of each class property.
Just as instance properties are accessed through an instance of a
class, class properties are accessed through the class itself.
Number.MAX_VALUE is an example of a class property
in JavaScript: the MAX_VALUE property is accessed
through the Number class. Because there is only one copy of each
class property, class properties are essentially global. What is nice
about them, however, is that they are associated with a class and
they have a logical niche, a position in the JavaScript namespace,
where they are not likely to be overwritten by other properties with
the same name. As is probably clear, we simulate a class property in
JavaScript simply by defining a property of the constructor function
itself. For example, to create a class property
Circle.PI to store the mathematical constant

pi , we can do the following:

Circle.PI = 3.14; 

Circle is a constructor function, but because
JavaScript functions are objects, we can create properties of a
function just as we can create properties of any other object.

8.5.4 Class Methods

Finally, we come to class methods. A

class method is a method associated with a class
rather than with an instance of a class; they are invoked through the
class itself, not through a particular instance of the class. The
Date.parse( ) method (which you can look up in the
core reference section of this book) is a class method. You always
invoke it through the Date constructor object, rather than through a
particular instance of the Date class.

Because class
methods are not invoked through a particular object, they cannot
meaningfully use the this keyword -- this
refers to the object for which an instance method is invoked. Like
class properties, class methods are global. Because they do not
operate on a particular object, class methods are generally more
easily thought of as functions that happen to be invoked through a
class. Again, associating these functions with a class gives them a
convenient niche in the JavaScript namespace and prevents namespace
collisions. To define a class method in JavaScript, we simply make
the appropriate function a property of the constructor.

8.5.5 Example: The Circle Class

Example 8-5 is a reimplementation of our
Circle class that contains
examples of each of these four basic types of members.

Example 8-5. Defining instance and class properties and methods

function Circle(radius) {   // The constructor defines the class itself.
// r is an instance property, defined and initialized in the constructor.
this.r = radius;
}
// Circle.PI is a class property--it is a property of the constructor function.
Circle.PI = 3.14159;
// Here is a function that computes a circle's 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.
// Note: with JavaScript 1.2, we can use a function literal to
// define the function without naming it Circle_area.
Circle.prototype.area = Circle_area;
// Here's another function. It takes two Circle objects as arguments and
// returns the one that is larger (i.e., 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, it doesn't make sense as
// an instance method operating on a single Circle object. But we don't want
// it to be a standalone function either, so 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:
var c = new Circle(1.0);      // Create an instance of the Circle class
c.r = 2.2;                    // Set the r instance property
var a = c.area();             // Invoke the area(  ) instance method
var x = Math.exp(Circle.PI);  // Use the PI class property in our own computation
var d = new Circle(1.2);      // Create another Circle instance
var bigger = Circle.max(c,d); // Use the max(  ) class method

8.5.6 Example: Complex Numbers

Example 8-6 is



another example, somewhat more
formal than the last, of defining a class of objects in JavaScript.
The code and the comments are worth careful study. Note that this
example uses the function literal syntax of JavaScript 1.2. Because
it requires this version of the language (or later), it does not
bother with the JavaScript 1.1 compatibility technique of invoking
the constructor once before assigning to its prototype object.

Example 8-6. A complex number class

/*
* Complex.js:
* This file defines a Complex class to represent complex numbers.
* Recall that a complex number is the sum of a real number and an
* imaginary number and that the imaginary number i is the
* square root of -1.
*/
/*
* The first step in defining a class is defining the constructor
* function of the class. This constructor should initialize any
* instance properties of the object. These are the essential
* "state variables" that make each instance of the class different.
*/
function Complex(real, imaginary) {
this.x = real;       // The real part of the number
this.y = imaginary;  // The imaginary part of the number
}
/*
* The second step in defining a class is defining its instance
* methods (and possibly other properties) in the prototype object
* of the constructor. Any properties defined in this object will
* be inherited by all instances of the class. Note that instance
* methods operate implicitly on the this keyword. For many methods,
* no other arguments are needed.
*/
// Return the magnitude of a complex number. This is defined
// as its distance from the origin (0,0) of the complex plane.
Complex.prototype.magnitude = function(  ) {
return Math.sqrt(this.x*this.x + this.y*this.y);
};
// Return a complex number that is the negative of this one.
Complex.prototype.negative = function(  ) {
return new Complex(-this.x, -this.y);
};
//  Convert a Complex object to a string in a useful way.
//  This is invoked when a Complex object is used as a string.
Complex.prototype.toString = function(  ) {
return "{" + this.x + "," + this.y + "}";
};
// Return the real portion of a complex number. This function
// is invoked when a Complex object is treated as a primitive value.
Complex.prototype.valueOf = function(  ) { return this.x; }
/*
* The third step in defining a class is to define class methods,
* constants, and any needed class properties as properties of the
* constructor function itself (instead of as properties of the
* prototype object of the constructor). Note that class methods
* do not use the this keyword: they operate only on their arguments.
*/
// Add two complex numbers and return the result.
Complex.add = function (a, b) {
return new Complex(a.x + b.x, a.y + b.y);
};
// Subtract one complex number from another.
Complex.subtract = function (a, b) {
return new Complex(a.x - b.x, a.y - b.y);
};
// Multiply two complex numbers and return the product.
Complex.multiply = function(a, b) {
return new Complex(a.x * b.x - a.y * b.y,
a.x * b.y + a.y * b.x);
};
// Here are some useful predefined complex numbers.
// They are defined as class properties, where they can be used as
// "constants." (Note, though, that they are not actually read-only.)
Complex.zero = new Complex(0,0);
Complex.one = new Complex(1,0);
Complex.i = new Complex(0,1);

8.5.7 Superclasses and Subclasses

In Java,
C++, and other class-based object-oriented languages, there is an
explicit concept of the

class hierarchy . Every
class can have a

superclass from which it inherits properties and
methods. Any class can be extended, or subclassed, so that the
resulting

subclass inherits its behavior. As
we've seen, JavaScript supports prototype inheritance instead of
class-based inheritance. Still, JavaScript analogies to the class
hierarchy can be drawn. In JavaScript, the Object class is the most generic, and all
other classes are specialized versions, or subclasses, of it. Another
way to say this is that Object is the superclass of all the built-in
classes. All classes inherit a few basic methods (described later in
this chapter) from Object.

We've learned that objects inherit
properties from the prototype
object of their constructor. How do they also inherit properties from
the Object class? Remember that the prototype object is itself an
object; it is created with the Object( )
constructor. This means the prototype object itself inherits
properties from Object.prototype! So, an object of
class Complex inherits properties from the
Complex.prototype object, which itself inherits
properties from Object.prototype. Thus, the
Complex object inherits properties of both objects. When you look up
a property in a Complex object, the object itself is searched first.
If the property is not found, the
Complex.prototype object is searched next.
Finally, if the property is not found in that object, the
Object.prototype object is searched.

Note that because the Complex prototype object is searched before the
Object prototype object, properties of
Complex.prototype hide any properties with the
same name in Object.prototype. For example, in the
class definition shown in Example 8-6, we defined a
toString( )
method in the Complex.prototype object.
Object.prototype also defines a method with this
name, but Complex objects never see it because the definition of
toString( ) in
Complex.prototype is found first.

The classes we've shown in this chapter are all direct
subclasses of Object. This is typical of JavaScript programming;
there is not usually any need to produce a more complex class
hierarchy. When necessary, however, it is possible to subclass any
other class. For example, suppose we want to produce a subclass of
Complex in order to add some more methods. To do this, we simply have
to make sure that the prototype object of the new class is itself an
instance of Complex, so that it inherits all the properties of
Complex.prototype:

// This is the constructor for the subclass.
function MoreComplex(real, imaginary) {
this.x = real;
this.y = imaginary;
}
// We force its prototype to be a Complex object. This means that
// instances of our new class inherit from MoreComplex.prototype,
// which inherits from Complex.prototype, which inherits from
// Object.prototype.
MoreComplex.prototype = new Complex(0,0);
// Now add a new method or other new features to this subclass.
MoreComplex.prototype.swap = function(  ) {
var tmp = this.x;
this.x = this.y;
this.y = tmp;
} 

There is one subtle shortcoming to the subclassing technique shown
here. Since we explicitly set
MoreComplex.prototype to an object of our own
creation, we overwrite the prototype object provided by JavaScript
and discard the constructor property we are given.
This constructor property, described later in this
chapter, is supposed to refer to the constructor function that
created the object. A MoreComplex object, however,
inherits the constructor property of its
superclass, rather than having one of its own. One solution is to set
this property explicitly:

MoreComplex.prototype.constructor = MoreComplex; 

Note, however, that in JavaScript 1.1, the
constructor property is read-only and cannot be
set in this way.