Tải bản đầy đủ (.pdf) (11 trang)

Học JavaScript qua ví dụ part 24 pot

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (852.28 KB, 11 trang )

ptg
202 Chapter 8 • Objects
8.5.3 Adding Methods with Prototype
JavaScript 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.
EXAMPLE 8.14
<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
From the Library of WoweBook.Com
ptg
8.5 Extending Objects with Prototypes 203
4 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>
EXPLANATION
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.
EXAMPLE 8.14
From the Library of WoweBook.Com
ptg
204 Chapter 8 • Objects
8.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
Property What It Provides
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

Method What It Does
toString() Returns a string representing a specified object.
valueOf() Returns a primitive value for a specified object.
From the Library of WoweBook.Com
ptg
8.5 Extending Objects with Prototypes 205
You 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.
FORMAT
var isInstance = objectName instanceof objectType;
EXAMPLE
var str1 = new String("good morning");// Create a new string object
var result = sr1 instanceof String;
if( result == true ){ }
EXAMPLE 8.15
<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)
Method What It Does
From the Library of WoweBook.Com
ptg
206 Chapter 8 • Objects
8 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>
EXPLANATION
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.
EXAMPLE 8.15 (CONTINUED)
From the Library of WoweBook.Com
ptg

8.5 Extending Objects with Prototypes 207
8.5.5 Creating Subclasses and Inheritance
In 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.
Cat
Dog
Pet
Object
From the Library of WoweBook.Com
ptg
208 Chapter 8 • Objects
EXAMPLE 8.16
<html>
<head><title>Creating a subclass</title>
<script type="text/javascript">
1 function Pet(){ // Base Class

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
6 Cat.prototype = new Pet();
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>
11 var cat = new Cat;
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>
EXPLANATION
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.
From the Library of WoweBook.Com
ptg
8.5 Extending Objects with Prototypes 209
3 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.
EXPLANATION ( CONTINUED)
From the Library of WoweBook.Com
ptg
210 Chapter 8 • Objects
8.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.
From the Library of WoweBook.Com
ptg
8.6 What You Should Know 211
1. 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.
Exercises
Exercises
From the Library of WoweBook.Com
ptg
This page intentionally left blank
From the Library of WoweBook.Com

×