The constructor func-tion has a prototype object containing those properties that are inherited by all Book objects.. It has inherited all of the original properties of the Book class,
Trang 1JavaScript methods are just properties that have been assigned functions for their values
A common use for prototypes is to extend a class by giving it new methods You can use
a prototype to assign methods that are common to all objects in a given class The benefit
of using the prototype is that the method does not have to be created and initialized
every time an object is created, and there is no duplication of function code All objects
in the class share the same prototype method
In Example 8.14, a new method is defined for the Book class to add a tax to the price
of each book All Book objects will have access to this method
Figure 8.16 Going up the prototype chain.
E X A M P L E 8 1 4
<html>
<head><title>Method Inheritance</title>
<script type = "text/javascript">
1 function Book(title, author, price){ // The Book constructor
this.title = title; // Book properties/attributes
this.author = author;
this.price=price;
2 this.show=showProps; // Book method
}
3 function showProps(){
var result = "";
for (var i in this){
result += i + " = " + this[i] + "<br />";
} return result;
}
</script>
</head>
<body>
<script type="text/javascript">
// Add a new method with prototype
Trang 24 Book.prototype.addTax=function addTax(){
this.price *= 1.18;
return(this.price.toFixed(2));
}
5 var famousBook=new Book("War and Peace","Leo Tolstoy", 30.00);
var myBook=new Book("JavaScript by Example", "Ellie
Quigley", 25);
6 document.write("<br /><b>" + famousBook.show()+"<br />");
document.write("<br /><b>" + myBook.show()+"<br />");
7 document.write("With tax \""+ famousBook.title +"\" costs $"+
famousBook.addTax() +".<br />");
document.write("With tax \""+ myBook.title + "\" costs $" +
8 myBook.addTax() +".<br />");
</script>
</body>
</html>
E X P L A N A T I O N
1 The constructor function called Book defines the properties and methods for a
Book class (Book is a JavaScript representation of a class.) The constructor
func-tion has a prototype object containing those properties that are inherited by all
Book objects
2 A function called showProps is defined on line 3 Its name is assigned to the
prop-erty called show, making it a method for the Book class.
3 The function showProps uses the special for loop to iterate through all the
proper-ties of an object
4 The Book’s prototype property is used to add a function called addTax() It
calcu-lates and returns the price of the book with an 18 percent sales tax added This
function will be added as a method to the Book class and available to all objects
in that class JavaScript creates only one copy of the function and all book objects
will point to that copy
5 A new Book object, called myBook, is created It has inherited all of the original
properties of the Book class, including the new method defined by the prototype
property, called addTax.
6 The show() method is called for the object, famousBook The entire object,
prop-erties and methods are displayed You can see that addTax has been included.
7 The new method, addTax() is called for the object famousBook.
8 Again, addTax() is called for the object myBook The result is shown in Figure
8.17
E X A M P L E 8 1 4
Trang 38.5.4 Properties and Methods of All Objects
As we have seen, all user-defined objects and built-in objects are descendants of the
object called Object The Object object has its own properties and methods that can be
accessed by any objects derived from it
All objects have the properties and methods shown in Tables 8.1 and 8.2
Figure 8.17 Adding a new method with a prototype.
Table 8.1 Object Properties
constructor A reference to the function that created the object
prototype A reference to the object prototype for the object This allows
the object to share properties and methods.
Table 8.2 Some Object Methods
toString() Returns a string representing a specified object.
valueOf() Returns a primitive value for a specified object
Trang 4You can also use the instanceof operator to test if the specified object is of the specified
object type If it is, true is returned
hasOwnProperty(property) Returns true if the specified property belongs to this object, not
inherited from its prototype object chain
isPrototypeOf(object) Returns true if this object is one of the parent prototype objects
of the specified child object.
F O RM A T
var isInstance = objectName instanceof objectType;
E X A M P L E
var str1 = new String("good morning");// Create a new string object
var result = sr1 instanceof String;
if( result == true ){ }
E X A M P L E 8 1 5
<html>
<head><title>Object object</title>
<script type="text/javascript">
1 function Book(title, author){
this.title =title;
this.author=author;
}
</script>
</head>
<body bgColor="#EOFFFF">
<big>
<script>
2 Book.prototype.publisher="Oxford Press";
3 Object.prototype.category="Fiction";
4 var tale = new Book("Kidnapped","R.L.Stevenson");
5 document.write("The value of Object's category property is "+
Object.prototype.category +"<br />");
6 if(tale.constructor == Book){
document.write("tale is a Book object<br />");
document.write("The Book's constructor is defined as: "+
7 tale.constructor + "<br />");
}
Continues
Table 8.2 Some Object Methods (continued)
Trang 58 if(tale.hasOwnProperty("author")){
document.write("The object has an author property.<br />");
}
9 if(Book.prototype.isPrototypeOf(tale)){
document.write("Book is a prototype of object tale.<br />");
}
10 if(tale instanceof Book){
document.write("tale is an instance of Book.<br />");
}
11 if(tale instanceof Object){
document.write("tale is an instance of Object.<br />");
}
</script>
</big>
</body>
</html>
E X P L A N A T I O N
1 The constructor function called Book defines the properties and methods for a
Book class
2 The Book class starts with an empty prototype object Now we assign it a property
The publisher property and its value are available to all Book objects.
3 By assigning a property to the Object object’s prototype, all instances of the Book
class (or any class) will have access to the category property.
4 A new instance of the Book class is created, a reference to an object called tale.
5 The value of the Object object’s prototype property, category, is displayed.
6 The constructor property is inherited from the Object object and can be used with
any of its descendants This line tests if this object has a constructor It does, so
the block is entered
7 The value assigned to the constructor property is the constructor function and the
names of all of its arguments and properties
8 The hasOwnProperty() method returns true if the property (its argument) belongs
to the object being tested; in this case the object is tale and the method is checking
to see if the author property belongs to it and is not inherited from the prototype
chain
9 Next we test to see if the tale object is inheriting from the Book class; that is, Book
is a prototype for the tale class.
10 The instanceof operator returns true if the specified object, tale, is of the specified
object type; that is, tale is a Book type.
11 The instanceof operator returns true if the specified object, tale, is of the specified
object type; that is, tale is also an Object type The output is shown in Figure 8.18.
E X A M P L E 8 1 5 (C O N T I N U E D)
Trang 6In the previous examples, we used the prototype object to extend properties and methods
for a given class In the next chapter you will see how to use prototyping to customize
JavaScript’s built-in objects such as Date and String.
Now, to demonstrate how inheritance works, we will define a base class called Pet,
which will have its own properties and methods and can create instances via the “new”
operator. Then we will use this base class to create two additional subclasses called Cat
and Dog Each of these subclasses (derived classes) will use the prototype property to
inherit the properties and methods of the Pet class (see Figure 8.19) Both the Cat and
the Dog class will be customized to have their own speak() method Even though the
name of the method is the same for both the Cat and Dog class, JavaScript will call the
speak() method for the object to which it belongs; that is, when the speak() method is
called for a Cat object, it will return “Meow”, and when called for a Dog object, it will
say “Woof” See Example 8.15 for the program code
Figure 8.18 Testing objects.
Figure 8.19 A hierarchical tree-like structure used to describe base class and
derived classes.
Pet Object
Trang 7E X A M P L E 8 1 6
<html>
<head><title>Creating a subclass</title>
<script type="text/javascript">
2 var owner = "Mrs Jones";
var gender = undefined;
3 this.setOwner = function(who) { owner=who;};
this.getOwner = function(){ return owner; }
4 this.setGender = function(sex) { gender=sex; }
this.getGender = function(){ return gender; } }
5 function Cat(){} //subclass constructor
7 Cat.prototype.constructor=Cat;
8 Cat.prototype.speak=function speak(){
return("Meow");
};
9 function Dog(){}; //subclass constructor
10 Dog.prototype= new Pet();
Dog.prototype.constructor=Dog;
Dog.prototype.speak = function speak(){
return("Woof");
};
</script>
</head>
<body><big>
<script>
var dog = new Dog;
12 cat.setOwner("John Doe");
cat.setGender("Female");
13 dog.setGender("Male");
14 document.write("The cat is a "+ cat.getGender()+ " owned by "
+ cat.getOwner() +" and it says " + cat.speak());
document.write("<br>The dog is a "+ dog.getGender() + " " +
" owned by " + dog.getOwner() + " and it says "
+ dog.speak());
</script>
</big>
</body>
</html>
E X P L A N A T I O N
1 The constructor function called Pet will define the properties and methods for a
Pet class The Pet constructor creates a class of Pets and is the base class for the
Dog and Cat classes defined later in the program.
2 Local variables are set for the object All Pet objects will have an owner and a
gen-der The default value for the owner is Mrs Jones The gender is undefined.
Trang 83 The setOwner and getOwner methods are defined for the Pet All Pet objects will
have access to these methods
4 The setGender and getGender methods are defined for the Pet.
5 An empty function called Cat is declared It will be used as the constructor
func-tion for a Cat class.
6 By creating a new Pet object and assigning it to the Cat’s prototype, all properties
and methods of the Pet will now be available to the Cat This is how JavaScript
implements inheritance
7 The constructor property returns a reference to the function that initialized the
ob-ject; in this case, the Pet (The value of this property is a reference to the function
itself, not a string containing the function’s name) By updating the constructor
property, it will contain a reference to the new Cat class constructor, not its parent,
the Pet Now the Cat constructor is the constructor for all Cat objects
8 We are creating a new method for the Cat, called speak It will be a property of the
Cat’s prototype All cat objects will have access to this method and all cats will
speak “Meow”
9 An empty function, called Dog, is created
10 By creating a new Pet object and assigning it to the Dog’s prototype, all properties
and methods of the Pet will now be available to the Dog The Dog inherits from
the Pet The constructor property is also updated so that it will reference the Dog
class The Dog will also have a speak() method How does JavaScript know which
speak() method to call? The object that calls this speak method has its own copy
of it
11 A new object called cat is instantiated And in the next line, a dog object is
instan-tiated They both inherit from the Pet class.
12 The cat object calls the setOwner() method with a new value It inherited this
method from the Pet.
13 The dog calls the setGender() method, inherited from the Pet.
14 Using the getOwner() and getGender() and speak() methods, we display the
prop-erties of the cat object and the dog object The output is shown in Figure 8.20.
Figure 8.20 Subclasses and their properties.
E X P L A N A T I O N (C O N T I N U E D)
Trang 98.6 What You Should Know
Because JavaScript is based on all kinds of objects such as windows, documents, input
devices, buttons, and so on, in this chapter we talked about what objects are and how they
are used The purpose of creating your own objects before talking about JavaScript’s core
objects and DOM objects is to give you an understanding of the terminology and syntax
and how objects relate to each other in an object model Now you should understand:
1 Why an object is a composite type
2 Several ways to create an object
3 How to use an object constructor
4 The difference between properties and methods
5 The difference between a method and a function
6 How a function can act as a constructor
7 What the this keyword is used for.
8 How to create an object literal
9 How to use the with keyword.
10 How to extend an object with its prototype
Trang 101 Create a circle object with the Object() constructor and a method that will
cal-culate its circumference
2 Write a function that will create a clock object
a It will have three properties: seconds, minutes, and hours.
b Write two methods: setTime() to set the current time and displayTime() to
display the time
c The user will be prompted to select either a.m./p.m., or military time The
value he or she chooses will be passed as an argument to the displayTime()
method
3 The output will be either
14:10:26 or 2:10:26 pm
depending on what argument was passed to the display() method.
4 The following function acts as a constructor to create an Employee object
Use this function to create three new employees Set the properties and print
the employees’ names Add a phone property to this function.
<script type="text/javascript">
function Employee(){
var = name;
this.getName = function(){
return this.name;
} this.setName = function(name){
this.name = name;
};
}
5 Create an object literal called Customer The Customer will have
properties: a name, gender, photo, and occupation There will be one method
called showCustomer() The user will be prompted for each of the property val-ues Use the showCustomer() method to display the data in an HTML table
6 Using JavaScript prototyping, extend the Employee (Exercise 4) Create two
new subclasses from the Employee: a Salesman and a Manager class Use a
pro-totype to create a salary property for the new employees (setSalary, getSalary), and a setRaise() method to add 15 percent to the salary Check to see if each of
the new Employees is an instance of the Employee class
E x e r c i s e s