When using MooTools, in order to define a class that extends another we should use the Extends key and assign it with the name of the parent class as its value. In order to invoke a method that was overridden we should use this.parent.

<!DOCTYPE html>
<html>
<head>
    <title>mootools functions binding demo</title>
    <script type="text/javascript" src="mootools-core-1.4.5-full-compat.js">
    </script>
    <script type="text/javascript">
        var Person = new Class({
            //properties
            fName: '',
            lName: '',
            id: 0,
            //constructor
            initialize: function(first,last,idVal)
            {
                this.fName = first;
                this.lName = last;
                this.id = idVal;
            },
            //methods
            sleep: function()
            {
                document.write(this.fName + ' is sleeping.' + "<br>");
            },
            talk: function()
            {
                document.write(this.fName + ' is talking.' + "<br>");
            }
        });
        var Student = new Class({
            //inheritance
            Extends:Person,
            //properties
            average:0,
            //constructor
            initialize: function(first,last,idVal,avgVal)
            {
                this.parent(first,last,idVal);
                average = avgVal;
            },
            //methods
            printDetails: function()
            {
                document.write(this.fName+" "+this.lName+" "+this.id+" "+average);
            }
        });
        var std = new Student("moshe","jonas",123123,98);
        std.printDetails();
    </script>
</head>
<body>

</body>
</html>

The following video clip shows the execution of this code sample, overviews it and explains it.

Leave a Reply

Your email address will not be published. Required fields are marked *