Time for action—extending the ShowDog class with the Dog class_MooTools 1.2 Beginner's Guide-QQ阅读中文武侠网

上QQ阅读APP看书，第一时间看更新

Time for action—extending the ShowDog class with the Dog class

Let's see how we can extend our Dog class using the Extends property:

Let's clean up the Dogs class first by removing the things we don't need any more to tidy up our code. We'll delete the .sit() class method, the myDog.bark() call, and the document.write's that we used to show the option property values of myDog. Here's our revised code:

<html>
<head>
<script type="text/javascript" src="mootools-1.2.1-core-nc.js"> </script>
<script type="text/javascript">
window.addEvent('domready', function()
{
var Dog = new Class(
{
Implements : [ Options ],
options :
{
name : 'Barkee',
type : 'Poodle',
age : 4
},
initialize : function( options )
{
this.setOptions( options );
},
bark : function()
{
alert( this.options.name + ' is barking.' );
}
});
});
</script>
</head>
<body>
</body>
</html>

Create the ShowDog class right below the Dog class. Use the following code:

var ShowDog = new Class(
{
Extends : Dog,
options :
{
name : 'Xythian'
},
initialize : function( options )
{
this.parent( options );
alert( 'I\'m no ordinary dog!' );
document.write( 'My name is ' + this.options.name + '<br />');
document.write( 'I\'m a ' + this.options.type + '<br />');
document.write( 'I\'m ' + this.options.age + '<br />');
}
});

Instantiate a new ShowDog object, like so:
```
var myOtherDog = new ShowDog();
```
We now have the myOtherDog object, which is an instance of the ShowDog class that extends the Dog class.
Test your HTML document in a browser, and if everything went according to plan, then you should see the following:

Then, the next thing you would see is as shown:

What just happened?

We extended the ShowDogs class with the Dogs class. We did this by using the special class property called Extends, which allows us to assign it the class we're extending it with.

Before we move onto the next topic, we should go over class inheritance a little bit.

Class inheritance

Note that the ShowDogs class takes on properties and methods of its parent class (Dogs) if we don't explicitly define them.

For example, since we already defined an Implements property in Dogs, we need not do it again for ShowDogs. We explicitly defined the name option value (Xythian), when we print the value of it in the document, using the following line:

document.write( 'My name is ' + this.options.name + '<br />');

It printed "My name is Xythian".

However, we didn't explicitly define the type and age option values that we created in the parent class when we performed the following:

document.write( 'I\'m a ' + this.options.type + '<br />');
document.write( 'I\'m ' + this.options.age + '<br />');

The values took on the default property values we set in Dogs (Poodle, and 4).

Have a go hero — doing more with the thing

Why don't you try using the .bark() method that's in the Dog class on the myOtherDog object? What happens? Did it behave like you expected it to?