- 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?
- AJAX and PHP: Building Modern Web Applications 2nd Edition
- Photoshop CS6 商業(yè)應(yīng)用案例實戰(zhàn)
- 從零開始學(xué)LATEX
- AI繪畫教程:Midjourney關(guān)鍵詞靈感手冊
- 工業(yè)軟件研發(fā)、測試與質(zhì)量管理論叢
- 老郵差·Photoshop數(shù)碼照片處理技法:人像篇(修訂版)
- Oracle Fusion Middleware Patterns
- 攝影師的后期必修課(調(diào)色篇)
- 新編 中文版Photoshop平面設(shè)計入門與提高
- Microsoft Silverlight 4 and SharePoint 2010 Integration
- 中文版Photoshop 2020基礎(chǔ)培訓(xùn)教程
- AI純美人物繪畫關(guān)鍵詞圖鑒(Midjourney版)
- Photoshop 圖形圖像處理
- AutoCAD 2010 建筑設(shè)計與制作技能基礎(chǔ)教程
- 中文版3dsmax2020/VRay效果圖全能教程