- MooTools 1.2 Beginner's Guide
- Jacob Gube Garrick Cheung
- 475字
- 2021-04-01 13:33:37
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, themyDog.bark()
call, and thedocument.write's
that we used to show the option property values ofmyDog
. 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 theDog
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 theShowDog
class that extends theDog
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.
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?
- Spring Python 1.1
- Premiere Pro 2022短視頻剪輯、調色與特效制作實戰(全彩微課版)
- Adobe Illustrator 2023基礎教材
- Excel 2010 商務數據分析與處理(第2版)
- Creo 6.0快速入門、進階與精通(升級版)
- 邊做邊學:Photoshop圖像制作案例教程(第2版·Photoshop 2020)
- eZ Publish 4: Enterprise Web Sites Step/by/Step
- 影視動畫場景與特效制作:3ds Max-Vue-AfterBurn-FumeFX
- 中文版Illustrator CC 2018基礎培訓教程
- 新編 中文版Photoshop入門與提高
- Premiere pro CC中文版自學視頻教程
- 中文版After Effects CC 2018 動漫、影視特效后期合成秘技
- 好用,Excel數據處理高手
- Mastercam 2019 完全自學寶典
- Ruby on Rails Web Mashup Projects